Data can be loaded from external files or resources available on the client side. Charts support the following data types:
Data from an external file are loaded by the load() method.
Loading is asynchronous.
chart.load(url, function(){
alert("data is really loaded");
// any operations with data can be placed here
},datatype);
When data is already available on the client side, you can use the parse() method:
chart.parse(data, datatype);
Here is an example of loading from a JSON file:
chart.load("some.json", "json");
and from a JSON object:
chart.parse(data,"json");
where the content of the "some.json" or of a data object is:
[
{ "id":"1", "sales":7.4, "year":2006 },
{ "id":"2", "sales":9.0, "year":2007 },
{ "id":"3", "sales":7.3, "year":2008 },
{ "id":"4", "sales":7.6, "year":2009 }
];
chart.load("some.xml", "xml");
// or
chart.parse(someXMLString,"xml");
There aren't any requirements for incoming XML (it can be in any format), all top-level tags will be converted to objects.
<data>
<item id="1">
<sales>7.3</sales>
<year>2008</year>
</item>
<item id="2">
<sales>7.6</sales>
<year>2009</year>
</item>
</data>
The names of top-level tags don't matter.
The attributes of the top-level tags (<item> in the code snippet showed above) and values of the nested tags will be available as properties in a template and for scripting. If you want to process only tags with specific names, you can change the xpath used for data collecting:
dhtmlx.dataDriver.xml.records = "/data/item"; // select only item tags
Data in in the CSV format doesn't contain names for values, so they are auto-named. The first value will be accessible as "data0", the second one as "data1", etc. IDs are auto-generated.
chart.load("some.csv", "csv");
//or
chart.parse(someCSVString, "csv");
"1", "9.0", "2007"
"2", "7.3", "2008"
"3", "7.6", "2009"
You can configure row and line separators as follows:
dhtmlx.dataDriver.csv.row = "n";
dhtmlx.dataDriver.csv.cell= ",";
Data defined as a JS array doesn't contain names for values. The values are accessible the same way as in CSV: "data0", "data1", etc.
chart.load("some.js", "jsarray");
// or
chart.parse(data, "jsarray");
Where the content of the "some.js" or of a data array is:
[[1, 7.4, "2006"],
[2, 9.0, "2007"],
[3, 7.3, "2008"],
[4, 7.6, "2009"]]
Back to top