Initialization
To initialize dhtmlxChart in an application, you need to take the following steps:
- Download the dhtmlxChart package and unpack it into a folder of your project
- Include source files
- Create a container
- Initialize Chart with the object constructor
- Load data into Chart
<!DOCTYPE html>
<html>
<head>
<title>How to Start with dhtmlxChart</title>
<script type="text/javascript" src="../../codebase/chart.js"></script>
<link rel="stylesheet" href="../../codebase/chart.css">
</head>
<body>
<div id="chart_container"></div>
<script>
// creating dhtmlxChart
var chart = new dhx.Chart("chart_container", {
type: "bar",
scales: {
"bottom" : {
text: "month"
},
"left" : {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "company C",
color: "#5E83BA",
fill: "#5E83BA"
}
]
});
</script>
</body>
</html>
Related sample: Chart. Basic Initialization Bar Chart
Include source files
Create an HTML file and place full paths to JS and CSS files of dhtmlxChart into the header of the created file. The Chart component can be used standalone or as a part of the Suite library.
If you use dhtmlxChart standalone, you need to include 2 files:
- chart.js
- chart.css
<script type="text/javascript" src="../../codebase/chart.js"></script>
<link rel="stylesheet" href="../../codebase/chart.css">
If you use dhtmlxChart as a part of the Suite package, you need to include JS/CSS files of the dhtmlxSuite library:
- suite.js
- suite.css
<link type="text/css" href="../codebase/suite.css">
<script src="../codebase/suite.js" type="text/javascript"></script>
Create a container
Add a container for Chart and give it an id, "chart_container", for example:
<div id="chart_container"></div>
Initialize Chart
Initialize Chart with the dhx.Chart
object constructor. The constructor has two parameters:
- a container to place a Chart into. You've defined it at the previous step.
- an object with configuration properties
var config = {
type: "bar",
scales: {
"bottom" : {
text: "month"
},
"left" : {
maxTicks: 10,
max: 100,
min: 0
}
},
series: [
{
id: "A",
value: "company C",
color: "#5E83BA",
fill: "#5E83BA"
}
]
};
var chart = new dhx.Chart("chart_container", config);
Configuration properties
See the full list of all available configuration properties of Chart in the Chart API overview article.
Load data into Chart
Finally, you are to load the chart with data. You can load inline or external data into the chart.
- to load data from a local source, use the parse() method of the Data Collection object:
var data = [
{ month: '\'02', 'company A': 20, 'company B': 52, 'company C': 72},
{ month: '\'03', 'company A': 55, 'company B': 33, 'company C': 90},
{ month: '\'04', 'company A': 40, 'company B': 30, 'company C': 81},
{ month: '\'05', 'company A': 80, 'company B': 11, 'company C': 62},
{ month: '\'06', 'company A': 60, 'company B': 14, 'company C': 68},
// more data items
];
var chart = new dhx.Chart("chart_container",{
type: "bar",
scales: { // scales config }
series: [
{
//series config
}
]
});
chart.data.parse(data);
Related sample: Chart. Basic Initialization Bar Chart
- to load data from an external file, use the load() method of the Data Collection object:
var chart = new dhx.Chart( "chart_container",{
type: "bar",
scales: { // scales config }
series: [
{
//series config
}
]
});
chart.data.load("../common/dataset.json");
Related sample: Chart. Load Data