...
We have created the below dynamic chart that is an example of what can be done. If you are a developer or have developers, you can use this and do other things with it or improve on it. It has predefined filters, custom day range, date picker, and export. AmChart has their own export feature, but in the current version we don't have all the exact files needed for that to function, so we used an export function found online to use with it.
...
| Code Block | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
var myChart = query('myChart');
var fooAll = queryAll('bar');
var myButton = this;
fooAll.forEach(function(item){
if (myButton.id == item.id) {myButton.classNames = "view-default focus";}
else {item.classNames = "view-default";
}});
var myQuery;
if(this.fooApply != undefined){
var butnStart = query('fooStart');
var butnEnd = query('fooEnd');
myQuery = sprintf('readAll(foo).hisRead($1..$2).hisRollup(avg,1hr)',butnStart.range,butnEnd.range);
} else myQuery = sprintf('readAll(foo).hisRead($1).hisRollup(avg,1hr)',this.range);
myChart.hquery = myQuery;
var promise = finstack.eval(myQuery, function(event){
var fin = event.result.toObj();
var maxnum=0;
fin.forEach(function(itm){
itm = Object.keys(itm);
itm = itm.filter(function(imt){ return !imt.includes("Unit") });(imt){ return !imt.includes("Unit") });
itm = itm.length - 1;
if(itm > maxnum) maxnum = itm;
});
//this for loop is new, it fixes a bug that some customers have
for(var i=0; i<maxnum; i++){ //find real maxnum
if(event.result.columns[i+1] == undefined){
itmmaxnum = itm.length - 1;Math.max(0,i-1);
break;
if(itm > maxnum) maxnum = itm;}
});
var names = [];
for(var i=0; i<maxnum; i++) names.push([event.result.columns[i+1].name, event.result.columns[i+1].metadata.dis]);
names.sort(function(a,b){
if(a[1] < b[1]) return -1;
if(a[1] > b[1]) return 1;
return 0;
});
var grphs = [];
for(var i=0; i<maxnum; i++){
grphs.push({
"id": "g"+i,
"fillAlphas": 0.4,
"lineAlpha": 0,
"fillColors": ["#ff0000","#00ff00","#0000ff","#d000ff","#ffffa00"][i],
"valueField": names[i][0],
"title": names[i][1],
"balloonText": "<div style='margin:5px; font-size:19px;'><b>[[value]]</b></div>",
});
}
var chart = AmCharts.makeChart(myChart.view, {
"type": "serial",
"theme": "light",
"marginRight": 80,
"dataProvider": fin,
"numberFormatter": {precision: 1, decimalSeparator:'.', thousandsSeparator:''},
"graphs": grphs,
"legend": {
// "labelWidth":50,
// "valueWidth":0,
// "useGraphSettings": false,
// "backgroundColor":"#FF0000",
// "color":"#FF0000",
"labelText":"[[title]]"
},
"chartScrollbar": {
"graph": "g0",
"scrollbarHeight": 25,
"backgroundAlpha": 0,
"selectedBackgroundAlpha": 0.1,
"selectedBackgroundColor": "#888888",
"graphFillAlpha": 0,
"graphLineAlpha": 0.5,
"selectedGraphFillAlpha": 0,
"selectedGraphLineAlpha": 1,
"autoGridCount": true,
"color": "#AAAAAA"
},
"chartCursor": {
"categoryBalloonDateFormat": "JJ:NN, DD MMMM",
"cursorPosition": "mouse"
},
"categoryField": "ts",
"categoryAxis": {
"minPeriod": "mm",
"parseDates": true
},
"export": {
"enabled": true,
"dateFormat": "YYYY-MM-DD HH:NN:SS"
}
});
}); |
Range Buttons (Program)
This program is for the calendar component. It returns the correct date format needed for the hisRead axon query. It runs on "fooRange", which is a tag on the calendar icon labels. The variable is "this" on click. The icons also have "fooStart" and "fooEnd" respectively and string propery tag called range as null. The apply button also has bar and fooApply tags.
...
| Code Block | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||
var hquery = query('myChart').hquery;
function download(filename, text) {
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
if(hquery !== undefined) finstack.eval(hquery+'.ioWriteCsv("")',function(event){
event = event.result.toObj()[0].val;
download("ChartData.csv",event);
}); |
Date Picker (Event onClick)
Below is the code for the date picker icon. Select the label icon and right click on it to Create Event > Mouse > Mouse Click. Paste the code below. A tag to add on the icon is string property tag called "range" with value null.
...