JavaScript charts | Line graphs
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>
You can download above example if you login using your JumpeyeComponents account here.
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>
You can download above example if you login using your JumpeyeComponents account here.
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>
You can download above example if you login using your JumpeyeComponents account here.
For details on public methods see Reference.