Line chart

Visualize time series data in Ubidots in the form of Line charts

The Line chart widget has multiple options to display and customize data visualization as required by each individual application. Color, time span, aggregation method, among others, are the options available within this widget.

For a preliminary understanding of the widget, please visit this article, which covers the basics about setting up a Line chart widget.

In this section, only advanced features of the Line chart widget will be covered.

ECharts configuration

This option is only available for Enterprise users

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

In this case, the Line chart widget sits on top of ECharts library, given users the ability to customize the widget by accessing all features provided by the library through the option "ECharts configuration" found in the APPEARANCE tab:

After clicking the option, a big drawer appears from the left exposing the ECharts options JSON that not only maps all fields available from the UI, but also provides an editing environment where users can take full advantage of the Line and Bar series type.

All fields expose through the UI are mapped bidirectionally. This means that if you make a change from the UI, it will be reflected in the EChart options JSON, and viceversa.

Examples

The below examples use the ECharts configuration option to get the results shown. Without this advanced option, getting the same visualization isn't possible by only using the UI available fields.

Area boundaries

This examples creates colored areas in the widget that work as boundaries to visually see if the data is within expected ranges. Red means alarm, whereas green and orange means safe and warning values, respectively.

This is the ECharts JSON, based on one variable. You'll need to adjust the "series[0].markArea.data" information 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 showcases a line chart where the color of the line changes dynamically based on the value of the data points.

You can set the color ranges (color and data threshold) by modifying each of the pieces within 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 showcases a line chart similar to the previous one that allows mapping the Y-axis value to a color, however this one also provides color to 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
    }
}