JS Charts | How to use

Add to      

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

Examples

Basic bold theme

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>

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

Custom blue theme

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>

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

Custom "no-grid" theme

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>

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

For details on public methods see Reference.