jqplot bar chat

by marsant

HTML

<script src="https://dl.dropbox.com/sh/mfxtto9ifky9giq/-19w0eEBOs/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="https://dl.dropbox.com/sh/mfxtto9ifky9giq/argED0xEMo/jquery.jqplot.min.css">
<script src="https://dl.dropbox.com/sh/mfxtto9ifky9giq/LSTBxQkr8F/plugins/jqplot.barRenderer.min.js"></script>
<script src="https://dl.dropbox.com/sh/mfxtto9ifky9giq/8jXw2aMdpT/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="https://dl.dropbox.com/sh/mfxtto9ifky9giq/VmnihxsHMk/plugins/jqplot.pointLabels.min.js"></script>
<div id='chart1' class='chart'></div>

CSS

.chart {
    width:350px;
}

JavaScript

$(document).ready(function(){
    var s1 = [200, 600, 700, 1000, 600];
    // Can specify a custom tick Array.
    // Ticks should match up one for each y value (category) in the series.
    var ticks = ['May', 'June', 'July', 'August', 'September'];
     
    var plot1 = $.jqplot('chart1', [s1], {
        // The "seriesDefaults" option is an options object that will
        // be applied to all series in the chart.
        seriesDefaults:{
            renderer:$.jqplot.BarRenderer,
            rendererOptions: { barWidth: 20 },
            color:'blue',
            shadow: false,
        },
        grid: {
            drawBorder: false,
            shadow: false,
        },
        // Custom labels for the series are specified with the "label"
        // option on the series option.  Here a series option object
        // is specified for each series.
        //series:[
        //    {label:'Hotel'},
        //    {label:'Event Regristration'},
        //    {label:'Airfare'}
        //],
        // Show the legend and put it outside the grid, but inside the
        // plot container, shrinking the grid to accomodate the legend.
        // A value of "outside" would not shrink the grid and allow
        // the legend to overflow the container.
        //legend: {
            //show: true,
            //placement: 'outsideGrid'
        //},
        axes: {
            // Use a category axis on the x axis and use our custom ticks.
            xaxis: {
                renderer: $.jqplot.CategoryAxisRenderer,
                ticks: ticks,
                tickOptions: { showGridline: false, showMark: false  },
                showTickMarks: false,
            },
            // Pad the y axis just a little so bars can get close to, but
            // not touch, the grid boundaries.  1.2 is the default padding.
            yaxis: {
                pad: 1.05,
                renderer: $.jqplot.LinearAxisRenderer,
                tickOptions: { formatString: '$%d',...