Reputation: 291

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.

Upvotes: 5

Answers (5)

Ankit Pandey

Reputation: 1988

Some Additional Points:

1: Make sure you have given the links to all required JS and CSS files in the same order like the jqPlot Website.

2: Check in Firebug Console, sometimes it is helpful.

Hope this helps.

Thanks !

Upvotes: 0

Matroskin

Reputation: 1

Although this thread is a bit old, consider the following:

Add a container (target) to your web page where you want your plot to show up. Be sure to give your target a width and a height:

<div id="chartdiv" style="height:400px;width:300px; "></div>

(Taken from this page)

This is first impression I had from your code. You haven't defined the container properly.

Hope it'll help somebody.

Upvotes: 0

Brick Nine

Reputation: 61

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.

Upvotes: 2