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's needs.
Note: Both the Line Chart and Gauge widgets support ECharts configuration. |
Requirements
Ubidots Enterprise plans.
A widget that supports ECharts configuration.
1. Difference between ECharts configuration and Custom style
Looking to be as customizable and flexible as possible, Ubidots offers multiple options to modify the way widgets work and look. Apart from each widget’s native configuration options, there are two tools that allow you to thoroughly customize your widgets: ECharts configuration and the more traditional Custom style.
The simplest way to understand the difference between these two options is to think of widgets as paintings. While Custom style allows you to modify the frame and the canvas, ECharts configuration lets you customize the painting itself. For example, would you like your widget to have smoother corners or a transparent background? Use Custom Style. Would you like to, on the other hand, have thicker lines or smaller reference numbers on your Line Chart? Then use ECharts configuration.
2. How to use ECharts configuration
To use the ECharts configuration, just follow these steps:
Create or edit a widget that supports the ECharts feature*.
Go to its appearance tab.
Locate the “EChart configuration” option and open the editor.
Customize the widget by modifying the options of the JSON. Check out the ECharts’ docs to get a better understanding of all the configurable options available.
Valid placeholders
The following are valid placeholders that you can use either 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
*Currently, only the following widgets support ECharts configuration:
Line Chart
Gauge
We’re working on adding this feature to more widgets.
** At this moment, adding functions directly in the JSON is not supported, despite ECharts' docs states it is possible for certain attributes. We plan to support this feature in the future.
3. Line Chart Examples
With the following JSON you can create a Line Chart like the one in the previous image. It’s an example that depicts how you can get thicker lines, bigger fonts, different tooltips, and modified split lines, among other things.
{
"yAxis":[
{
"type":"value",
"axisLine":{
"lineStyle":{
"color":"#000000"
}
},
"axisLabel":{
"color":"#000000",
"fontSize":15
},
"splitLine":{
"lineStyle":{
"color":[
"#000000"
],
"opacity":0.3
}
},
"min":"dataMin",
"max":"dataMax",
"name":"Default Y-axis",
"nameLocation":"center",
"nameGap":70,
"nameTextStyle":{
"color":"#000000"
},
"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":"emptyCircle",
"barWidth":40,
"markLine":{
"data":[
{
"name":"Average",
"type":"average",
"lineStyle":{
"color":"#f39c12",
"width":3
}
}
]
},
"animation":true,
"itemStyle":{
"color":"#33c9dc",
"opacity":0.8,
"borderColor":"#33c9dc"
},
"lineStyle":{
"color":"#33c9dc",
"width":4
},
"markPoint":{
"data":[
{
"name":"Max",
"type":"max",
"symbol":"pin"
},
{
"name":"Min",
"type":"min",
"symbol":"pin"
}
]
},
"showSymbol":true,
"symbolSize":8,
"yAxisIndex":0,
"barMaxWidth":40,
"connectNulls":true
}
],
"xAxis":[
{
"type":"time",
"name":"",
"nameLocation":"center",
"nameGap":28,
"nameTextStyle":{
"color":"#000000"
},
"axisLabel":{
"color":"#000000",
"fontSize":15
},
"axisLine":{
"lineStyle":{
"color":"#000000"
}
},
"splitLine":{
"lineStyle":{
"color":[
"#000000"
],
"opacity":0.3
}
},
"axisTick":null,
"z":2,
"show":false,
"minInterval":""
}
],
"dataZoom":[
{
"show":true,
"filterMode":"none",
"xAxisIndex":0,
"realtime":true,
"textStyle":{
"color":"#5E5E5E",
"fontSize":11
},
"dataBackground":{
"areaStyle":{
"color":"#33c9dc"
}
},
"right":45,
"left":45
}
],
"legend":{
"itemHeight":14,
"itemWidth":25,
"pageIconColor":"#5E5E5E",
"pageIconInactiveColor":"#5E5E5E",
"pageTextStyle":{
"color":"#5E5E5E"
},
"textStyle":{
"color":"#000000",
"fontSize":15
},
"top":0,
"type":"scroll",
"show":true,
"itemGap":10,
"padding":5
},
"grid":{
"bottom":60,
"containLabel":true,
"left":60,
"right":60,
"top":10
},
"tooltip":{
"confine":true,
"trigger":"axis",
"show":true,
"axisPointer":{
"type":"cross",
"label":{
"backgroundColor":"#6a7985"
}
},
"borderColor":"#000000",
"borderWidth":1,
"backgroundColor":"rgba(0,165,187,0.8)"
}
}
3.1. Detailed examples
4. Gauge Examples
With the following JSON you can customize the default Gauge widget's style:
{
"series": [
{
"type": "gauge",
"min": 0,
"max": 100,
"startAngle": 200,
"endAngle": -20,
"splitNumber": 10,
"radius": "95%",
"center": [
"50%",
"58%"
],
"axisLine": {
"lineStyle": {
"width": 12,
"color": [
[
1,
"#E9EDF2"
]
]
}
},
"progress": {
"show": false
},
"pointer": {
"show": true,
"width": 6,
"length": "55%",
"itemStyle": {
"color": "#5470C6"
}
},
"axisTick": {
"show": true,
"distance": -12,
"length": 6,
"splitNumber": 5,
"lineStyle": {
"color": "#8C8C8C",
"width": 1
}
},
"splitLine": {
"show": true,
"distance": -12,
"length": 12,
"lineStyle": {
"color": "#6B6B6B",
"width": 2
}
},
"axisLabel": {
"show": true,
"distance": 18,
"color": "#5A5A5A",
"fontSize": 10,
"formatter": "{value}"
},
"title": {
"show": true,
"offsetCenter": [
0,
"25%"
],
"color": "#6B6B6B",
"fontSize": 12
},
"detail": {
"show": true,
"offsetCenter": [
0,
"42%"
],
"valueAnimation": true,
"color": "#3C3C3C",
"fontSize": 28,
"fontWeight": "bold",
"formatter": "{value}"
}
}
]
}
4.1. Detailed examples
