SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot 8Observer8's Avatar
    Join Date
    Jul 2013
    Location
    Russia
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to use jQuery plots?

    Hi,

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

    I added in index.html

    in <head>:
    Code:
    <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>:
    Code:
    <div id="chartdiv" style="height:400px; width:300px; "></div>
    in js/script.js:
    Code:
    $.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. #2
    Utopia, Inc. silver trophy
    ScallioXTX's Avatar
    Join Date
    Aug 2008
    Location
    The Netherlands
    Posts
    9,060
    Mentioned
    153 Post(s)
    Tagged
    2 Thread(s)
    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.

    Code:
        <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:

    Code:
    $(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);)

    Generally option 1 is considered to be the more elegant one of the two.
    Rémon - Hosting Advisor

    SitePoint forums will switch to Discourse soon! Make sure you're ready for it!

    Minimal Bookmarks Tree
    My Google Chrome extension: browsing bookmarks made easy

  3. #3
    SitePoint Zealot 8Observer8's Avatar
    Join Date
    Jul 2013
    Location
    Russia
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will use the way №2. It works fine!

    Thank you very much!

    I like jQuery more and more!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •