Data can be loaded from external files or resources available on client-side. Charts support following data types:
Data from an external file are loaded by load() method.
chart.load(url, function(){ alert("data is really loaded"); //any operations with data can be placed here },datatype);
When data is already available on client side , you can use parse() method:
grid.parse(data, datatype);
Here is the example of loading from JSON file:
chart.load("some.json", "json");
and json object:
chart.parse(data,”json”);
where some.json or 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 isn't a requirement 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 name of top-level tags doesn't matter. The attributes of top-level tag (<item> in above snippet) and values of 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 xpath used for data collecting:
dhtmlx.dataDriver.xml.records = "/data/item"; //select only item tags
Data in CSV haven’t names for values, so they are autonamed , the first value will be accessible as “data0”, the second as “data1” and 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 in JS array as well as in CSV hasn’t names for values. And values are accessible the same way (“data0”, “data1”, …):
chart.load("some.js", "jsarray"); //or chart.parse(data, "jsarray");
Where “some.js” or data array is
[[1, 7.4, "2006"], [2, 9.0, "2007"], [3, 7.3, "2008"], [4, 7.6, "2009"]]