JavaScript charts | Line graphs


Implementation | Multiple data | Customization | Reference | Line charts | Bar charts | Pie charts

Examples

Basic bold theme

Loading...

Javascript code to produce above chart: 

var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChart = new JSChart('chartid', 'line');
myChart.setDataArray(myData);
myChart.setLineColor('#8D9386');
myChart.setLineWidth(4);
myChart.setTitleColor('#7D7D7D');
myChart.setAxisColor('#9F0505');
myChart.setGridColor('#a4a4a4');
myChart.setAxisValuesColor('#333639');
myChart.setAxisNameColor('#333639');
myChart.setTextPaddingLeft(0);
myChart.draw();

If you whish to use an external XML file for data and settings, here are the files you can use for the above example: 

var myChart = new JSChart('chartid', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="line">
		<data unit="10" value="2"/>
		<data unit="15" value="0"/>
		<data unit="18" value="3"/>
		<data unit="19" value="6"/>
		<data unit="20" value="8.5"/>
		<data unit="25" value="10"/>
		<data unit="30" value="9"/>
		<data unit="35" value="8"/>
		<data unit="40" value="5"/>
		<data unit="45" value="6"/>
		<data unit="50" value="2.5"/>
	</dataset>
	<optionset>
		<option set="setLineColor" value="'#8D9386'"/>
		<option set="setLineWidth" value="4"/>
		<option set="setTitleColor" value="'#7D7D7D'"/>
		<option set="setAxisColor" value="'#9F0505'"/>
		<option set="setGridColor" value="'#a4a4a4'"/>
		<option set="setAxisValuesColor" value="'#333639'"/>
		<option set="setAxisNameColor" value="'#333639'"/>
		<option set="setTextPaddingLeft" value="0"/>
	</optionset>
</JSChart>

Code using Javascript and external JSON file: 

var myChart = new JSChart('chartid', 'line');
myChart.setDataJSON("data.json");
myChart.draw();
{
	"JSChart" : {
		"datasets" : [
			{
				"type" : "line",
				"data" : [
					{
						"unit" : "10",
						"value" : "2"
					},
					{
						"unit" : "15",
						"value" : "0"
					},
					{
						"unit" : "18",
						"value" : "3"
					},
					{
						"unit" : "19",
						"value" : "6"
					},
					{
						"unit" : "20",
						"value" : "8.5"
					},
					{
						"unit" : "25",
						"value" : "10"
					},
					{
						"unit" : "30",
						"value" : "9"
					},
					{
						"unit" : "35",
						"value" : "8"
					},
					{
						"unit" : "40",
						"value" : "5"
					},
					{
						"unit" : "45",
						"value" : "6"
					},
					{
						"unit" : "50",
						"value" : "2.5"
					}
				]
			}
		],
		"optionset" : [
			{
				"set" : "setLineColor",
				"value" : "'#8D9386'"
			},
			{
				"set" : "setLineWidth",
				"value" : "4"
			},
			{
				"set" : "setTitleColor",
				"value" : "'#7D7D7D'"
			},
			{
				"set" : "setAxisColor",
				"value" : "'#9F0505'"
			},
			{
				"set" : "setGridColor",
				"value" : "'#a4a4a4'"
			},
			{
				"set" : "setAxisValuesColor",
				"value" : "'#333639'"
			},
			{
				"set" : "setAxisNameColor",
				"value" : "'#333639'"
			},
			{
				"set" : "setTextPaddingLeft",
				"value" : "0"
			}
		]
	}
}

Custom blue theme

Loading...

Code using only Javascript: 

var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChart = new JSChart('chartid', 'line');
myChart.setDataArray(myData);
myChart.setAxisNameFontSize(10);
myChart.setAxisNameX('Horizontal axis values');
myChart.setAxisNameY('Vertical axis');
myChart.setAxisNameColor('#787878');
myChart.setAxisValuesNumberX(6);
myChart.setAxisValuesNumberY(5);
myChart.setAxisValuesColor('#38a4d9');
myChart.setAxisColor('#38a4d9');
myChart.setLineColor('#C71112');
myChart.setTitle('A customized chart');
myChart.setTitleColor('#383838');
myChart.setGraphExtend(true);
myChart.setGridColor('#38a4d9');
myChart.setSize(616, 321);
myChart.setAxisPaddingLeft(140);
myChart.setAxisPaddingRight(140);
myChart.setAxisPaddingTop(60);
myChart.setAxisPaddingBottom(45);
myChart.setTextPaddingLeft(105);
myChart.setTextPaddingBottom(12);
myChart.setBackgroundImage('path/background.jpg');
myChart.draw();

Code using Javascript and external XML file: 

var myChart = new JSChart('chartid', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="line">
		<data unit="10" value="2"/>
		<data unit="15" value="0"/>
		<data unit="18" value="3"/>
		<data unit="19" value="6"/>
		<data unit="20" value="8.5"/>
		<data unit="25" value="10"/>
		<data unit="30" value="9"/>
		<data unit="35" value="8"/>
		<data unit="40" value="5"/>
		<data unit="45" value="6"/>
		<data unit="50" value="2.5"/>
	</dataset>
	<optionset>
		<option set="setAxisNameFontSize" value="10"/>
		<option set="setAxisNameX" value="'Horizontal axis values'"/>
		<option set="setAxisNameY" value="'Vertical axis'"/>
		<option set="setAxisNameColor" value="'#787878'"/>
		<option set="setAxisValuesNumberX" value="6"/>
		<option set="setAxisValuesNumberY" value="5"/>
		<option set="setAxisValuesColor" value="'#38a4d9'"/>
		<option set="setAxisColor" value="'#38a4d9'"/>
		<option set="setLineColor" value="'#C71112'"/>
		<option set="setTitle" value="'A customized chart'"/>
		<option set="setTitleColor" value="'#383838'"/>
		<option set="setGraphExtend" value="true"/>
		<option set="setGridColor" value="'#38a4d9'"/>
		<option set="setSize" value="616, 321"/>
		<option set="setAxisPaddingLeft" value="140"/>
		<option set="setAxisPaddingRight" value="140"/>
		<option set="setAxisPaddingTop" value="60"/>
		<option set="setAxisPaddingBottom" value="45"/>
		<option set="setTextPaddingLeft" value="105"/>
		<option set="setTextPaddingBottom" value="12"/>
		<option set="setBackgroundImage" value="'path/background.jpg'"/>
	</optionset>
</JSChart>

Code using Javascript and external JSON file: 

var myChart = new JSChart('chartid', 'line');
myChart.setDataJSON("data.json");
myChart.draw();
{
	"JSChart" : {
		"datasets" : [
			{
				"type" : "line",
				"data" : [
					{
						"unit" : "10",
						"value" : "2"
					},
					{
						"unit" : "15",
						"value" : "0"
					},
					{
						"unit" : "18",
						"value" : "3"
					},
					{
						"unit" : "19",
						"value" : "6"
					},
					{
						"unit" : "20",
						"value" : "8.5"
					},
					{
						"unit" : "25",
						"value" : "10"
					},
					{
						"unit" : "30",
						"value" : "9"
					},
					{
						"unit" : "35",
						"value" : "8"
					},
					{
						"unit" : "40",
						"value" : "5"
					},
					{
						"unit" : "45",
						"value" : "6"
					},
					{
						"unit" : "50",
						"value" : "2.5"
					}
				]
			}
		],
		"optionset" : [
			{
				"set" : "setAxisNameFontSize",
				"value" : "10"
			},
			{
				"set" : "setAxisNameX",
				"value" : "'Horizontal axis values'"
			},
			{
				"set" : "setAxisNameY",
				"value" : "'Vertical axis'"
			},
			{
				"set" : "setAxisNameColor",
				"value" : "'#787878'"
			},
			{
				"set" : "setAxisValuesNumberX",
				"value" : "6"
			},
			{
				"set" : "setAxisValuesNumberY",
				"value" : "5"
			},
			{
				"set" : "setAxisValuesColor",
				"value" : "'#38a4d9'"
			},
			{
				"set" : "setAxisColor",
				"value" : "'#38a4d9'"
			},
			{
				"set" : "setLineColor",
				"value" : "'#C71112'"
			},
			{
				"set" : "setTitle",
				"value" : "'A customized chart'"
			},
			{
				"set" : "setTitleColor",
				"value" : "'#383838'"
			},
			{
				"set" : "setGraphExtend",
				"value" : "true"
			},
			{
				"set" : "setGridColor",
				"value" : "'#38a4d9'"
			},
			{
				"set" : "setSize",
				"value" : "616, 321"
			},
			{
				"set" : "setAxisPaddingLeft",
				"value" : "140"
			},
			{
				"set" : "setAxisPaddingRight",
				"value" : "140"
			},
			{
				"set" : "setAxisPaddingTop",
				"value" : "60"
			},
			{
				"set" : "setAxisPaddingBottom",
				"value" : "45"
			},
			{
				"set" : "setTextPaddingLeft",
				"value" : "105"
			},
			{
				"set" : "setTextPaddingBottom",
				"value" : "12"
			},
			{
				"set" : "setBackgroundImage",
				"value" : "'chart_bg.jpg'"
			}
		]
	}
}

Custom "no-grid" theme

Loading...

Code using only Javascript: 

var myData = new Array([10, 2], [15, 0], [18, 3], [19, 6], [20, 8.5], [25, 10], [30, 9], [35, 8], [40, 5], [45, 6], [50, 2.5]);
var myChart = new JSChart('chartid', 'line');
myChart.setDataArray(myData);
myChart.setAxisColor('#656565');
myChart.setAxisNameColor('#4A4A4A');
myChart.setAxisNameFontSize(10);
myChart.setAxisNameX('Horizontal axis values');
myChart.setAxisNameY('Vertical axis');
myChart.setAxisPaddingBottom(60);
myChart.setAxisPaddingLeft(180);
myChart.setAxisPaddingRight(170);
myChart.setAxisPaddingTop(65);
myChart.setAxisValuesColor('#656565');
myChart.setAxisValuesNumberX(6);
myChart.setBackgroundColor('#EEE');
myChart.setGrid(false);
myChart.setLabelY([0, 'Low']);
myChart.setLabelY([5, 'Medium']);
myChart.setLabelY([10, 'High']);
myChart.setLineColor('#8638D5');
myChart.setShowYValues(false);
myChart.setTitle('A customized chart');
myChart.setTitleColor('#505050');
myChart.setSize(616, 321);
myChart.setTextPaddingBottom(20);
myChart.setTextPaddingLeft(120);
myChart.setTextPaddingTop(15);
myChart.setFlagRadius(6);
myChart.setTooltip([25, 'Tooltip for value 25 on X axis']);
myChart.setTooltip([40, 'Tooltip for value 40 on X axis']);
myChart.setBackgroundImage('path/background.jpg');
myChart.draw();

Code using Javascript and external XML file: 

var myChart = new JSChart('chartid', 'line');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="line">
		<data unit="10" value="2"/>
		<data unit="15" value="0"/>
		<data unit="18" value="3"/>
		<data unit="19" value="6"/>
		<data unit="20" value="8.5"/>
		<data unit="25" value="10"/>
		<data unit="30" value="9"/>
		<data unit="35" value="8"/>
		<data unit="40" value="5"/>
		<data unit="45" value="6"/>
		<data unit="50" value="2.5"/>
	</dataset>
	<optionset>
		<option set="setAxisColor" value="'#656565'"/>
		<option set="setAxisNameColor" value="'#4A4A4A'"/>
		<option set="setAxisNameFontSize" value="10"/>
		<option set="setAxisNameX" value="'Horizontal axis values'"/>
		<option set="setAxisNameY" value="'Vertical axis'"/>
		<option set="setAxisPaddingBottom" value="60"/>
		<option set="setAxisPaddingLeft" value="180"/>
		<option set="setAxisPaddingRight" value="170"/>
		<option set="setAxisPaddingTop" value="65"/>
		<option set="setAxisValuesColor" value="'#656565'"/>
		<option set="setAxisValuesNumberX" value="6"/>
		<option set="setGrid" value="false"/>
		<option set="setLabelY" value="[0, 'Low']"/>
		<option set="setLabelY" value="[5, 'Medium']"/>
		<option set="setLabelY" value="[10, 'High']"/>
		<option set="setLineColor" value="'#8638D5'"/>
		<option set="setShowYValues" value="false"/>
		<option set="setTitle" value="'A customized chart'"/>
		<option set="setTitleColor" value="'#505050'"/>
		<option set="setSize" value="616, 321"/>
		<option set="setTextPaddingBottom" value="20"/>
		<option set="setTextPaddingLeft" value="120"/>
		<option set="setTextPaddingTop" value="15"/>
		<option set="setFlagRadius" value="6"/>
		<option set="setTooltip" value="[25, 'Tooltip for value 25 on X axis']"/>
		<option set="setTooltip" value="[40, 'Tooltip for value 40 on X axis']"/>
		<option set="setBackgroundImage" value="'path/background.jpg'"/>
	</optionset>
</JSChart>

Code using Javascript and external JSON file: 

var myChart = new JSChart('chartid', 'line');
myChart.setDataJSON("data.json");
myChart.draw();
{
	"JSChart" : {
		"datasets" : [
			{
				"type" : "line",
				"data" : [
					{
						"unit" : "10",
						"value" : "2"
					},
					{
						"unit" : "15",
						"value" : "0"
					},
					{
						"unit" : "18",
						"value" : "3"
					},
					{
						"unit" : "19",
						"value" : "6"
					},
					{
						"unit" : "20",
						"value" : "8.5"
					},
					{
						"unit" : "25",
						"value" : "10"
					},
					{
						"unit" : "30",
						"value" : "9"
					},
					{
						"unit" : "35",
						"value" : "8"
					},
					{
						"unit" : "40",
						"value" : "5"
					},
					{
						"unit" : "45",
						"value" : "6"
					},
					{
						"unit" : "50",
						"value" : "2.5"
					}
				]
			}
		],
		"optionset" : [
			{
				"set" : "setAxisColor",
				"value" : "'#656565'"
			},
			{
				"set" : "setAxisNameColor",
				"value" : "'#4A4A4A'"
			},
			{
				"set" : "setAxisNameFontSize",
				"value" : "10"
			},
			{
				"set" : "setAxisNameX",
				"value" : "'Horizontal axis values'"
			},
			{
				"set" : "setAxisNameY",
				"value" : "'Vertical axis'"
			},
			{
				"set" : "setAxisPaddingBottom",
				"value" : "60"
			},
			{
				"set" : "setAxisPaddingLeft",
				"value" : "180"
			},
			{
				"set" : "setAxisPaddingRight",
				"value" : "170"
			},
			{
				"set" : "setAxisPaddingTop",
				"value" : "65"
			},
			{
				"set" : "setAxisValuesColor",
				"value" : "'#656565'"
			},
			{
				"set" : "setAxisValuesNumberX",
				"value" : "6"
			},
			{
				"set" : "setGrid",
				"value" : "false"
			},
			{
				"set" : "setLabelY",
				"value" : "[0, 'Low']"
			},
			{
				"set" : "setLabelY",
				"value" : "[5, 'Medium']"
			},
			{
				"set" : "setLabelY",
				"value" : "[10, 'High']"
			},
			{
				"set" : "setLineColor",
				"value" : "'#8638D5'"
			},
			{
				"set" : "setShowYValues",
				"value" : "false"
			},
			{
				"set" : "setTitle",
				"value" : "'A customized chart'"
			},
			{
				"set" : "setTitleColor",
				"value" : "'#505050'"
			},
			{
				"set" : "setSize",
				"value" : "616, 321"
			},
			{
				"set" : "setTextPaddingBottom",
				"value" : "20"
			},
			{
				"set" : "setTextPaddingLeft",
				"value" : "120"
			},
			{
				"set" : "setTextPaddingTop",
				"value" : "15"
			},
			{
				"set" : "setFlagRadius",
				"value" : "6"
			},
			{
				"set" : "setTooltip",
				"value" : "[25, 'Tooltip for value 25 on X axis']"
			},
			{
				"set" : "setTooltip",
				"value" : "[40, 'Tooltip for value 40 on X axis']"
			},
			{
				"set" : "setBackgroundImage",
				"value" : "'chart_bg.jpg'"
			}
		]
	}
}

For details on public methods see Reference.