jqplot demo (bar chart)

HTML

<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/jquery.jqplot.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.barRenderer.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.pointLabels.js"></script>
<script src="https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.categoryAxisRenderer.js"></script>
<div id="chart1"></div>

CSS

#chart1 {
  width: 800px;
  height: 400px;
}

.jqplot-yaxis-tick,
.jqplot-xaxis-tick {
  font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
  font-size: 10px;
}

JavaScript

/*

https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/jquery.jqplot.js
https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.barRenderer.js
https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.pointLabels.js
https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.categoryAxisRenderer.js
https://bitbucket.org/cleonello/jqplot/raw/dd65cd032132/src/plugins/jqplot.canvasAxisTickRenderer.js
*/

function is_int(value) {
  if ((parseFloat(value) == parseInt(value)) && !isNaN(value)) {
    return true;
  } else {
    return false;
  }
}


$(document).ready(function() {



  var plot1 = $.jqplot('chart1', [
    [1, 2, 3, 4, 5, 6],
    [6, 5, 4, 3, 2, 1]
  ], {
    // The "seriesDefaults" option is an options object that will
    // be applied to all series in the chart.
    seriesColors: ["#00f", "#0f0"],
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: {
        barDirection: 'horizontal',
        shadowDepth: 0,
        //barWidth: 10,
        barPadding: 8
      }
    },


    axes: {
      // Use a category axis on the x axis and use our custom ticks.
      yaxis: {
        renderer: $.jqplot.CategoryAxisRenderer,
        ticks: ['May', 'June', 'July', 'August', 'Sep', 'Oct']
      },

      xaxis: {
        //pad: 1.05,
        tickRenderer: $.jqplot.CanvasAxisTickRenderer,
        tickOptions: {
          //angle: -30,

          fontSize: '10pt',
          formatter: function(x, y) {
            return is_int(y) ? y : "";
          }
          //formatString: '(%d'
        },
        tickInterval: 10
      }
    }
  });
});