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>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'line'); myChart.setDataJSON("data.json"); myChart.draw();
{ "JSChart" : { "datasets" : [ { "type" : "line", "data" : [ { "unit" : "10", "value" : "2" }, { "unit" : "15", "value" : "0" }, { "unit" : "18", "value" : "3" }, { "unit" : "19", "value" : "6" }, { "unit" : "20", "value" : "8.5" }, { "unit" : "25", "value" : "10" }, { "unit" : "30", "value" : "9" }, { "unit" : "35", "value" : "8" }, { "unit" : "40", "value" : "5" }, { "unit" : "45", "value" : "6" }, { "unit" : "50", "value" : "2.5" } ] } ], "optionset" : [ { "set" : "setLineColor", "value" : "'#8D9386'" }, { "set" : "setLineWidth", "value" : "4" }, { "set" : "setTitleColor", "value" : "'#7D7D7D'" }, { "set" : "setAxisColor", "value" : "'#9F0505'" }, { "set" : "setGridColor", "value" : "'#a4a4a4'" }, { "set" : "setAxisValuesColor", "value" : "'#333639'" }, { "set" : "setAxisNameColor", "value" : "'#333639'" }, { "set" : "setTextPaddingLeft", "value" : "0" } ] } }
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>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'line'); myChart.setDataJSON("data.json"); myChart.draw();
{ "JSChart" : { "datasets" : [ { "type" : "line", "data" : [ { "unit" : "10", "value" : "2" }, { "unit" : "15", "value" : "0" }, { "unit" : "18", "value" : "3" }, { "unit" : "19", "value" : "6" }, { "unit" : "20", "value" : "8.5" }, { "unit" : "25", "value" : "10" }, { "unit" : "30", "value" : "9" }, { "unit" : "35", "value" : "8" }, { "unit" : "40", "value" : "5" }, { "unit" : "45", "value" : "6" }, { "unit" : "50", "value" : "2.5" } ] } ], "optionset" : [ { "set" : "setAxisNameFontSize", "value" : "10" }, { "set" : "setAxisNameX", "value" : "'Horizontal axis values'" }, { "set" : "setAxisNameY", "value" : "'Vertical axis'" }, { "set" : "setAxisNameColor", "value" : "'#787878'" }, { "set" : "setAxisValuesNumberX", "value" : "6" }, { "set" : "setAxisValuesNumberY", "value" : "5" }, { "set" : "setAxisValuesColor", "value" : "'#38a4d9'" }, { "set" : "setAxisColor", "value" : "'#38a4d9'" }, { "set" : "setLineColor", "value" : "'#C71112'" }, { "set" : "setTitle", "value" : "'A customized chart'" }, { "set" : "setTitleColor", "value" : "'#383838'" }, { "set" : "setGraphExtend", "value" : "true" }, { "set" : "setGridColor", "value" : "'#38a4d9'" }, { "set" : "setSize", "value" : "616, 321" }, { "set" : "setAxisPaddingLeft", "value" : "140" }, { "set" : "setAxisPaddingRight", "value" : "140" }, { "set" : "setAxisPaddingTop", "value" : "60" }, { "set" : "setAxisPaddingBottom", "value" : "45" }, { "set" : "setTextPaddingLeft", "value" : "105" }, { "set" : "setTextPaddingBottom", "value" : "12" }, { "set" : "setBackgroundImage", "value" : "'chart_bg.jpg'" } ] } }
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>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'line'); myChart.setDataJSON("data.json"); myChart.draw();
{ "JSChart" : { "datasets" : [ { "type" : "line", "data" : [ { "unit" : "10", "value" : "2" }, { "unit" : "15", "value" : "0" }, { "unit" : "18", "value" : "3" }, { "unit" : "19", "value" : "6" }, { "unit" : "20", "value" : "8.5" }, { "unit" : "25", "value" : "10" }, { "unit" : "30", "value" : "9" }, { "unit" : "35", "value" : "8" }, { "unit" : "40", "value" : "5" }, { "unit" : "45", "value" : "6" }, { "unit" : "50", "value" : "2.5" } ] } ], "optionset" : [ { "set" : "setAxisColor", "value" : "'#656565'" }, { "set" : "setAxisNameColor", "value" : "'#4A4A4A'" }, { "set" : "setAxisNameFontSize", "value" : "10" }, { "set" : "setAxisNameX", "value" : "'Horizontal axis values'" }, { "set" : "setAxisNameY", "value" : "'Vertical axis'" }, { "set" : "setAxisPaddingBottom", "value" : "60" }, { "set" : "setAxisPaddingLeft", "value" : "180" }, { "set" : "setAxisPaddingRight", "value" : "170" }, { "set" : "setAxisPaddingTop", "value" : "65" }, { "set" : "setAxisValuesColor", "value" : "'#656565'" }, { "set" : "setAxisValuesNumberX", "value" : "6" }, { "set" : "setGrid", "value" : "false" }, { "set" : "setLabelY", "value" : "[0, 'Low']" }, { "set" : "setLabelY", "value" : "[5, 'Medium']" }, { "set" : "setLabelY", "value" : "[10, 'High']" }, { "set" : "setLineColor", "value" : "'#8638D5'" }, { "set" : "setShowYValues", "value" : "false" }, { "set" : "setTitle", "value" : "'A customized chart'" }, { "set" : "setTitleColor", "value" : "'#505050'" }, { "set" : "setSize", "value" : "616, 321" }, { "set" : "setTextPaddingBottom", "value" : "20" }, { "set" : "setTextPaddingLeft", "value" : "120" }, { "set" : "setTextPaddingTop", "value" : "15" }, { "set" : "setFlagRadius", "value" : "6" }, { "set" : "setTooltip", "value" : "[25, 'Tooltip for value 25 on X axis']" }, { "set" : "setTooltip", "value" : "[40, 'Tooltip for value 40 on X axis']" }, { "set" : "setBackgroundImage", "value" : "'chart_bg.jpg'" } ] } }
For details on public methods see Reference.