Table of Contents |
---|
Description: This is an AM|Chart that shows the history of points. It can support up to 8 points, and gets the data from a dataQuery tag which is added to the group and defines the query in the value. The points can be toggled on and off, and will show balloons when moused over the chart.
Download: historyChartBox.zip
...
Code Block | ||||
---|---|---|---|---|
| ||||
finstack.eval(this.dataQuery, function(event){
var cols = [];
event.result.columns.forEach(function(itm){
var t = /v\d+/.exec(itm.name);
if(t !== null && t[0] == t.input){
console.log("metadata", itm.metadata);
if(itm.metadata) cols.push({dis: itm.metadata.idDis || itm.metadata.dis || itm.metadata.id, col: itm.name, unit: itm.metadata.unit || null, equipRefDis: itm.metadata.equipRefDis});
else cols.push({dis: itm.name, col: itm.name});
}
});
console.log("cols",cols);
var grphs = [];
var cou = 0;
cols.forEach(function(itm){
grphs.push({
"id": "g"+cou,
"balloonText": ""+itm.equipRefDis+": [["+itm.col+"]] "+itm.unit+"",
"lineThickness": 2,
"title": itm.dis,
"unit" : itm.unit,
"valueField": itm.col,
"fillAlphas": 0.2 //Area
});
cou++;
});
console.log("grphs",grphs);
var myData = event.result.toObj();
console.log("myData", myData);
var chartData =[];
var myData2 = [];
myData.forEach(function(itm){
myData2.push({
"ts": itm.ts,
"tsOffset": itm.tsOffset,
"tsTimezone": itm.tsTimezone,
"v0": itm.v0 || 0,
"v1": itm.v1 || 0,
"v2": itm.v2 || 0,
"v3": itm.v3 || 0,
"v4": itm.v4 || 0,
"v5": itm.v5 || 0,
"v6": itm.v6 || 0,
"v7": itm.v7 || 0
});
});
myData2.forEach(function(itm){
chartData.push({
"ts": itm.ts,
"tsOffset": itm.tsOffset,
"tsTimezone": itm.tsTimezone,
"v0": itm.v0.toFixed(1) || null,
"v1": itm.v1.toFixed(1) || null,
"v2": itm.v2.toFixed(1) || null,
"v3": itm.v3.toFixed(1) || null,
"v4": itm.v4.toFixed(1) || null,
"v5": itm.v5.toFixed(1) || null,
"v6": itm.v6.toFixed(1) || null,
"v7": itm.v7.toFixed(1) || null
});
});
console.log("chartData", chartData);
var chart = AmCharts.makeChart(Chart.view, {
"type": "serial",
"theme": "light",
"marginRight": 80,
"dataProvider": chartData,
"valueAxes": [{
"axisAlpha": 0.1
}],
"graphs": grphs,
"zoomOutButtonRollOverAlpha": 0.15,
"chartCursor": {
"categoryBalloonDateFormat": "MMMM D L:NN A",
"cursorPosition": "mouse",
"showNextAvailable": true
},
"legend": {
"equalWidths": false,
"periodValueText": "total: [[value.sum]]",
"position": "top",
"valueAlign": "left",
"valueWidth": 100
},
"valueScrollbar":{
"oppositeAxis":false,
"offset":50,
"scrollbarHeight":10
},
"autoMarginOffset": 5,
"columnWidth": 1,
"categoryField": "ts",
"categoryAxis": {
"parseDates": true,
"minPeriod": "mm",
"dateFormats":[
{
"period":"fff",
"format":"L:NN:SS A"
},
{
"period":"ss",
"format":"L:NN:SS A"
},
{
"period":"mm",
"format":"L:NN A"
},
{
"period":"hh",
"format":"L:NN A"
},
{
"period":"DD",
"format":"MMM DD"
},
{
"period":"WW",
"format":"MMM DD"
},
{
"period":"MM",
"format":"MMM"
},
{
"period":"YYYY",
"format":"YYYY"
}]
},
"export": {
"enabled": true
}
});
console.log(chart);
chart.addListener("rendered", zoomChart);
zoomChart();
function zoomChart() {
chart.zoomToIndexes(chart.dataProvider.length - 40, chart.dataProvider.length - 1);
}
}); |
...