There are two ways of loading data into dhtmlxChart:
First, you need to prepare a data set that will be loaded into Chart.
dhtmlxChart expects loaded data in the JSON format. Here is an example of an appropriate data set:
var dataset = [
{ "month": "`02", "company A": 20, "company B": 52, "company C": 72},
{ "month": "`03", "company A": 5, "company B": 33, "company C": 90},
{ "month": "`04", "company A": 55, "company B": 30, "company C": 81},
{ "month": "`05", "company A": 30, "company B": 11, "company C": 62},
{ "month": "`06", "company A": 27, "company B": 14, "company C": 68},
{ "month": "`07", "company A": 32, "company B": 31, "company C": 64},
{ "month": "`08", "company A": 50, "company B": 22, "company C": 30},
{ "month": "`09", "company A": 12, "company B": 19, "company C": 65},
{ "month": "`10", "company A": 10, "company B": 24, "company C": 50},
{ "month": "`11", "company A": 17, "company B": 40, "company C": 78}
]
Each object in the data set contains a number of key:value pairs for data titles and values.
A data set for Pie, Pie3D and Donut charts differs a little bit. You need to provide the "color":"value" properties to color the sections of these types of Chart. For example:
id | (string,number) the id of a series |
text | (string) the name of the data set property to map labels of data values to |
value | (string) the name of the data set property to map data values to |
color | (string) points to the property in a data set that defines the color of a pie/donut sector |
var pie_dataset = [
{ "id": "Jan", "value": 44.33, "color": "#394E79", "month": "Jan"},
{ "id": "Feb", "value": 22.12, "color": "#5E83BA", "month": "Feb"},
{ "id": "Mar", "value": 53.21, "color": "#C2D2E9", "month": "Mar"},
{ "id": "Apr", "value": 34.25, "color": "#9A8BA5", "month": "Apr"},
{ "id": "May", "value": 24.65, "color": "#E3C5D5", "month": "May"}
];
To load data from an external file, make use of the load method of Data Collection. It takes the URL of the file with data as a parameter:
var chart = new dhx.Chart("chart_container");
chart.data.load("../common/dataset.json");
The component will make an AJAX call and expect the remote URL to provide valid JSON data.
Data loading is asynchronous, so you need to wrap any after-loading code into a promise:
chart.data.load("/some/data").then(function(){
// some logic here
});
Related sample: Chart. Load Data
To load data from a local data source, use the parse method of Data Collection. Pass a predefined data set as a parameter of this method:
var chart = new dhx.Chart("chart_container");
chart.data.parse(dataset);
Related sample: Chart. Basic Initialization Bar Chart
To save the current state of a chart, use the serialize method of Data Collection. It converts the data of a chart into an array of JSON objects. Each JSON object contains a set of key:value pairs for data titles and values.
var state = chart1.data.serialize();
Then you can parse the data stored in the saved state array to a different chart. For example:
// creating a new chart
var chart2 = new dhx.Chart(document.body);
// parsing the state of chart1 into chart2
chart2.data.parse(state);
Related sample: Chart. Serialize
Back to top