/
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, }); });
, multiple selections available,
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