So, I have a page I use to monitor a bunch of network elements. I have 16 individual graphs on one page, with 5 min data points.
I have a while loop that builds the javascript like this.
$script .= '<!-- Chart code -->
am4core.ready(function() {
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
// Create chart instance
var chart = am4core.create("'.$agcname.'", am4charts.XYChart);
// Add data
chart.data = ['.rtrim($oosdata,',').'];
// Set input format for the dates
chart.dateFormatter.inputDateFormat = "yyyy-MM-dd HH:mm";
// Create axes
var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
var avgAxis = chart.yAxes.push(new am4charts.ValueAxis());
// Create series
var series = chart.series.push(new am4charts.LineSeries());
series.dataFields.valueY = "oosmta";
series.dataFields.dateX = "date";
series.tooltipText = "{value}"
series.strokeWidth = 2;
series.minBulletDistance = 1;
// Create series
var average = chart.series.push(new am4charts.LineSeries());
average.dataFields.valueY = "avg";
average.dataFields.dateX = "date";
average.tooltipText = "{value}"
average.strokeWidth = 1;
average.stroke = am4core.color("DEFDEF");
average.minBulletDistance = 20;
}); // end am4core.ready() // end am4core.ready()
';
A sample of data on one graph.
// Add data
chart.data = [{
"date": "2019-08-13 04:20",
"oosmta": 5871,
"avg": 5966
}, {
"date": "2019-08-13 04:25",
"oosmta": 5876,
"avg": 5966
}, {
"date": "2019-08-13 04:30",
"oosmta": 5885,
"avg": 5966
}, {
"date": "2019-08-13 04:35",
"oosmta": 5872,
"avg": 5966
}, {
"date": "2019-08-13 04:40",
"oosmta": 5870,
"avg": 5966
}];
I display 6 hours worth of data per graph. I'd imagine there has to be a better, more efficient way to achieve this?
