You can create powerful charts and display them in an active area. mySCADA uses the chart.js library to render your charts. You can find details about the library here: http://www.chartjs.org/
The details about how to use the library is beyond this manual. For detailed options, please consult chart.js official documentation found here: http://www.chartjs.org/docs/latest/
Create object to pass into myscada function. This object must have 2 parameters data and areaId. For how to construct data parameter, please consult online manual for chart.js library. When createChart function is called, myscada will automatically create canvas in the place of active area. Into this canvas is the chart rendered. So you pass only second parameter eg. data to the chart.
In Code:
var options={} options.data = … data for the chart options.areaId=1 // id of active area myscada.createChart(options);
Example: create a bar chart with 2 column data
1. First of all, we will create datasets for the chart. For details, please consult online manual
var data={ datasets: [{ label: ‘Data1’, data: [12600, 19402, 18820, 17413, 18820, 15430, 15660], backgroundColor: 'rgba(0,0,255,0.4)' }, { label: 'Data2', data: [11001, 18830, 19230, 17990, 19200, 18320, 14430], backgroundColor: 'rgba(0,255,0,0.4)' }] };
2. Now we will assign labels to our data
data.labels= ["M", "T", "W", "T", "F", "S", "S"];
3. Now we will assign data to the options object
var options={}; options.data={ type: 'bar', data: data, options: { responsive: true, maintainAspectRatio: false, scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } };
4. We need to specify to which active area render the chart.
options.areaId=1;
We can also specify additional parameters such as background Color:
options.backgroundColor = 'rgba(128,128,128,0.2)';
5. And finally, we will render the chart
myscada.createChart(options);