Line Chart

Visualize time series data in Ubidots with the Line Chart widget

The Line Chart widget includes several options to display and customize data visualizations in your application. Color, time span, and aggregation method are some of the options available in this widget.

For a basic overview of the widget, visit this article, which covers the basics of setting up a Line Chart widget.

This section covers only the advanced features of the Line Chart widget.

ECharts configuration

This option is only available to Enterprise users.

ECharts is a powerful open-source visualization library designed to create interactive and customizable charts. ECharts provides extensive customization options that let you tailor the appearance and behavior of charts to fit specific requirements. With it, you can add new layers of customization to your widgets, simplify monitoring, and better support your users' needs.

The Line Chart widget is built on top of the ECharts library. This gives users access to all features provided by the library through the ECharts configuration option in the APPEARANCE tab:

After you click the option, a large drawer opens from the left and shows the ECharts options JSON. It maps all fields available in the UI and also provides an editing environment where users can take full advantage of the Line and Bar series types.

All fields exposed through the UI are mapped bidirectionally. This means that if you make a change in the UI, it is reflected in the ECharts options JSON, and vice versa.

Valid placeholders

The following are valid placeholders that you can use at the device or variable level.

Device

Access via device.<placeholder>

id
name
label
description
context
context.<context_key>
context._icon
context._color
context._config
context._config.<context_key>
context._config.<context_key>.key
context._config.<context_key>.text
context._config.<context_key>.type
context._config.<context_key>.value
context._device_type
context._location_type
context._device_type_id
context._location_fixed
context._location_fixed.lat
context._location_fixed.lng
icon
color

Variable

Access via variable.<placeholder>

id
name
label
description
unit
icon
color

Examples

The examples below use the ECharts configuration option to produce the results shown. Without this advanced option, you cannot get the same visualization using only the fields available in the UI.

Area boundaries

This example creates colored areas in the widget that act as boundaries, making it easier to see whether the data is within expected ranges. Red indicates an alarm, while green and orange indicate safe and warning values, respectively.

This is the ECharts JSON for a single variable. You need to adjust the series[0].markArea.data values so the limits reflect your specific needs and data behavior:

JSON example

{
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5e5e5e"
                    ],
                    "opacity": 0.1
                }
            },
            "min": 5,
            "max": 30,
            "name": "",
            "nameLocation": "center",
            "nameGap": 70,
            "nameTextStyle": {
                "color": "#5E5E5E"
            },
            "position": "left",
            "show": true,
            "offset": 0,
            "gridIndex": 0
        }
    ],
    "series": [
        {
            "z": 0,
            "name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
            "step": false,
            "type": "line",
            "stack": null,
            "symbol": null,
            "smooth": true,
            "markArea": {
                "data": [
                    [
                        {
                            "label": {
                                "show": true,
                                "color": "red",
                                "position": "insideLeft",
                                "formatter": "Alarm"
                            },
                            "yAxis": 25,
                            "itemStyle": {
                                "color": "rgba(255, 173, 177, 0.4)"
                            }
                        },
                        {
                            "yAxis": 99
                        }
                    ],
                    [
                        {
                            "yAxis": 24,
                            "itemStyle": {
                                "color": "rgba(252, 158, 7, 0.4)"
                            }
                        },
                        {
                            "yAxis": 25
                        }
                    ],
                    [
                        {
                            "label": {
                                "show": true,
                                "color": "green",
                                "position": "insideLeft",
                                "formatter": "Normal"
                            },
                            "yAxis": 15,
                            "itemStyle": {
                                "color": "rgba(204, 255, 153, 0.4)"
                            }
                        },
                        {
                            "yAxis": 24
                        }
                    ],
                    [
                        {
                            "yAxis": 14,
                            "itemStyle": {
                                "color": "rgba(252, 158, 7, 0.4)"
                            }
                        },
                        {
                            "yAxis": 15
                        }
                    ],
                    [
                        {
                            "label": {
                                "show": true,
                                "color": "red",
                                "position": "insideLeft",
                                "formatter": "Alarm"
                            },
                            "yAxis": 14,
                            "itemStyle": {
                                "color": "rgba(255, 173, 177, 0.4)"
                            }
                        },
                        {
                            "yAxis": -99
                        }
                    ]
                ],
                "itemStyle": {
                    "color": "rgba(255, 173, 177, 0.4)"
                }
            },
            "markLine": {},
            "animation": false,
            "itemStyle": {
                "color": "#465676",
                "opacity": 0.8,
                "borderColor": "#465676"
            },
            "lineStyle": {
                "color": "#465676",
                "width": 2
            },
            "showSymbol": false,
            "symbolSize": 8,
            "yAxisIndex": 0,
            "connectNulls": true
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "name": "",
            "nameLocation": "center",
            "nameGap": 28,
            "nameTextStyle": {
                "color": "#A4A5A7"
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5E5E5E"
                    ],
                    "opacity": 0.1
                }
            },
            "axisTick": null,
            "z": 2
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "filterMode": "none",
            "xAxisIndex": 0,
            "realtime": false,
            "textStyle": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "dataBackground": {
                "areaStyle": {
                    "color": "#5E5E5E"
                }
            },
            "right": 45,
            "left": 45
        }
    ],
    "legend": {
        "itemHeight": 7,
        "itemWidth": 15,
        "pageIconColor": "#5E5E5E",
        "pageIconInactiveColor": "#5E5E5E",
        "pageTextStyle": {
            "color": "#5E5E5E"
        },
        "textStyle": {
            "color": "#5E5E5E"
        },
        "top": 0,
        "type": "scroll",
        "show": true
    },
    "grid": {
        "bottom": 60,
        "containLabel": true,
        "left": 60,
        "right": 60,
        "top": 10
    },
    "tooltip": {
        "confine": true,
        "trigger": "axis"
    }
}

Color-Coded Line Chart

This example shows a line chart where the line color changes dynamically based on the value of the data points.

You can set the color ranges by modifying each of the pieces within the visualMap element in the following ECharts JSON:

Color-Coded Line Chart ECharts JSON

{
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5e5e5e"
                    ],
                    "opacity": 0.1
                }
            },
            "min": "dataMin",
            "max": "dataMax",
            "name": "Humidity",
            "nameLocation": "center",
            "nameGap": 70,
            "nameTextStyle": {
                "color": "#5E5E5E"
            },
            "position": "left",
            "show": true,
            "offset": 0,
            "gridIndex": 0
        }
    ],
    "series": [
        {
            "z": 0,
            "name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
            "step": false,
            "type": "line",
            "stack": null,
            "symbol": null,
            "markLine": {},
            "animation": false,
            "itemStyle": {
                "color": "{{variable.color}}",
                "opacity": 0.8,
                "borderColor": "{{variable.color}}"
            },
            "showSymbol": false,
            "symbolSize": 8,
            "yAxisIndex": 0,
            "connectNulls": true
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "name": "Time",
            "nameLocation": "center",
            "nameGap": 28,
            "nameTextStyle": {
                "color": "#A4A5A7"
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5E5E5E"
                    ],
                    "opacity": 0.1
                }
            },
            "axisTick": null,
            "z": 2
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "filterMode": "none",
            "xAxisIndex": 0,
            "realtime": false,
            "textStyle": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "dataBackground": {
                "areaStyle": {
                    "color": "#5E5E5E"
                }
            },
            "right": 45,
            "left": 45
        }
    ],
    "legend": {
        "itemHeight": 7,
        "itemWidth": 15,
        "pageIconColor": "#5E5E5E",
        "pageIconInactiveColor": "#5E5E5E",
        "pageTextStyle": {
            "color": "#5E5E5E"
        },
        "textStyle": {
            "color": "#5E5E5E"
        },
        "top": 0,
        "type": "scroll",
        "show": false
    },
    "grid": {
        "bottom": 60,
        "containLabel": true,
        "left": 60,
        "right": 60,
        "top": 10
    },
    "tooltip": {
        "confine": true,
        "trigger": "axis"
    },
    "visualMap": {
        "show": false,
        "top": 50,
        "right": 10,
        "pieces": [
            {
                "gt": 0,
                "lte": 5,
                "color": "#93CE07"
            },
            {
                "gt": 5,
                "lte": 10,
                "color": "#FBDB0F"
            },
            {
                "gt": 10,
                "lte": 15,
                "color": "#FC7D02"
            },
            {
                "gt": 15,
                "lte": 20,
                "color": "#FD0100"
            },
            {
                "gt": 20,
                "lte": 25,
                "color": "#AA069F"
            },
            {
                "gt": 25,
                "color": "#AC3B2A"
            }
        ],
        "outOfRange": {
            "color": "#999"
        }
    }
}

Color-Coded Area Line Chart

This example shows a line chart similar to the previous one. It maps the Y-axis value to a color and also colors the area under the chart:

Below is the configuration for this line chart. You can customize the colors and ranges for each of the pieces within the visualMap as needed:

Color-Coded Area Line Chart JSON

{
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5e5e5e"
                    ],
                    "opacity": 0.1
                }
            },
            "min": "dataMin",
            "max": "dataMax",
            "name": "Default Y-axis",
            "nameLocation": "center",
            "nameGap": 70,
            "nameTextStyle": {
                "color": "#5E5E5E"
            },
            "position": "left",
            "show": true,
            "offset": 0,
            "gridIndex": 0,
            "lineStyle": {
                "color": "#5470C6",
                "width": 3
            }
        }
    ],
    "series": [
        {
            "z": 0,
            "name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
            "step": false,
            "type": "line",
            "stack": null,
            "symbol": null,
            "markLine": {},
            "animation": false,
            "areaStyle": {},
            "itemStyle": {
                "color": "{{variable.color}}",
                "opacity": 0.8,
                "borderColor": "{{variable.color}}"
            },
            "lineStyle": {
                "width": 2
            },
            "showSymbol": false,
            "symbolSize": 8,
            "yAxisIndex": 0,
            "connectNulls": true
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "name": "",
            "nameLocation": "center",
            "nameGap": 28,
            "nameTextStyle": {
                "color": "#A4A5A7"
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5E5E5E"
                    ],
                    "opacity": 0.1
                }
            },
            "axisTick": null,
            "z": 2
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "filterMode": "none",
            "xAxisIndex": 0,
            "realtime": false,
            "textStyle": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "dataBackground": {
                "areaStyle": {
                    "color": "#5E5E5E"
                }
            },
            "right": 45,
            "left": 45
        }
    ],
    "legend": {
        "itemHeight": 7,
        "itemWidth": 15,
        "pageIconColor": "#5E5E5E",
        "pageIconInactiveColor": "#5E5E5E",
        "pageTextStyle": {
            "color": "#5E5E5E"
        },
        "textStyle": {
            "color": "#5E5E5E"
        },
        "top": 0,
        "type": "scroll",
        "show": false
    },
    "grid": {
        "bottom": 60,
        "containLabel": true,
        "left": 60,
        "right": 60,
        "top": 10
    },
    "tooltip": {
        "confine": true,
        "trigger": "axis"
    },
    "visualMap": {
        "show": false,
        "type": "piecewise",
        "pieces": [
            {
                "gt": 0,
                "lt": 18,
                "color": "#1e13e8 "
            },
            {
                "gt": 18,
                "lt": 22,
                "color": "#e8dd13"
            },
            {
                "gt": 22,
                "lt": 26,
                "color": "#e85a13"
            },
            {
                "gt": 26,
                "lt": 28,
                "color": "#ed2005"
            },
            {
                "gt": 28,
                "color": "#ed2005"
            }
        ],
        "dimension": 1,
        "seriesIndex": 0
    }
}

Animations

Initial load animation

Set the initial load animation by adding the following attributes to the series:

"animationDelay": <animation-duration-in-milliseconds>,
"animationEasing": "linear | cubicIn | cubicOut | cubicInOut | quadraticIn | quadraticOut | quadraticInOut | quarticIn | quarticOut | quarticInOut | sinusoidalIn | sinusoidalOut | sinusoidalInOut | exponentialIn | exponentialOut | exponentialInOut | bounceIn | bounceOut | bounceInOut | elasticIn | elasticOut | elasticInOut"
"animationDuration": <animation-delay-in-milliseconds>,

Initial Load Animation Line Chart JSON

{
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5e5e5e"
                    ],
                    "opacity": 0.1
                }
            },
            "min": "dataMin",
            "max": "dataMax",
            "name": "Default Y-axis",
            "nameLocation": "center",
            "nameGap": 70,
            "nameTextStyle": {
                "color": "#5E5E5E"
            },
            "position": "left",
            "show": true,
            "offset": 0,
            "gridIndex": 0
        }
    ],
    "series": [
        {
            "z": 0,
            "name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
            "type": "line",
            "markLine": {
                "data": [
                    {
                        "name": "Avg",
                        "type": "average"
                    }
                ],
                "symbol": "none"
            },
            "animation": true,
            "itemStyle": {
                "color": "{{variable.color}}",
                "opacity": 0.8,
                "borderColor": "{{variable.color}}"
            },
            "lineStyle": {
                "color": "{{variable.color}}",
                "width": 2
            },
            "showSymbol": false,
            "symbolSize": 8,
            "yAxisIndex": 0,
            "connectNulls": true,
            "animationDelay": 300,
            "animationEasing": "easingName",
            "animationDuration": 3000
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "name": "",
            "nameLocation": "center",
            "nameGap": 28,
            "nameTextStyle": {
                "color": "#A4A5A7"
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5E5E5E"
                    ],
                    "opacity": 0.1
                }
            },
            "axisTick": null,
            "z": 2
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "filterMode": "none",
            "xAxisIndex": 0,
            "realtime": true,
            "textStyle": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "dataBackground": {
                "areaStyle": {
                    "color": "#5E5E5E"
                }
            },
            "right": 45,
            "left": 45
        }
    ],
    "legend": {
        "itemHeight": 7,
        "itemWidth": 15,
        "pageIconColor": "#5E5E5E",
        "pageIconInactiveColor": "#5E5E5E",
        "pageTextStyle": {
            "color": "#5E5E5E"
        },
        "textStyle": {
            "color": "#5E5E5E"
        },
        "top": 0,
        "type": "scroll",
        "show": true
    },
    "grid": {
        "bottom": 60,
        "containLabel": true,
        "left": 60,
        "right": 60,
        "top": 10
    },
    "tooltip": {
        "confine": true,
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow"
        }
    }
}

Data update animation

Set the animation shown when the data series updates by setting the following attributes:

"animationDelayUpdate":  <animation-duration-in-milliseconds>,
"animationEasingUpdate": "linear | cubicIn | cubicOut | cubicInOut | quadraticIn | quadraticOut | quadraticInOut | quarticIn | quarticOut | quarticInOut | sinusoidalIn | sinusoidalOut | sinusoidalInOut | exponentialIn | exponentialOut | exponentialInOut | bounceIn | bounceOut | bounceInOut | elasticIn | elasticOut | elasticInOut",
"animationDurationUpdate":  <animation-delay-in-milliseconds>,

Data Update Line Chart JSON

{
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5e5e5e"
                    ],
                    "opacity": 0.1
                }
            },
            "min": "dataMin",
            "max": "dataMax",
            "name": "Default Y-axis",
            "nameLocation": "center",
            "nameGap": 70,
            "nameTextStyle": {
                "color": "#5E5E5E"
            },
            "position": "left",
            "show": true,
            "offset": 0,
            "gridIndex": 0
        }
    ],
    "series": [
        {
            "z": 0,
            "name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
            "type": "line",
            "markLine": {
                "data": [
                    {
                        "name": "Avg",
                        "type": "average"
                    }
                ],
                "symbol": "none"
            },
            "animation": true,
            "itemStyle": {
                "color": "{{variable.color}}",
                "opacity": 0.8,
                "borderColor": "{{variable.color}}"
            },
            "lineStyle": {
                "color": "{{variable.color}}",
                "width": 2
            },
            "showSymbol": false,
            "symbolSize": 8,
            "yAxisIndex": 0,
            "connectNulls": true,
            "animationDelay": 300,
            "animationEasing": "easingName",
            "animationDuration": 3000,
            "animationDelayUpdate": 0,
            "animationEasingUpdate": "easingName",
            "animationDurationUpdate": 2000
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "name": "",
            "nameLocation": "center",
            "nameGap": 28,
            "nameTextStyle": {
                "color": "#A4A5A7"
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5E5E5E"
                    ],
                    "opacity": 0.1
                }
            },
            "axisTick": null,
            "z": 2
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "filterMode": "none",
            "xAxisIndex": 0,
            "realtime": true,
            "textStyle": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "dataBackground": {
                "areaStyle": {
                    "color": "#5E5E5E"
                }
            },
            "right": 45,
            "left": 45
        }
    ],
    "legend": {
        "itemHeight": 7,
        "itemWidth": 15,
        "pageIconColor": "#5E5E5E",
        "pageIconInactiveColor": "#5E5E5E",
        "pageTextStyle": {
            "color": "#5E5E5E"
        },
        "textStyle": {
            "color": "#5E5E5E"
        },
        "top": 0,
        "type": "scroll",
        "show": true
    },
    "grid": {
        "bottom": 60,
        "containLabel": true,
        "left": 60,
        "right": 60,
        "top": 10
    },
    "tooltip": {
        "confine": true,
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow"
        }
    }
}

Data point custom icon

Set the following attributes in the data series:

"showSymbol": true,
"symbol": "image://<your-icon-cdn-url>",
"symbolSize": <desired-size>,

Data Point Custom Icon JSON

{
    "yAxis": [
        {
            "type": "value",
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5e5e5e"
                    ],
                    "opacity": 0.1
                }
            },
            "min": "dataMin",
            "max": "dataMax",
            "name": "Default Y-axis",
            "nameLocation": "center",
            "nameGap": 70,
            "nameTextStyle": {
                "color": "#5E5E5E"
            },
            "position": "left",
            "show": true,
            "offset": 0,
            "gridIndex": 0
        }
    ],
    "series": [
        {
            "z": 0,
            "name": "{{variable.name}} [{{variable.unit}}] ({{device.name}})",
            "type": "line",
            "symbol": "image://https://cdn-icons-png.flaticon.com/512/4201/4201973.png",
            "markLine": {
                "data": [
                    {
                        "name": "Avg",
                        "type": "average"
                    }
                ],
                "symbol": "none"
            },
            "animation": true,
            "itemStyle": {
                "color": "{{variable.color}}",
                "opacity": 0.8,
                "borderColor": "{{variable.color}}"
            },
            "lineStyle": {
                "color": "{{variable.color}}",
                "width": 2
            },
            "showSymbol": true,
            "symbolSize": 20,
            "yAxisIndex": 0,
            "connectNulls": true
        }
    ],
    "xAxis": [
        {
            "type": "time",
            "name": "",
            "nameLocation": "center",
            "nameGap": 28,
            "nameTextStyle": {
                "color": "#A4A5A7"
            },
            "axisLabel": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "axisLine": {
                "lineStyle": {
                    "color": "#5e5e5e40"
                }
            },
            "splitLine": {
                "lineStyle": {
                    "color": [
                        "#5E5E5E"
                    ],
                    "opacity": 0.1
                }
            },
            "axisTick": null,
            "z": 2
        }
    ],
    "dataZoom": [
        {
            "show": true,
            "filterMode": "none",
            "xAxisIndex": 0,
            "realtime": true,
            "textStyle": {
                "color": "#5E5E5E",
                "fontSize": 11
            },
            "dataBackground": {
                "areaStyle": {
                    "color": "#5E5E5E"
                }
            },
            "right": 45,
            "left": 45
        }
    ],
    "legend": {
        "itemHeight": 7,
        "itemWidth": 15,
        "pageIconColor": "#5E5E5E",
        "pageIconInactiveColor": "#5E5E5E",
        "pageTextStyle": {
            "color": "#5E5E5E"
        },
        "textStyle": {
            "color": "#5E5E5E"
        },
        "top": 0,
        "type": "scroll",
        "show": true
    },
    "grid": {
        "bottom": 60,
        "containLabel": true,
        "left": 60,
        "right": 60,
        "top": 10
    },
    "tooltip": {
        "confine": true,
        "trigger": "axis",
        "axisPointer": {
            "type": "shadow"
        }
    }
}