Table of Contents |
---|
toc
Model: amZoom.zip
How To Create Your Own
- 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
Code Block |
---|
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); |
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
...