This blog post will illustrate what need to be done when you want to use the jqxChart as a Bar Chart.
The code example below will create a basic Column Chart.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en"><head> <title id='Description'>jqxChart Bar Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data var sampleData = [ { Country: 'China', Population: 1347350000, Percent: 19.18}, { Country: 'India', Population: 1210193422, Percent: 17.22}, { Country: 'USA', Population: 313912000, Percent: 4.47}, { Country: 'Indonesia', Population: 237641326, Percent: 3.38}, { Country: 'Brazil', Population: 192376496, Percent: 2.74}]; // prepare jqxChart settings var settings = { title: "Top 5 most populated countries", description: "Statistics for 2011", showLegend: true, enableAnimations: true, padding: { left: 20, top: 5, right: 20, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData, categoryAxis: { dataField: 'Country', showGridLines: true, flip: false }, colorScheme: 'scheme01', seriesGroups: [ { type: 'column', orientation: 'vertical', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: false, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); }); </script></head><body class='default'> <div id='jqxChart' style="width:600px; height:400px; position: relative; left: 0px; top: 0px;"> </div></body></html>
The resulting Column Chart:
Now, we can change a few settings and display our Column Chart as a Bar Chart. The settings that we need to change are ‘orientation’ and ‘flip’. The ‘orientation’ should be set to ‘horizontal’ instead of ‘vertical’ and the valueAxis’s ‘flip’ should be set to true.
Here’s the updated code of the seriesGroups:
seriesGroups: [ { type: 'column', orientation: 'horizontal', columnsGapPercent: 100, toolTipFormatSettings: { thousandsSeparator: ',' }, valueAxis: { flip: true, unitInterval: 100000000, maxValue: 1500000000, displayValueAxis: true, description: '', formatFunction: function (value) { return parseInt(value / 1000000); } }, series: [ { dataField: 'Population', displayText: 'Population (millions)' } ] } ]
The Bar Chart is displayed below:
