Check documentation for the latest version of dhtmlxSuite Data Loading DHTMLX Docs

Data Loading

Data can be loaded from external files or resources available on the client side. Charts support the following data types:

  • "json"
  • "xml"
  • "jsarray"
  • "csv"

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

JSON

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 }
];

XML

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

CSV

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

JS Array

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