How to use jQuery plots?

JavaScript
1

Hi,

I want to use jQuery plots. I found this http://www.jqplot.com/index.php

I added in index.html

in <head>:

<script type="text/javascript" src="js/libs/jquery-1.9.0/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jqueryui-1.10.0/jquery-ui.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/jquery.jqplot.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/jqplot.logAxisRenderer.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/jquery.jqplot.min.css"/>
        <script type="text/javascript" src="js/script.js"></script>

in <body>:

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

in js/script.js:

$.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]],
        {title: 'Exponential Line',
            axes: {yaxis: {min: -10, max: 240}},
            series: [{color: '#5FAB78'}]
        });

But it doesn’t work. Why?

Thank you!

2

It doesn’t work because the script runs in the <head>, before the <body> is processed by the browser, so the ‘div’ with id ‘chartdiv’ doesn’t exist (yet).

There are two ways to solve this

  1. Move your script.js from the <head> to the position just before </body>, i.e.

    <script type="text/javascript" src="js/script.js"></script>
</body>

or 2) Modify script.js to start running the function when the document has finished loading:


$(function() {
    $.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]], {
        title: 'Exponential Line',
        axes: {yaxis: {min: -10, max: 240}},
        series: [{color: '#5FAB78'}]
    });
});

($(function) is the same as $(document).ready(function)[noparse];)[/noparse]

Generally option 1 is considered to be the more elegant one of the two.

3

I will use the way №2. It works fine!

Thank you very much!

I like jQuery more and more!