Zoomable Value Axis

Owned by Sarah Padilla (Unlicensed)
Last updated: Dec 14, 2017
14 min read

Model: amZoom.zip

How To Create Your Own

  • Start off by dragging AM|Charts into the world, and resizing it to the desired size
  • Drag out another component nearby (in the example we are using a button)
  • Select the AM|Chart and the other component and right click, and create group
  • Delete the other component, so it is just the AM|Chart in the group

Program

setTimeout(function() {
var queryData;
finstack.eval(point.query, function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            ts      : p.ts
        });
    });
    setTimeout(function() {
    console.log(newPoints);
var chart = AmCharts.makeChart(Chart.view, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value": "v0",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
      "precision": 1,
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN ",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
  },
} );
} );
}, 200);
}, 200);

Adding the Query

Add string tag query (to group/model) with value set to the query


Using Ractive

Start by dragging an AM Chart into the workspace.  Next right click and select show/hide so that you will no longer be able to see it

 

Next drag out Ractive and properties menu with Ractive selected,  click Open Editor

In the Ractive Editor copy and paste these lines of code below into the template section and init section and hit save

Template

<div id="zoomableValueAxis" style="width:100%; height:100%;"></div>

Init

this.ractive.fire("obtainData");

Next were going to add the program shown above.  

  • Start by going to Programs in the left menu and clicking the + icon.  
  • Under Program Name, name the program
  • Under Program Target Filter type in stackRactive
  • Click the three dots in the top right corner and select variables
  • Click on the gear that appears as you hover over the word this
  • Turn on invokes the function and change the dropdown to custom event
  • In the box below type in obtainData and click the gray save button
  • Next copy and paste the code below into the main part of the program
  • Line 5 is where we define the query
  • Change the text on line 5 between the " " to be the desired output

Click the blue save button and your done

var template = this;
var myTarget = query('targetPoint');
setTimeout(function() {
var queryData = query("stackRactive");
finstack.eval("readAll(energy and siteRef==@1eeaef2d-fd0e9c29).hisRead(today)", function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            ts      : p.ts
        });
    });
    setTimeout(function() {
    console.log(newPoints);
var test = template.view.querySelector("#zoomableValueAxis");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value": "v0",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
      "precision": 1,
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  } ],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN ",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
  },
} );
} );
}, 200);
}, 200);

Want a comparison?

  • Change the query in line 5, and use this code below for the program
var template = this;
var myTarget = query('targetPoint');
setTimeout(function() {
var queryData = query("stackRactive");
finstack.eval("readAll(energy and siteRef==@1eeaef2d-fd0e9c29).finHisReadBaseline(2017-01-01,2017-01-02)[0]", function(data){
queryData=data.result.toObj();
var newPoints      = [];
    var realPoints  = data.result.toObj();
    realPoints.forEach(function(p,index) {
        newPoints.push({
            v0      : p.v0.toFixed(2),
            v0base  : p.v0base.toFixed(2),
            ts      : p.ts
        });
    });
    setTimeout(function() {
    console.log(newPoints);
var test = template.view.querySelector("#zoomableValueAxis");
var chart = AmCharts.makeChart(test, {
 "type": "serial",
  "theme": "light",
    "dataProvider": newPoints,
    "date": "ts",
    "value": "v0",
  "marginRight": 40,
  "marginLeft": 40,
  "autoMarginOffset": 20,
  "valueAxes": [ {
    "id": "v1",
    "axisAlpha": 0,
    "position": "left",
    "ignoreAxisWidth": true
  } ],
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0,
  },
  "graphs": [ {
      "precision": 1,
    "id": "g1",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0.2,
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0",
    "balloonText": "<span style='font-size:18px;'>[[v0]]</span>"
  },
  {
    "id": "g2",
    "balloon": {
      "drop": true,
      "adjustBorderColor": false,
      "color": "#ffffff",
      "type": "smoothedLine"
    },
    "fillAlphas": 0,
    "lineColor": "#da616b",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "dashLength":5,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "v0base",
    "balloonText": "<span style='font-size:18px;'>[[v0base]]</span>"
  }],
  "chartCursor": {
      "categoryBalloonDateFormat":"MMM DD YYYY JJ:NN ",
    "valueLineEnabled": true,
    "valueLineBalloonEnabled": true,
    "cursorAlpha": 0,
    "zoomable": false,
    "valueZoomable": true,
    "valueLineAlpha": 0.5
  },
  "valueScrollbar": {
    "autoGridCount": true,
    "color": "#000000",
    "scrollbarHeight": 50
  },
  "categoryField": "ts",
  "categoryAxis": {
      "equalSpacing": true,
    "parseDates": true,
    "dashLength": 1,
    "minorGridEnabled": true,
    "gridPosition": "start",
    "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
  },
} );
} );
}, 200);
}, 200);