Loading
Enable More Than 2 Axes on Chart
The Multi Axis line chart supports more than 2 axis which can be enabled by adding data objects in the axis
array.
Shown below is a snippet on how an axis
object looks like
{
"seriesname": "Power [W]",
"data": [
{
"value": "6"
},
{
"value": "26"
},
{
"value": "16"
},
{
"value": "27"
},
{
"value": "28"
},
{
"value": "33"
}
]
}
The above snippet adds an axis by name Power to the multi-axis line chart when added to the data of the chart
Shown below is a multi axis line chart with the axis shown above added
The data structure of the chart is shown below
{
"chart": {
"caption": "Power Generator",
"xaxisname": "Time",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "00:00s"
},
{
"label": "00:04s"
},
{
"label": "00:08s"
},
{
"label": "00:12s"
},
{
"label": "00:16s"
},
{
"label": "00:20s"
}
]
}
],
"axis": [
{
"title": "Power",
"tickwidth": "10",
"divlineDashed": "1",
"dataset": [
{
"seriesname": "Power [W]",
"data": [
{
"value": "6"
},
{
"value": "26"
},
{
"value": "16"
},
{
"value": "27"
},
{
"value": "28"
},
{
"value": "33"
}
]
}
]
},
{
"title": "Temp.",
"numdivlines": "14",
"tickwidth": "10",
"divlineDashed": "1",
"dataset": [
{
"seriesname": "Temperature",
"data": [
{
"value": "296"
},
{
"value": "311"
},
{
"value": "336"
},
{
"value": "371"
},
{
"value": "389"
},
{
"value": "393"
}
]
}
]
},
{
"title": "Speed[RPM]",
"axisonleft": "0",
"numdivlines": "10",
"tickwidth": "10",
"divlineDashed": "1",
"dataset": [
{
"seriesname": "Speed",
"data": [
{
"value": "1"
},
{
"value": "11"
},
{
"value": "36"
},
{
"value": "49"
},
{
"value": "68"
},
{
"value": "88"
}
]
}
]
}
]
}
The y-axis in the above chart has been added for Power, Temperature and Speed.
The tickWidth
attribute specifies the distance between successive intervals on the axis line. The titlePos
attribute lets you display the axis title on the left or on the right of the axis line.
You can toggle data for an axis being displayed by clicking on the check box at the bottom of the axis.