JS Charts | How to use

Add to      

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

Examples

Basic blue theme

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>

You can download above example if you login using your JumpeyeComponents account here.

Custom red theme

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>

You can download above example if you login using your JumpeyeComponents account here.

Basic magenta theme

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>

You can download above example if you login using your JumpeyeComponents account here.

For details on public methods see Reference.