DHTMLX Docs & Samples Explorer

Index
dhtmlxchart

## Data loading

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

- “json”
- “xml”
- “jsarray”
- “csv”

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

Loading is asynchronous. Therefore, you should catch loading end before executing any commands against the 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);

### JSON

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

### XML

        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 name of top-level tags doesn't matter. The attributes of top-level tag (<item> in above snippet) 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

### CSV

Data in CSV haven’t names for values, so they are autonamed , the first value will be accessible as “data0”, the second 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 follows

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