Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Current »

 

Download: historyChartBox.zip

Make Your Own

     

  • Start by dragging out the AM|Charts component from the left side components menu
  • Resize the component to the desired size
  • Next, put the AM|Chart component into a group.  (This can easily be done by dragging another component on top, selecting both, right clicking, and create group.  Then you can delete the other component to leave just the AM|Chart component.)
  • Add a tag on the group.  This tag is important because it will be called in the program to access the component.

  • Next, add a program
  • This is done by going to the programs menu on the left side, and clicking the + icon at the bottom.
  • In the program editor name the program (this can be anything), for the Program Target Filter put the name of the tag applied to the group, and in the main section copy and paste the code below.
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);
    }
});

  • To add the data for the query, add a tag on the group called dataQuery
  • Set the value equal to what you would like the query to be
  • This is found under the properties menu with the Group selected under the advanced tab



  • No labels