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:  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:

index.html

<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. See the full list below.
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

css adds style classes to Chart
legend defines the configuration of a chart legend
maxPoints displays an average number of values in case a data set is too large to show all the values in the chart
scales defines configuration of chart scales
series defines configuration of chart series
type specifies the type of a chart

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:  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

Back to top