Line Chart is the most popular chart type. It’s created by connecting a series of data points together with a line. This chart type is used to show data trends, how parameters are related to each other or how one variable changes effected by another.

DhmlxChart gives full scope to Line chart creation as well. You can customize line and points color, points filling (outer or inner), labels, tooltips and scales.

Let’s start to create a Line chart yourself step by step.

It will be a simple Line chart and you can improve it at any time just 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:3.8, year:"2001" },
        { sales:3.4, year:"2002" },
         …
        { sales:4.8, year:"2009" }
    ];
    chart.parse(data,"json");

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;"></div>

Go on, fill in an object constructor.

3. Set value ‘line’ in the ‘view’ property of an object constructor to set a chart type.

var LIneChart =  new dhtmlXChart({
		view:"line"
		....
	})

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

var LineChart =  new dhtmlXChart({
                view:"line",
		container:"chart_container"
		...
	})

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

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

6. Set chart labels e.g. value '#year#' (property 'label'). Know more about chart labels here.

var LineChart =  new dhtmlXChart({
		view:"line",
		container:"chart_container",
	        value:"#sales#",
		label:"#year#"
		...
	})

7. Specify points tooltip e.g. value '#years#' (property 'tooltip'). Know more about chart tooltip here.

var LineChart =  new dhtmlXChart({
		view:"line",
		container:"chart_container",
	        value:"#sales#",
		label:"#year#",
                tooltip: "#year#"
		...
	})

8. Select inner and outer color of points. We will use values: '#ffffff' and '#000000' (propeties 'borderColor','color'). Know more about colors here.

var LineChart =  new dhtmlXChart({
		view:"line",
		container:"chart_container",
	        value:"#sales#",
		label:"#year#",
                tooltip: "#year#",
                item:{
                    borderColor:"#ffffff",
                    color:"#000000"
                },
		...
	})

9. Set color and width for a line. Our values are '#ff9900' and '3' (propeties 'color' and 'width').

var LineChart =  new dhtmlXChart({
		view:"line",
		container:"chart_container",
	        value:"#sales#",
		label:"#year#",
                tooltip: "#year#",
                item:{
                    borderColor:"#ffffff",
                    color:"#000000"
                },
                line:{
                     color:"#ff9900",
                     width:3
                }
	})

10. Use method parse() to process data.

	LineChart.parse(data,"json");

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

Full code you can see here.