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

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,
            "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

FIN Framework

History Chart Box

Make Your Own