Databases
StackOverflow2013
Postsdbo
POJQplot barchart example not displaying
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJQplot barchart example not displaying
    text
    copied!<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>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload