JavaScript charts | Bar charts


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

Examples

Basic blue theme

Loading...

Javascript code to produce above chart: 

var myData = new Array(['2005', 2], ['2006', 1], ['2007', 3], ['2008', 6]);
var myChart = new JSChart('chartid', 'bar');
myChart.setDataArray(myData);
myChart.setBarColor('#42aBdB');
myChart.setBarOpacity(0.8);
myChart.setBarBorderColor('#D9EDF7');
myChart.setBarValues(false);
myChart.setTitleColor('#8C8383');
myChart.setAxisColor('#777E81');
myChart.setAxisValuesColor('#777E81');
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', 'bar');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="bar">
		<data unit="2005" value="2"/>
		<data unit="2006" value="1"/>
		<data unit="2007" value="3"/>
		<data unit="2008" value="6"/>
	</dataset>
	<optionset>
		<option set="setBarColor" value="'#42aBdB'"/>
		<option set="setBarOpacity" value="0.8"/>
		<option set="setBarBorderColor" value="'#D9EDF7'"/>
		<option set="setBarValues" value="false"/>
		<option set="setTitleColor" value="'#8C8383'"/>
		<option set="setAxisColor" value="'#777E81'"/>
		<option set="setAxisValuesColor" value="'#777E81'"/>
	</optionset>
</JSChart>

Code using Javascript and external JSON file: 

var myChart = new JSChart('chartid', 'bar');
myChart.setDataJSON("data.json");
myChart.draw();
{
	"JSChart" : {
		"datasets" : [
			{
				"type" : "bar",
				"data" : [
					{
						"unit" : "2005",
						"value" : "2"
					},
					{
						"unit" : "2006",
						"value" : "1"
					},
					{
						"unit" : "2007",
						"value" : "3"
					},
					{
						"unit" : "2008",
						"value" : "6"
					}
				]
			}
		],
		"optionset" : [
			{
				"set" : "setBarColor",
				"value" : "'#42aBdB'"
			},
			{
				"set" : "setBarOpacity",
				"value" : "0.8"
			},
			{
				"set" : "setBarBorderColor",
				"value" : "'#D9EDF7'"
			},
			{
				"set" : "setBarValues",
				"value" : "false"
			},
			{
				"set" : "setTitleColor",
				"value" : "'#8C8383'"
			},
			{
				"set" : "setAxisColor",
				"value" : "'#777E81'"
			},
			{
				"set" : "setAxisValuesColor",
				"value" : "'#777E81'"
			}
		]
	}
}

Custom red theme

Loading...

Code using only Javascript: 

var myData = new Array(['Jan', 2], ['Feb', 1], ['Mar', 3], ['Apr', 6], ['May', 8], ['Jun', 10], ['Jul', 9], ['Aug', 8], ['Sep', 5], ['Oct', 6], ['Nov', 2], ['Dec', 4]);
var colors = ['#CE0000', '#EF2323', '#D20202', '#A70000', '#850000', '#740000', '#530000', '#850000', '#B00000', '#9C0404', '#CE0000', '#BA0000'];
var myChart = new JSChart('chartid', 'bar');
myChart.setDataArray(myData);
myChart.colorizeBars(colors);
myChart.setDataArray(myData);
myChart.setAxisColor('#9D9F9D');
myChart.setAxisWidth(1);
myChart.setAxisNameX('Months');
myChart.setAxisNameY('Values');
myChart.setAxisNameColor('#655D5D');
myChart.setAxisNameFontSize(9);
myChart.setAxisPaddingLeft(50);
myChart.setAxisValuesDecimals(1);
myChart.setAxisValuesColor('#9C1919');
myChart.setTextPaddingLeft(0);
myChart.setBarValuesColor('#9C1919');
myChart.setBarBorderWidth(0);
myChart.setTitleColor('#8C8382');
myChart.setGridColor('#5D5F5D');
myChart.draw();

Code using Javascript and external XML file: 

var myChart = new JSChart('chartid', 'bar');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="bar">
		<data unit="Jan" value="2"/>
		<data unit="Feb" value="1"/>
		<data unit="Mar" value="3"/>
		<data unit="Apr" value="6"/>
		<data unit="May" value="8"/>
		<data unit="Jun" value="10"/>
		<data unit="Jul" value="9"/>
		<data unit="Aug" value="8"/>
		<data unit="Sep" value="5"/>
		<data unit="Oct" value="6"/>
		<data unit="Nov" value="2"/>
		<data unit="Dec" value="4"/>
	</dataset>
	<colorset>
		<color value="#CE0000"/>
		<color value="#EF2323"/>
		<color value="#D20202"/>
		<color value="#A70000"/>
		<color value="#850000"/>
		<color value="#740000"/>
		<color value="#530000"/>
		<color value="#850000"/>
		<color value="#B00000"/>
		<color value="#9C0404"/>
		<color value="#CE0000"/>
		<color value="#BA0000"/>
	</colorset>
	<optionset>
		<option set="setAxisColor" value="'#9D9F9D'"/>
		<option set="setAxisWidth" value="1"/>
		<option set="setAxisNameX" value="'Months'"/>
		<option set="setAxisNameY" value="'Values'"/>
		<option set="setAxisNameColor" value="'#655D5D'"/>
		<option set="setAxisNameFontSize" value="9"/>
		<option set="setAxisPaddingLeft" value="50"/>
		<option set="setAxisValuesDecimals" value="1"/>
		<option set="setAxisValuesColor" value="'#9C1919'"/>
		<option set="setTextPaddingLeft" value="0"/>
		<option set="setBarValuesColor" value="'#9C1919'"/>
		<option set="setBarBorderWidth" value="0"/>
		<option set="setTitleColor" value="'#8C8382'"/>
		<option set="setGridColor" value="'#5D5F5D'"/>
	</optionset>
</JSChart>

Code using Javascript and external JSON file: 

var myChart = new JSChart('chartid', 'bar');
myChart.setDataJSON("data.json");
myChart.draw();
{
	"JSChart" : {
		"datasets" : [
			{
				"type" : "bar",
				"data" : [
					{
						"unit" : "Jan",
						"value" : "2"
					},
					{
						"unit" : "Feb",
						"value" : "1"
					},
					{
						"unit" : "Mar",
						"value" : "3"
					},
					{
						"unit" : "Apr",
						"value" : "6"
					},
					{
						"unit" : "May",
						"value" : "8"
					},
					{
						"unit" : "Jun",
						"value" : "10"
					},
					{
						"unit" : "Jul",
						"value" : "9"
					},
					{
						"unit" : "Aug",
						"value" : "8"
					},
					{
						"unit" : "Sep",
						"value" : "5"
					},
					{
						"unit" : "Oct",
						"value" : "6"
					},
					{
						"unit" : "Nov",
						"value" : "2"
					},
					{
						"unit" : "Dec",
						"value" : "4"
					}
				]
			}
		],
		"colorset" : [
			"#CE0000",
			"#EF2323",
			"#D20202",
			"#A70000",
			"#850000",
			"#740000",
			"#530000",
			"#850000",
			"#B00000",
			"#9C0404",
			"#CE0000",
			"#BA0000"
		],
		"optionset" : [
			{
				"set" : "setAxisColor",
				"value" : "'#9D9F9D'"
			},
			{
				"set" : "setAxisWidth",
				"value" : "1"
			},
			{
				"set" : "setAxisNameX",
				"value" : "'Months'"
			},
			{
				"set" : "setAxisNameY",
				"value" : "'Values'"
			},
			{
				"set" : "setAxisNameColor",
				"value" : "'#655D5D'"
			},
			{
				"set" : "setAxisNameFontSize",
				"value" : "9"
			},
			{
				"set" : "setAxisPaddingLeft",
				"value" : "50"
			},
			{
				"set" : "setAxisValuesDecimals",
				"value" : "1"
			},
			{
				"set" : "setAxisValuesColor",
				"value" : "'#9C1919'"
			},
			{
				"set" : "setTextPaddingLeft",
				"value" : "0"
			},
			{
				"set" : "setBarValuesColor",
				"value" : "'#9C1919'"
			},
			{
				"set" : "setBarBorderWidth",
				"value" : "0"
			},
			{
				"set" : "setTitleColor",
				"value" : "'#8C8382'"
			},
			{
				"set" : "setGridColor",
				"value" : "'#5D5F5D'"
			}
		]
	}
}

Basic magenta theme

Loading...

Code using only Javascript: 

var myData = new Array(['2003', 2.6], ['2004', 4.5], ['2005', 2], ['2006', 1.5], ['2007', 3], ['2008', 5.2]);
var myChart = new JSChart('chartid', 'bar');
var colors = ['#7979DB', '#7952E9', '#792BC8', '#792BA1', '#792BA1', '#792B79'];
myChart.setDataArray(myData);
myChart.colorizeBars(colors);
myChart.setAxisValuesColor('#008');
myChart.setAxisColor('#ABABAB');
myChart.setAxisWidth(1);
myChart.setAxisValuesColor('#858585');
myChart.setAxisNameColor('#858585');
myChart.setBarBorderColor('#bbb');
myChart.setBarOpacity(0.8);
myChart.setBarSpacingRatio(50);
myChart.setBarValues(false);
myChart.setTitleColor('#928888');
myChart.setGridColor('#ABABAB');
myChart.draw();

Code using Javascript and external XML file: 

var myChart = new JSChart('chartid', 'bar');
myChart.setDataXML("data.xml");
myChart.draw();
<?xml version="1.0"?>
<JSChart>
	<dataset type="bar">
		<data unit="2003" value="2.6"/>
		<data unit="2004" value="4.5"/>
		<data unit="2005" value="2"/>
		<data unit="2006" value="1.5"/>
		<data unit="2007" value="3"/>
		<data unit="2008" value="5.2"/>
	</dataset>
	<colorset>
		<color value="#7979DB"/>
		<color value="#7952E9"/>
		<color value="#792BC8"/>
		<color value="#792BA1"/>
		<color value="#792BA1"/>
		<color value="#792B79"/>
	</colorset>
	<optionset>
		<option set="setAxisValuesColor" value="'#008'"/>
		<option set="setAxisColor" value="'#ABABAB'"/>
		<option set="setAxisWidth" value="1"/>
		<option set="setAxisValuesColor" value="'#858585'"/>
		<option set="setAxisNameColor" value="'#858585'"/>
		<option set="setBarBorderColor" value="'#bbb'"/>
		<option set="setBarOpacity" value="0.8"/>
		<option set="setBarSpacingRatio" value="50"/>
		<option set="setBarValues" value="false"/>
		<option set="setTitleColor" value="'#928888'"/>
		<option set="setGridColor" value="'#ABABAB'"/>
	</optionset>
</JSChart>

Code using Javascript and external JSON file: 

var myChart = new JSChart('chartid', 'bar');
myChart.setDataJSON("data.json");
myChart.draw();
{
	"JSChart" : {
		"datasets" : [
			{
				"type" : "bar",
				"data" : [
					{
						"unit" : "2003",
						"value" : "2.6"
					},
					{
						"unit" : "2004",
						"value" : "4.5"
					},
					{
						"unit" : "2005",
						"value" : "2"
					},
					{
						"unit" : "2006",
						"value" : "1.5"
					},
					{
						"unit" : "2007",
						"value" : "3"
					},
					{
						"unit" : "2008",
						"value" : "5.2"
					}
				]
			}
		],
		"colorset" : [
			"#7979DB",
			"#7952E9",
			"#792BC8",
			"#792BA1",
			"#792BA1",
			"#792B79"
		],
		"optionset" : [
			{
				"set" : "setAxisValuesColor",
				"value" : "'#008'"
			},
			{
				"set" : "setAxisColor",
				"value" : "'#ABABAB'"
			},
			{
				"set" : "setAxisWidth",
				"value" : "1"
			},
			{
				"set" : "setAxisValuesColor",
				"value" : "'#858585'"
			},
			{
				"set" : "setAxisNameColor",
				"value" : "'#858585'"
			},
			{
				"set" : "setBarBorderColor",
				"value" : "'#bbb'"
			},
			{
				"set" : "setBarOpacity",
				"value" : "0.8"
			},
			{
				"set" : "setBarSpacingRatio",
				"value" : "50"
			},
			{
				"set" : "setBarValues",
				"value" : "false"
			},
			{
				"set" : "setTitleColor",
				"value" : "'#928888'"
			},
			{
				"set" : "setGridColor",
				"value" : "'#ABABAB'"
			}
		]
	}
}

For details on public methods see Reference.