Data loading
There are two ways of loading data into DHTMLX Chart:
- on initialization of Chart
- after initialization of Chart
First, you need to prepare a data set that will be loaded into Chart.
Preparing data set
DHTMLX Chart expects loaded data in the JSON format.
Please note that if you specify the id fields in the data collection, their values should be unique. You can also omit the id fields in the data collection. In this case they will be generated automatically.
Here are examples of appropriate data sets for different chart types:
- Line, Spline, Bar, X-Bar, Area, Spline Area, Radar, Scatter charts
A data set for these chart types can look like this:
const 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.
- Pie, Pie3D and Donut charts
A data set for Pie, Pie3D and Donut charts differs a little bit and includes the following properties:
| id | (string | number) the id of a series |
| key:value | key is the name of the attribute and value is the text label of a pie/donut sector |
| key:value | key is the name of the attribute and value is the value of a pie/donut sector |
| color | (string) points to the property in a data set that defines the color of a pie/donut sector |
You need to provide the "color":"value" properties to color the sections of these types of Chart. For example:
const 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"}
];
- Treemap chart
A data set for Treemap chart has also another structure and may include the following properties:
| id | (string | number) the id of a tile or group |
| key:value | key is the name of the attribute and value is the text label of a tile |
| key:value | key is the name of the attribute and value is the value of a tile |
| parent | (string) the id of the group |
For example:
const treeMapData = [
{ id: "2020", month: "2020" },
{ id: "Jan", value: 144.33, month: "Jan", parent: "2020" },
{ id: "Feb", value: 22.12, month: "Feb", parent: "2020" },
{ id: "Mar", value: 53.21, month: "Mar", parent: "2020" },
// more data
];
- Calendar heatmap chart
A data set for Heatmap chart should include the following properties:
| id | (string | number) the id of a cell |
| key:value | key is the name of the attribute and value is the number value of a cell |
| key:value | key is the name of the attribute and value is the date of a cell |
const heatMapData = [
{ id: "100", value: 50, date: new Date(2022, 2, 2) },
{ id: "101", value: 100, date: new Date(2022, 4, 1) },
{ id: "102", value: 10, date: new Date(2022, 4, 4) },
{ id: "200", value: 32, date: new Date(2022, 6, 1) },
{ id: "201", value: 4, date: new Date(2022, 6, 15) },
{ id: "202", value: 35, date: new Date(2022, 7, 21) },
{ id: "300", value: 22, date: new Date(2022, 9, 6) },
{ id: "501", value: 100, date: new Date(2023, 1, 1) },
];
Loading data on initialization
You can load a predefined data set into Chart on the initialization stage. Use the data configuration property, as in:
const chart = new dhx.Chart("chart_container", {
type: "area",
scales: {
"bottom": {
text: "month"
},
"left": {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "company A",
color: "#81C4E8",
strokeWidth: 3
},
{
id: "B",
value: "company B",
color: "#74A2E7",
strokeWidth: 3
},
{
id: "C",
value: "company C",
color: "#5E83BA",
strokeWidth: 3
}
],
legend: {
series: ["A", "B", "C"],
halign: "right",
valign: "top"
},
data: dataset
});
Loading data after initialization
There are two ways to load data into Chart after its initialization:
External data loading
To load data from an external file, make use of the load() method of DataCollection. It takes the URL of the file with data as a parameter:
const chart = new dhx.Chart("chart_container", {
type: "bar",
scales: {
// scales config
},
series: [
{
//series config
}
]
});
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
Loading from local source
To load data from a local data source, use the parse() method of DataCollection. Pass a predefined data set as a parameter of this method:
const chart = new dhx.Chart("chart_container", {
type: "bar",
scales: {
// scales config
},
series: [
{
//series config
}
]
});
chart.data.parse(dataset);
Related sample: Chart. Bar chart initialization
Saving and restoring state
To save the current state of a chart, use the serialize() method of DataCollection. 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.
const 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
const chart2 = new dhx.Chart(document.body);
// parsing the state of chart1 into chart2
chart2.data.parse(state);
Related sample: Chart. Serialize