DHTMLX Docs & Samples Explorer

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.

Loading is asynchronous.

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

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:


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");

There isn't a requirement for incoming XML (it can be in any format), all top-level tags will be converted to objects.

   <item id="1">
   <item id="2">

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");
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= ",";

JS Array

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");
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"]]