JS Charts | How to use

Add to      

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

Examples

Basic warm theme

Javascript code to produce above chart:

var myData = new Array(['Sector 1', 2], ['Sector 2', 1], ['Sector 3', 3], ['Sector 4', 6], ['Sector 5', 8.5], ['Sector 6', 10]);
var colors = ['#FACC00', '#FB9900', '#FB6600', '#FB4800', '#CB0A0A', '#F8F933'];
var myChart = new JSChart('chartid', 'pie');
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setTitleColor('#857D7D');
myChart.setPieUnitsColor('#9B9B9B');
myChart.setPieValuesColor('#6A0000');
myChart.draw();

If you wish 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', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();

<?xml version="1.0"?>
<JSChart>
	<dataset type="pie">
		<data unit="Sector 1" value="2"/>
		<data unit="Sector 2" value="1"/>
		<data unit="Sector 3" value="3"/>
		<data unit="Sector 4" value="6"/>
		<data unit="Sector 5" value="8.5"/>
		<data unit="Sector 6" value="10"/>
	</dataset>
	<colorset>
		<color value="#FACC00"/>
		<color value="#FB9900"/>
		<color value="#FB6600"/>
		<color value="#FB4800"/>
		<color value="#CB0A0A"/>
		<color value="#F8F933"/>
	</colorset>
	<optionset>
		<option set="setTitleColor" value="'#857D7D'"/>
		<option set="setPieUnitsColor" value="'#9B9B9B'"/>
		<option set="setPieValuesColor" value="'#6A0000'"/>
	</optionset>
</JSChart>

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

Custom rainbow 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 = ['#FFCC00', '#FFFF00', '#CCFF00', '#99FF00', '#33FF00', '#00FF66', '#00FF99', '#00FFCC', '#FF0000', '#FF3300', '#FF6600', '#FF9900'];
var myChart = new JSChart('chartid', 'pie');
myChart.setDataArray(myData);
	myChart.colorizePie(colors);
	myChart.setPiePosition(308, 170);
	myChart.setPieRadius(95);
	myChart.setPieUnitsFontSize(8);
	myChart.setPieUnitsColor('#474747');
	myChart.setPieValuesColor('#474747');
	myChart.setPieValuesOffset(-10);
	myChart.setTitleColor('#fff');
	myChart.setSize(616, 321);
	myChart.setBackgroundImage('path/background.jpg');
myChart.draw();

Code using Javascript and external XML file:

var myChart = new JSChart('chartid', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();

<?xml version="1.0"?>
<JSChart>
	<dataset type="pie">
		<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="#FFCC00"/>
		<color value="#FFFF00"/>
		<color value="#CCFF00"/>
		<color value="#99FF00"/>
		<color value="#33FF00"/>
		<color value="#00FF66"/>
		<color value="#00FF99"/>
		<color value="#00FFCC"/>
		<color value="#FF0000"/>
		<color value="#FF3300"/>
		<color value="#FF6600"/>
		<color value="#FF9900"/>
	</colorset>
	<optionset>
		<option set="setPiePosition" value="308, 170"/>
		<option set="setPieRadius" value="95"/>
		<option set="setPieUnitsFontSize" value="8"/>
		<option set="setPieUnitsColor" value="'#474747'"/>
		<option set="setPieValuesColor" value="'#474747'"/>
		<option set="setPieValuesOffset" value="-10"/>
		<option set="setTitleColor" value="'#fff'"/>
		<option set="setSize" value="616, 321"/>
		<option set="setBackgroundImage" value="'path/background.jpg'"/>
	</optionset>
</JSChart>

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

Custom B&W theme

Code using only Javascript:

var myData = new Array(['S.1', 20], ['S.2', 70], ['S.3', 30], ['S.4', 60], ['S.5', 80], ['S.6', 10]);
var myChart = new JSChart('chartid', 'pie');
var colors = ['#898A89', '#767776', '#676767', '#434443', '#B0B1B0', '#9E9F9E'];
myChart.setDataArray(myData);
myChart.colorizePie(colors);
myChart.setPieUnitsOffset(-30);
myChart.setPieUnitsColor('#fff');
myChart.setPieValuesOffset(10);
myChart.setPieValuesColor('#878787');
myChart.setTitleColor('#7A7A7A');
myChart.draw();

Code using Javascript and external XML file:

var myChart = new JSChart('chartid', 'pie');
myChart.setDataXML("data.xml");
myChart.draw();

<?xml version="1.0"?>
<JSChart>
	<dataset type="pie">
		<data unit="S.1" value="20"/>
		<data unit="S.2" value="70"/>
		<data unit="S.3" value="30"/>
		<data unit="S.4" value="60"/>
		<data unit="S.5" value="80"/>
		<data unit="S.6" value="10"/>
	</dataset>
	<colorset>
		<color value="#898A89"/>
		<color value="#767776"/>
		<color value="#676767"/>
		<color value="#434443"/>
		<color value="#B0B1B0"/>
		<color value="#9E9F9E"/>
	</colorset>
	<optionset>
		<option set="setPieUnitsOffset" value="-30"/>
		<option set="setPieUnitsColor" value="'#fff'"/>
		<option set="setPieValuesOffset" value="10"/>
		<option set="setPieValuesColor" value="'#878787'"/>
		<option set="setTitleColor" value="'#7A7A7A'"/>
	</optionset>
</JSChart>

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

For details on public methods see Reference.