Until now AnyChart was able to get data only in XML format. However it’s not always convenient and requires at least knowledge of XML.
Now we make the life of AnyChart users easier and add the ability of handy Flash chart implementation in JavaScript. Now AnyChart.js has a new method – setJSData, that allows you to set parameters and data to the chart as a JavaScript object.
You can view a simple example here:
http://6.anychart.com/tips_and_tricks/xml-and-js/js-sample.html
How to create an object with settings and data:An object with settings and data has the same structure as AnyChart XML. XML nodes and attributes are properties. Nodes, that can be repeated (for example, <point />) are arrays.
For example:
var chartData = {
charts: {
chart: {
chart_settings: {
title: { text: "Chart Title" } },
data: {
series: [
point: [{name: "pt1", y: 12}, {name: "pt2", y: 23}]
]
}
}
}
}
Or:
var chartData = {}
chartData.charts = {};
chartData.charts.chart = {};
chartData.charts.chart.chart_settings = {};
chartData.charts.chart.chart_settings.title = {};
chartData.charts.chart.chart_settings.title.text = "Chart Title";
chartData.charts.chart.data = {};
chartData.charts.chart.data.series = [];
var seriesObj = {};
seriesObj.point = [];
seriesObj.point.push({name: "Pt1", y: 12});
seriesObj.point.push({name: "Pt1", y: 23});
chartData.charts.chart.data.series.push(seriesObj);
Object’s structure is equivalent to XML structure. The description of XML you can find here:
http://6.anychart.com/products/anychart/docs/xmlReference/index.html
Setting chart description object to AnyChart is done using setJSData method.
Also we’ve created several examples of using setJSData, including JSON example:
1. An example of object-creation using JavaScript:http://6.anychart.com/tips_and_tricks/xml-and-js/js-sample.html
2. An example of JSON-creation forming: http://6.anychart.com/tips_and_tricks/xml-and-js/json-sample.html
3. An example of JSON-data loading from the text file using AJAX:
http://6.anychart.com/tips_and_tricks/xml-and-js/json-ajax-sample.html
- Categories: AnyChart charting component, Tips and tricks
- No Comments »