Initializing Chart

To initialize a chart object in an application, you need to take the following steps:

Include related js and css files
Place a chart container on a page
Define data for a chart
Call an initialization script

Step 1. Including source files

To start working with dhtmlxChart, you need to include chart js/css files on a page.

In order to use dhtmlxChart as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxchart.css">
    <script src="codebase/dhtmlxchart.js"></script>
</head>

If you use dhtmlxChart as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxchart.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Step 2. Setting Chart container

Specify an HTML container for your future chart.

<div id=" chart_container" style="width:280px;height:250px;"></div>

Step 3. Specifying data

Specify data that will be present in a chart. They can have json, xml, csv or js array format.

var data = [
    { "sales":2.9, "year":"2000" },
    { "sales":3.5, "year":"2001" },
      …
    { "sales":7.6, "year":"2009" }
];
  ...
chart.parse(data,"json");

Step 4. Creating object constructor

Create an object constructor. It can have various parameters, but 3 parameters are mandatory in order for a chart to be rendered:

view – (string) a chart view (e.g. "pie")
container – (id) an id of an HTML container where chart will be initialized
value – (string) a data value that a chart presents ("value" by default)

All other parameters are optional.

var chart =  new dhtmlXChart({
    view: "pie",
    container: "chart_container",
    value: "#sales#",
    label: "#year#"
});

It is highly recommended to call a chart constructor from the onload event of a page. Otherwise, there may be problems with correct rendering.