title: JQplot barchart example not displaying
body: <p>I have a similar problem as reported on <a href="https://stackoverflow.com/questions/11657607/jqplot-basic-chart-not-displaying">JQPlot Basic Chart not displaying</a>, and despite looking at its suggestions and checking the source code of the example I cant get it work. I copied most of the example code (first example in <a href="http://www.jqplot.com/tests/bar-charts.php" rel="nofollow noreferrer">http://www.jqplot.com/tests/bar-charts.php</a>), then included the javascript links from the source code (view-source:<a href="http://www.jqplot.com/tests/bar-charts.php" rel="nofollow noreferrer">http://www.jqplot.com/tests/bar-charts.php</a>), but nothing is displayed.  Pls see my code below. What am I doing wrong?</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
      &lt;title&gt; jqplottest &lt;/title&gt;
      &lt;!--[if lt IE 9]&gt;&lt;script language="javascript" type="text/javascript" src="excanvas.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
      &lt;script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/jquery.jqplot.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://www.jqplot.com/src/jquery.jqplot.min.css" /&gt;
  
      &lt;script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.barRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.categoryAxisRenderer.min.js"&gt;&lt;/script&gt;
      &lt;script language="javascript" type="text/javascript" src="http://www.jqplot.com/src/plugins/jqplot.pointLabels.min.js"&gt;&lt;/script&gt;
  
       &lt;script type="text/javascript"&gt;
      /* following script code -$(document).ready(function()- is exact copy of original example code*/     
      $(document).ready(function(){
          var s1 = [200, 600, 700, 1000];
          var s2 = [460, -210, 690, 820];
          var s3 = [-260, -440, 320, 200];
          // 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'];
  
          var plot1 = $.jqplot('chart1', [s1, s2, s3], {
          // The "seriesDefaults" option is an options object that will
          // be applied to all series in the chart.
              seriesDefaults:{
                  renderer:$.jqplot.BarRenderer,
              rendererOptions: {fillToZero: true}
              },
          // 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
              },
              // 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,
              tickOptions: {formatString: '$%d'}
              }
          }
      });
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="chart1" style="width:600px; height:250px;"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>