Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JQPlot Basic Chart not displaying

I need to get numerical data to display as a chart on a webpage, and I've found that JQPlot looks to be one of the easiest JQuery libraries to do this as well as being free. However, despite all my efforts to look at the examples and tutorials on their webpage, I simply cannot get any kind of chart to display on the page. Here is my code for just the basic chart to get started:

<html>

<head>
<title>Testing plots functions</title>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){
  var plot1 = $.jqplot ('chart1', [[3,7,9,1,4,6,8,2,5]]);
});

</script>
</head>

<body>

Here is the start of the page...<br>

<div id="chart1"></div>

</body>

</html>

Most of this code is taken directly from their examples webpage (http://www.jqplot.com/tests/line-charts.php), so I don't know why nothing is happening on the page.

like image 253
superspartan999 Avatar asked Jul 25 '12 19:07

superspartan999


3 Answers

Do these files exist on your computer and in this folder structure?

  • JQPlot/plugins/jqplot.canvasAxisLabelRenderer.min.js
  • JQPlot/plugins/jqplot.canvasTextRenderer.min.js

Edit:

Ensure that you have the base file (jquery.jqplot.min.js) also included too (it can be easy to miss on those pages)

http://www.jqplot.com/src/jquery.jqplot.min.js

like image 80
Nathan Koop Avatar answered Oct 23 '22 03:10

Nathan Koop


Try placing the 'div' component before the Javascript/Jquery code.

There maybe chances that the Jquery is not able to locate the 'div'.

Define the div first and then write the code for the displaying the chart.

like image 27
Anish Nair Avatar answered Oct 23 '22 05:10

Anish Nair


You need to include the main jqPlot JS before the renderer JS but after the jQuery include, and position the div on the page before you place the script to render the chart.

like image 45
Brick Nine Avatar answered Oct 23 '22 03:10

Brick Nine