jqPlot Horizontal Bar Chart
HTML
<link rel="stylesheet" href="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.css">
<script src="http://www.prioritymarketers.com/jqplot/src/jquery.jqplot.js"></script>
<script src=" http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.barRenderer.js"></script>
<script src=" http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script src=" http://www.prioritymarketers.com/jqplot/src/plugins/jqplot.pointLabels.js"></script>
<p><div> <div id="chart1"/> </div></p>
<p><div> <div id="chart2"/> </div></p>
<p><div> <div id="chart3"/> </div></p>
<p><div> <div id="chart4"/> </div></p>
JavaScript
function plotInto(data, ticks, container)
{
$.jqplot(container, [data],
{
seriesDefaults:
{
renderer:$.jqplot.BarRenderer,
},
legend:
{
show: true,
placement: 'outsideGrid'
},
axes:
{
xaxis:
{
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
}
});
}
function plotAdjustingColumnsInto(data, ticks, container, adjust)
{
var w = ((jQuery('#' + container).width() / data.length) * adjust) / 100;
$.jqplot('chart2', [data],
{
seriesDefaults:
{
renderer:$.jqplot.BarRenderer,
rendererOptions:
{
barWidth: w
}
},
legend:
{
show: true,
placement: 'outsideGrid'
},
axes:
{
xaxis:
{
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
}
});
}
$(document).ready(function()
{
var data = [200, 600, 700, 1000];
var ticks = ['May', 'June', 'July', 'August'];
var data2 = [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144];
var ticks2 = ['A', 'B', 'C', 'D', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M'];
plotInto(data, ticks, 'chart1');
plotAdjustingColumnsInto(data, ticks, 'chart2', 20);
plotInto(data2, ticks2, 'chart3');
plotAdjustingColumnsInto(data2, ticks2, 'chart4', 20);
});