/
AM Chart Show Hide Scroll

AM Chart Show Hide Scroll

 

Description: This model works by adding the dataQuery tag and adding your query as the value.  An example query would be readAll(id==@1eeb0955-26403f98).hisRead(today)

Model: amShowHideScroll.f5m

Make Your Own

  • Drag out the AM|Chart component
  • Put the AM|Chart component in a group and add the tag amShowHideScroll
  • Add another tag called dataQuery with the value set to the query
  • Add a program
  • Have the program run on amShowHideScroll
  • Copy and paste the code below 
var queryData      = [];
finstack.eval(this.dataQuery, function(data){
    var realPoints  = data.result.toObj(); 
    realPoints.forEach(function(p,index) {
        queryData.push({
            date   : p.ts,
            value  : p.v0.toFixed(1),
        });
    });
    
AmCharts.addInitHandler(function(chart) {
  if (chart.chartScrollbar === undefined || !chart.chartScrollbar.autoHide)
    return;
  chart.addListener("zoomed", function(event) {
    var enabled = true;
    if (event.startIndex === 0 && event.endIndex === (chart.dataProvider.length - 1))
      enabled = false;
    if (event.chart.chartScrollbar.enabled === enabled)
      return;
    event.chart.chartScrollbar.enabled = enabled
    event.chart.validateNow(false, true);
  });
}, ["serial"]);

var chart = AmCharts.makeChart(Chart.view, {
  "type": "serial",
  "theme": "light",
  "dataDateFormat": "YYYY-MM-DD",
  "marginLeft": 50,
  "balloon": {
    "borderThickness": 1,
    "shadowAlpha": 0
  },
  "chartScrollbar": {
    "autoHide": true
  },
  "chartCursor": {
    "cursorAlpha": 0.5,
    "categoryBalloonDateFormat": "MMMM D L:NN A",
    "enabled": true,
	"cursorColor": "#000000"
  },
  "startDuration": 1,

"graphs": [{
    "id": "g1",
    "bullet": "round",
    "bulletBorderAlpha": 1,
    "bulletColor": "#FFFFFF",
    "bulletSize": 5,
    "hideBulletsCount": 50,
    "lineThickness": 2,
    "title": "red line",
    "useLineColorForBulletBorder": true,
    "valueField": "value",
    "balloonText": "<div style='margin:5px; font-size:19px;'><span style='font-size:13px;'>[[category]]</span><br>[[value]]</div>"
}],
  "categoryField": "date",
  "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"
                    }]
                },
  "valueAxes": [{
    "ignoreAxisWidth": true
  }],
    "listeners": [{
    "event": "zoomed",
    "method": function(e) {
      e.chart.lastZoomed = e;
    }
  }],
  
  "dataProvider": queryData,
});
});

Related content

Simple Column Chart
Simple Column Chart
More like this
History Comparison Chart
History Comparison Chart
Read with this
Line Chart
Line Chart
More like this
AM Alarms
AM Alarms
Read with this
Zoomable Value Axis
Zoomable Value Axis
More like this
GB Ractive Dashboard
GB Ractive Dashboard
Read with this