How to create multiple y-axis time series chart - django

Question

I am trying to map multiple charts where x-axis (time) is fixed but y-axis can take multiple values like CPU%, RAM, IO-RATE and so on. If I try to build individual graphs things seems pretty easy but I have this weird requirement where I need to map everything on to same chart. I have been trying out things with chartjs library and I could see that Cartesian axes is capable of handling multiple axes. But the examples I find around Cartesian mostly have x-axis with some fixed label values. In my case it's time and I wonder how to do the same for time series. I also found this example for multiple time series but that doesn't seem to create multiple y-axis. What is required is something like this but I am having hard time trying to figure out how to achieve this.
I am using django for backend and I am open to try out any library out there that does this and can easily integrate with django. Currently I have been exploring things with chartjs.

Answer 1

First you need to define a unique xAxis and define it as a time cartesian axis.
xAxes: [{
type: 'time',
time: {
unit: 'minute',
tooltipFormat: 'HH:mm:ss'
}
}],
Then you define a linear cartesian yAxis for each dataset and make sure, the value of the yAxis.id matches the corresponding dataset.yAxisID. Use 'yAxis.position' to define whether the axis shall appear left or right of the chart.
Optionally you may also define the following Plugin Core API beforeLayout function that makes sure that an yAxis is also hidden when it's data set is hidden through a mouse click on a legend label.
plugins: [{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],
Please have a look at below runnable code snippet that illustrates how it can be done.
const now = new Date().getTime();
const timestamps = new Array(10).fill().map((v, i) => now - i * 60000).reverse();
new Chart('chart', {
type: 'line',
plugins: [{
beforeLayout: chart => chart.data.datasets.forEach((ds, i) => chart.config.options.scales.yAxes[i].display = !ds._meta[0].hidden)
}],
data: {
labels: timestamps,
datasets: [{
label: 'CPU',
yAxisID: 'yAxis-CPU',
data: [68, 70, 71, 72, 75, 75, 76, 77, 79, 76],
borderColor: 'red',
fill: false
},
{
label: 'RAM',
yAxisID: 'yAxis-RAM',
data: [22, 23, 23, 23, 22, 20, 22, 22, 23, 25],
borderColor: 'blue',
fill: false
},
{
label: 'IO-RATE',
yAxisID: 'yAxis-IO-RATE',
data: [0.5, 0.6, 0.7, 0.8, 0.8, 0.2, 0.1, 0.1, 0.2, 0.2],
borderColor: 'green',
fill: false
}
]
},
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
displayFormats: {
minute: 'HH:mm'
},
tooltipFormat: 'HH:mm:ss'
}
}],
yAxes: [{
id: 'yAxis-CPU',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'CPU %'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true
}
},
{
id: 'yAxis-RAM',
type: 'linear',
position: 'left',
scaleLabel: {
display: true,
labelString: 'RAM %'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true
}
},
{
id: 'yAxis-IO-RATE',
type: 'linear',
position: 'right',
scaleLabel: {
display: true,
labelString: 'IO-Rate %'
},
gridLines : {
display: false
},
ticks: {
beginAtZero: true
}
}
]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="chart" height="90"></canvas>