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.
