Line Chart
Model:Â lineChartAM.zip
How To Create Your Own
- Start by dragging out AM|Charts from the components menu
- Resize 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
finstack.eval(point.query, function(data){ var queryData=data.result.toObj(); var chart = AmCharts.makeChart(Chart.view, { "type": "serial", "theme": "light", "dataProvider": queryData, "date": "ts", "value": "v0", "precision" : 1, "marginRight": 40, "marginLeft": 40, "autoMarginOffset": 20, "dataDateFormat": "HH:mm:ss", "valueAxes": [ { "id": "v1", "axisAlpha": 0, "position": "left", "ignoreAxisWidth": true } ], "balloon": { "borderThickness": 1, "shadowAlpha": 0, }, "graphs": [ { "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:SS", "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", "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 }, }); });
Example query:Â readAll(id==@1eeb0225-0f9b8f7d).hisRead(today)