Skip to main content

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