JavaScript charts | Bar charts
Examples
Basic blue theme
Loading...
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>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'bar'); myChart.setDataJSON("data.json"); myChart.draw();
{ "JSChart" : { "datasets" : [ { "type" : "bar", "data" : [ { "unit" : "2005", "value" : "2" }, { "unit" : "2006", "value" : "1" }, { "unit" : "2007", "value" : "3" }, { "unit" : "2008", "value" : "6" } ] } ], "optionset" : [ { "set" : "setBarColor", "value" : "'#42aBdB'" }, { "set" : "setBarOpacity", "value" : "0.8" }, { "set" : "setBarBorderColor", "value" : "'#D9EDF7'" }, { "set" : "setBarValues", "value" : "false" }, { "set" : "setTitleColor", "value" : "'#8C8383'" }, { "set" : "setAxisColor", "value" : "'#777E81'" }, { "set" : "setAxisValuesColor", "value" : "'#777E81'" } ] } }
Custom red theme
Loading...
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>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'bar'); myChart.setDataJSON("data.json"); myChart.draw();
{ "JSChart" : { "datasets" : [ { "type" : "bar", "data" : [ { "unit" : "Jan", "value" : "2" }, { "unit" : "Feb", "value" : "1" }, { "unit" : "Mar", "value" : "3" }, { "unit" : "Apr", "value" : "6" }, { "unit" : "May", "value" : "8" }, { "unit" : "Jun", "value" : "10" }, { "unit" : "Jul", "value" : "9" }, { "unit" : "Aug", "value" : "8" }, { "unit" : "Sep", "value" : "5" }, { "unit" : "Oct", "value" : "6" }, { "unit" : "Nov", "value" : "2" }, { "unit" : "Dec", "value" : "4" } ] } ], "colorset" : [ "#CE0000", "#EF2323", "#D20202", "#A70000", "#850000", "#740000", "#530000", "#850000", "#B00000", "#9C0404", "#CE0000", "#BA0000" ], "optionset" : [ { "set" : "setAxisColor", "value" : "'#9D9F9D'" }, { "set" : "setAxisWidth", "value" : "1" }, { "set" : "setAxisNameX", "value" : "'Months'" }, { "set" : "setAxisNameY", "value" : "'Values'" }, { "set" : "setAxisNameColor", "value" : "'#655D5D'" }, { "set" : "setAxisNameFontSize", "value" : "9" }, { "set" : "setAxisPaddingLeft", "value" : "50" }, { "set" : "setAxisValuesDecimals", "value" : "1" }, { "set" : "setAxisValuesColor", "value" : "'#9C1919'" }, { "set" : "setTextPaddingLeft", "value" : "0" }, { "set" : "setBarValuesColor", "value" : "'#9C1919'" }, { "set" : "setBarBorderWidth", "value" : "0" }, { "set" : "setTitleColor", "value" : "'#8C8382'" }, { "set" : "setGridColor", "value" : "'#5D5F5D'" } ] } }
Basic magenta theme
Loading...
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>
Code using Javascript and external JSON file:
var myChart = new JSChart('chartid', 'bar'); myChart.setDataJSON("data.json"); myChart.draw();
{ "JSChart" : { "datasets" : [ { "type" : "bar", "data" : [ { "unit" : "2003", "value" : "2.6" }, { "unit" : "2004", "value" : "4.5" }, { "unit" : "2005", "value" : "2" }, { "unit" : "2006", "value" : "1.5" }, { "unit" : "2007", "value" : "3" }, { "unit" : "2008", "value" : "5.2" } ] } ], "colorset" : [ "#7979DB", "#7952E9", "#792BC8", "#792BA1", "#792BA1", "#792B79" ], "optionset" : [ { "set" : "setAxisValuesColor", "value" : "'#008'" }, { "set" : "setAxisColor", "value" : "'#ABABAB'" }, { "set" : "setAxisWidth", "value" : "1" }, { "set" : "setAxisValuesColor", "value" : "'#858585'" }, { "set" : "setAxisNameColor", "value" : "'#858585'" }, { "set" : "setBarBorderColor", "value" : "'#bbb'" }, { "set" : "setBarOpacity", "value" : "0.8" }, { "set" : "setBarSpacingRatio", "value" : "50" }, { "set" : "setBarValues", "value" : "false" }, { "set" : "setTitleColor", "value" : "'#928888'" }, { "set" : "setGridColor", "value" : "'#ABABAB'" } ] } }
For details on public methods see Reference.