Shimoku docs
  • 🚀QuickStart
    • Installation & Setup
    • Minimal APP example
    • Extended Example
    • Templates & tutorials
  • 🤖Artificial Intelligence
    • Classification
      • Train Classification
        • Train Classification Outputs
      • Predict Classification
        • Predict Classification Outputs
    • Generate Insights
      • Generate Insights Outputs
  • 🛠️Building Web App
    • Environment
      • Overview
      • Environment Variables
    • Management
      • Managing Universes
      • Managing Workspaces
      • Managing Boards
    • Menu
      • Changing the Menu Path
      • Updating the Menu Path
      • Deleting the Menu Path
    • Grid
      • Using the Grid
    • Theming
      • Colors Usage
    • Actions
    • Modals
    • IO
  • 💡Elements
    • Summary
    • Charts
      • Table
        • Buttons Column
        • Filters
        • Search bars
        • Colored labels
      • HTML
        • Raw HTML
        • Beautiful Titles
        • Background Indicators
        • Click to New Tab
        • Box With Button
        • Panel
      • Indicators
        • Indicator
        • Grouped Indicators
        • Vertical Indicators
        • Color by Value
        • Gauge Indicator
        • Indicators with Header
      • Scatter Charts
        • Scatter
        • Scatter with Effect
      • Line Charts
        • Line
        • Predictive Line
        • Segmented Line
        • Marked Line
        • Line With Confidence Area
        • Top Bottom Line Charts
        • Summary Line
      • Area Charts
        • Area
        • Stacked Area
        • Segmented Area
        • Top Bottom Area Charts
      • Bar Charts
        • Bar
        • Stacked Bar
        • Horizontal Bar
        • Stacked Horizontal Bar
        • Zero Centered Bar
      • Pie Charts
        • Pie
        • Doughnut
        • Rose
      • Gauge Charts
        • Shimoku Gauge
        • Speed Gauge
      • Input forms
        • Group chained Inputs
        • List input search
        • Conditional inputs
        • Audio input
        • Drag & Drop
      • Line and Bar
      • Waterfall
      • Annotated Chart
      • Heatmap
      • Radar
      • Sunburst
      • Tree
      • Treemap
      • Sankey Diagram
      • Funnel chart
      • iFrame
    • Composite Template Charts
      • Infographics text bubble
      • Chart and Modal Button
      • Chart and Indicators
    • Data Sets
      • Data Set Filters
    • Create your own charts
      • Free Echarts
      • Bento box
    • Features & Navigation
      • Tabs
      • History navigation & Breadcrumb
  • 🔍Advanced usage
    • CLI
    • Workflow Triggers
    • Code Generation
  • 🌍Cloud & Community
    • Shimoku Cloud
    • Shared links
    • Handling Workspaces & Users
      • User authentication
      • Inviting users
      • Creating users
      • Users with multi-workspace access
  • 🌐Releases
    • 2024
      • v.2.6
      • v.2.5
      • v.2.4
      • v.2.3
        • v.2.3.1
      • v.2.2
        • v.2.2.3
        • v.2.2.2
        • v.2.2.1
      • v.2.1
        • v.2.1.2
        • v.2.1.1
      • v.2.0
        • v.2.0.(1..4)
      • v.1.6
        • v.1.6.1
      • v.1.5
    • 2023
      • v.1.4
        • v.1.4.1
        • v.1.4.2
      • v.1.3
      • v.1.2
        • v.1.2.1
      • v.1.1
        • v.1.1.1
      • v.1.0
        • v.1.0.2
        • v.1.0.1
      • v.0.20
      • v.0.19
      • v.0.18
      • v.0.17
        • v.0.17.1
      • v.0.16
        • v.0.16.3
        • v.0.16.2
        • v.0.16.1
      • v.0.15
      • v.0.14
    • 2022
      • v.0.13
        • v.0.13.3
      • v.0.12
      • v.0.11
      • v.0.10
        • v.0.10.4
        • v.0.10.3
        • v.0.10.1
      • v.0.9
      • v.0.8
      • v.0.7
        • v.0.7.1
      • v.0.6
      • v.0.5
      • v.0.4
      • v.0.3
        • v0.3.2
        • v0.3.1
      • v.0.2
Powered by GitBook
On this page
  • The Method To Use
  • Examples
  • Variants

Was this helpful?

  1. Elements
  2. Charts
  3. Line Charts

Segmented Line

This type of chart provides a detailed visualization of data points categorized by varying segments on the y-axis. Each segment is delineated by a unique color, making it straightforward to distinguish between different data ranges or categories within the continuous line. The segmented line chart is especially beneficial when aiming to emphasize specific ranges or values in your data on the y-axis, facilitating rapid analysis of trends within those segments.

The Method To Use

The method is s.plt.segmented_line().

It must contain the following input variables:

order: int, 
x: str, 
y: Union[str, List[str]],
data: Optional[Union[str, DataFrame, List[Dict]]],

Accepts the following input variables as optional:

x_axis_name: Optional[str] = None, 
y_axis_name: Optional[str] = None,
rows_size: Optional[int] = None, 
cols_size: Optional[int] = None,
padding: Optional[List[int]] = None, 
title: Optional[str] = None,
marking_lines: Optional[List[int]] = None, # marks to separate the segments in y axis
range_colors: Optional[List[str]] = None,  # colors for each axis
option_modifications: Optional[Dict] = None,
variant: Optional[str] = None

Examples

Both examples use this data set:

beiging_aqi_len = 100
beiging_aqi = requests.get(
    url='https://echarts.apache.org/examples/'
        'data/asset/data/aqi-beijing.json').json()[-beiging_aqi_len:]
df = pd.DataFrame([
    {
        'date': beiging_aqi[i][0],
        'y': beiging_aqi[i][1],
        'y_displaced': beiging_aqi[(i + 10) % beiging_aqi_len][1],
        'y_multiplied': beiging_aqi[i][1] * 2,
    } for i in range(beiging_aqi_len)
])

The first example shows how to use the parameters marking_lines and range_colors:

s.plt.segmented_line(
    data=df, order=0, 
    x='date', y='y', 
    title="Beijing's Air Quality Index",
    marking_lines=[0, 50, 100, 150, 200, 300], 
    range_colors=['green', 'yellow', 'orange', 'red', 'purple', 'maroon'],
    x_axis_name='Date', y_axis_name='AQI'
)

The second example shows how the segments behave with multiple series, and the default configuration of colors:

s.plt.segmented_line(
    data=df, order=0,
    x='date', y=['y', 'y_displaced', 'y_multiplied'],
    marking_lines=[0, 100, 200, 300, 450, 700]
)

Variants

By setting the parameter variant to the following values the appearance of the chart can be changed:

PreviousPredictive LineNextMarked Line

Last updated 1 year ago

Was this helpful?

💡
AQI Beijing, gotten from the echarts example
variant="clean"
variant="minimal"