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