Initialization

To initialize dhtmlxChart in an application, you need to take the following steps:

<!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:  Bar chart - DHTMLX 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:

chart.html

<div id="chart_container"></div>

Initialize Chart

Initialize Chart with the dhx.Chart object constructor. The constructor has two parameters:

  • container – (id) the id of an HTML container where a chart will be initialized. You've defined it at the previous step
  • the chart configuration object with necessary properties. There are the following main config options:
    • type - (string) the type of a chart to initialize. Сhoose any of the 11 available types: "bar", "x-bar", "line", "spline", "scatter", "area", "splineArea", "donut", "pie", "pie3D", "radar"
    • scales - (object) an object with charts scales configuration
    • series - (array) an array of series objects. Series are representations of data properties
    • legend - (array) an array with the legend configuration options
    • maxPoints - (number) displays an average number of values in case a data set is too large to show all the values in the chart
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);

See the full list of all available configuration properties in the article Configuration.

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:  Bar chart - DHTMLX 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:  Load data - DHTMLX Chart

Back to top