Since v 3.2.0 all charts and maps can now be created using JSON object, instead of JavaScript API. This means you might store chart configuration in a simple JSON object and use it whenever you need. Here is a basic example of bar chart made from JSON object:
AmCharts.makeChart( "chartdiv", {
"type": "serial",
"dataProvider": [ {
"year": 2005,
"income": 23.5
}, {
"year": 2006,
"income": 26.2
}, {
"year": 2007,
"income": 30.1
} ],
"categoryField": "year",
"rotate": true,
"categoryAxis": {
"gridPosition": "start",
"axisColor": "#DADADA"
},
"valueAxes": [ {
"axisAlpha": 0.2
} ],
"graphs": [ {
"type": "column",
"title": "Income",
"valueField": "income",
"lineAlpha": 0,
"fillColors": "#ADD981",
"fillAlphas": 0.8,
"balloonText": "[[title]] in [[category]]:<b>[[value]]</b>"
} ]
} );
And here is Stock chart:
AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataDateFormat": "YYYY-MM-DD",
"dataSets": [ {
"dataProvider": [ {
"date": "2011-06-01",
"val": 10
}, {
"date": "2011-06-02",
"val": 11
}, {
"date": "2011-06-03",
"val": 12
}, {
"date": "2011-06-04",
"val": 11
}, {
"date": "2011-06-05",
"val": 10
}, {
"date": "2011-06-06",
"val": 11
}, {
"date": "2011-06-07",
"val": 13
}, {
"date": "2011-06-08",
"val": 14
}, {
"date": "2011-06-09",
"val": 17
}, {
"date": "2011-06-10",
"val": 13
} ],
"fieldMappings": [ {
"fromField": "val",
"toField": "value"
} ],
"categoryField": "date"
} ],
"panels": [ {
"legend": {},
"stockGraphs": [ {
"id": "graph1",
"valueField": "value",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
} ]
} ],
"panelsSettings": {
"startDuration": 1
},
"categoryAxesSettings": {
"dashLength": 5
},
"valueAxesSettings": {
"dashLength": 5
},
"chartScrollbarSettings": {
"graph": "graph1",
"graphType": "line"
},
"chartCursorSettings": {
"valueBalloonsEnabled": true
},
"periodSelector": {
"periods": [ {
"period": "DD",
"count": 1,
"label": "1 day"
}, {
"period": "DD",
"selected": true,
"count": 5,
"label": "5 days"
}, {
"period": "MM",
"count": 1,
"label": "1 month"
}, {
"period": "YYYY",
"count": 1,
"label": "1 year"
}, {
"period": "YTD",
"label": "YTD"
}, {
"period": "MAX",
"label": "MAX"
} ]
}
} );
As you see, you no longer need to create instance of chart or graph or any other chart object using new operator. This new way of creating charts makes the process a lot easier. Of course, the old way will also work, as in some cases it is more comfortable, especially when working with advanced, changing charts. Check samples folder of our charts and maps packages – you will find plenty of examples starting with _JSON_ prefix – all of them are made using this technique.
Setting value axis for a graph, graph for scrollbar, etc
When creating charts with JavaScript, there were quite often scenarios when you had to use reference of the object, for example, if you wanted to set graph for chart’s scrollbar, you had to set chartScrollbar.graph = graph; where graph was an actual AmGraph object. Same with setting valueAxis for the graph: graph.ValueAxis = valueAxis; where valueAxis was an actual ValueAxis object. As this is not possible using JSON, now all properties which required actual object can also accept String which should be id of the object. So in case you want to set graph for a scrollbar, you should set id for your graph and then set this id for scrollbar’s graph property, same with value axis and other cases where reference to an object was required. Line chart with multiple value axes illustrates this case.