Area Chart

Area chart is a mixture of Line Chart and Stacked Bar Chart. It shows the relative contribution of each separate value to the whole picture.
DhmlxChart offers these sub-types of Area Chart:

• Area
• Stacked Area

Now let’s start to create an Area Chart yourself step by step.
It will be a simple Area Chart which you can improve later, adding additional functions and propeties.

First, we will make some preparatory steps.

1. Specify data that will be represented in your chart. In our examples we use Sales Information of one little company in json format. Know more about available data formats.

var data = [
		{ sales:"5.0",sales1:"3.4",sales2:"2.1", year:"2000" },
		{ sales:"2.8",sales1:"4.8",sales2:"0.3", year:"2001" },
		{ sales:"1.1",sales1:"4.4",sales2:"2.9", year:"2002" },
		{ sales:"4.4",sales1:"5.5",sales2:"2.6", year:"2003" },
		{ sales:"2.6",sales1:"6.0",sales2:"1.4", year:"2004" },
		{ sales:"4.1",sales1:"5.7",sales2:"1.1", year:"2005" }
 
]

2. Insert to your page an HTML container for your future chart e.g. with the name “chart_container” .

<div id=" chart_container" style="width:280px;height:250px;border:1px solid #A4BED4;"></div>

Go on, fill in an object constructor.

3. Set chart type depending on the sub-type you have chosen.

Area - “area”,
Stacked Area - “stackedArea”

We will create Area, so in the property 'view' we'll specify the value “area”.

var AreaChart =  new dhtmlXChart({
		view:"area"
		....
})

4. Define value 'chart_container' in the property ‘container’ of an object constructor. It sets chart container.

var AreaChart =  new dhtmlXChart({
                view:"area",
		container:"chart_container"
		...
})

5. Assign value '#sales#' to the ‘value’ property to set data that Area Chart will represent.

var AreaChart =  new dhtmlXChart({
		view:"area",
		container:"chart_container",
	        value:"#sales#",
		...
})

6. Specify chart transparency. It can be number from 0 to 1. We'll specify value 0.6.

var AreaChart =  new dhtmlXChart({
		view:"area",
		container:"chart_container",
	        value:"#sales#",
                alpha:0.6
		...
})

7. Set color of your chart. Our value is '#aed7f4' (property 'color').

var AreaChart =  new dhtmlXChart({
		view:"area",
		container:"chart_container",
	        value:"#sales#",
                alpha:0.6,
                color:"#aed7f4"
                ...
})

8. Name xAxis and choose scale data (parameter 'template'). In the example we will use the following values:'#Year#' as xAxis name and '#year#' as scale data. Know more about chart scale here.

var AreaChart =  new dhtmlXChart({
		view:"area",
		container:"chart_container",
	        value:"#sales#",
                alpha:0.6,
                color:"#aed7f4",
                xAxis:{
			title:"Year",
			template:"#year#"
		}
		...
})

xAxis is completed. Next in turn - yAxis.

9. Name Yaxis. We'll use the name - '#Sales per year#'. Know more about chart scale here.

var AreaChart =  new dhtmlXChart({
		view:"area",
		container:"chart_container",
	        value:"#sales#",
                alpha:0.6,
                color:"#aed7f4",
                xAxis:{
			title:"Year",
			template:"#year#"
		},
		yAxis:{
			title:"Sales per year"
	        }
})

9. Use method addSeries() to represent several data propeties on one chart.

AreaChart.addSeries({
	    value:"#sales1#",
	    color:"#45abf5",
	    label:"#sales1#"
});

10. Use method parse() to process data.

AreaChart.parse(data,"json");

We've finished. Just run the application to see your creation.

Examples for each sub-type you can see here.