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.

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