All geek questions in one place

JQPlot base chart not showing

I need to get numerical data for displaying in a chart on a web page, and I found that JQPlot looks like one of the simplest jQuery libraries for this, as well as for free use. However, despite all my attempts to look at examples and tutorials on their web page, I simply cannot get any diagram to display on the page. Here is my code for the base diagram only:

<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 web page (http://www.jqplot.com/tests/line-charts.php), so I don’t know why nothing happens on this page.

+6
source share
5 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:

Make sure you also have a base file (jquery.jqplot.min.js) (easy to skip on these pages)

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

+2
source

Try placing the div component in front of the Javascript / JQuery code.

It is possible that jQuery will not be able to find the "div".

Define a div first, and then write code to display the chart.

+2
source

You need to enable the main jqPlot JS before the JS renderer, but after jQuery is turned on and place the div on the page before placing the script to display the chart.

+2
source

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

Add a container (target) to your web page where you want your chart to be displayed. Remember to indicate your goal in width and height:

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

(Retrieved from this page )

This is the first impression I got from your code. You did not define the container correctly.

Hope this helps someone.

0
source

Some additional points:

1. Make sure that you provide links to all the necessary JS and CSS files in the same order as on the jqPlot website.

2: Go into the Firebug Console, sometimes this is useful.

Hope this helps.

Thanks!

0
source

Source: https://habr.com/ru/post/921344/

More articles:


All Articles