Data Type Supporting

The methods of the library allow to present data from different data sources. Data can be loaded from external files or resources available on client-side. Charts support the following data types:

• json
• xml
• jsarray
• csv

Data from an external file is loaded by load() method.

Therefore, you should catch loading end before executing any commands with data:

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 names of top-level tags make no matter. The attributes of the top-level tags (<item> in the code snippet showed above) 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 one 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 follow:

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 in 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"]]