/
AM Chart Show Hide Scroll

AM Chart Show Hide Scroll

Owned by Sarah Padilla (Unlicensed)
Last updated: May 16, 2018

 

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