Home/ Questions/Q 8133353
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T09:34:41+00:00

hi i need to have a graph in my html page after searching for

  • 0

hi i need to have a graph in my html page after searching for long time i came to know that using jqBarGraph plug-in it is easy to create the graph ,Below given is the code for my page :

<html>
<head><script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jquery.js"></script>
<script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jqBarGraph.js"></script>

   <script type="text/javascript">

 arrayOfData = new Array(
     [10.3,'Jan','#f3f3f3'],
     [15.2,'Feb','#f4f4f4'],
     [13.1,'Mar','#cccccc'],
     [16.3,'Apr','#333333'],
     [14.5,'May','#666666']
);
   $('#divForGraph').jqBarGraph({ data: arrayOfData });

   </script>
   </head>
   <body>
   <div id="divForGraph" style="width:100%; height:100%; border:1px solid black;">
   aksdljfkladsjf;oajsdfkmlmnmnk;asdf
   </div>
   </body>
   </html>

what is the mistake i’ve done in this code and correct me in getting the graph in this page asap….thanks in advance.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to wait until the Div is loaded to manipulate the div contents using jQuery / jqgraph.

    Place your script after the div is loaded.

    Also the CSS style file is missing, I added that.

    The below fixed code works.

    <html>
<head><script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jquery.js"></script>
<script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jqBarGraph.js"></script>
<link rel="stylesheet" href="http://www.workshop.rs/jqbargraph/styles.css" type="text/css" />
   </head>
   <body>
   <div id="divForGraph" style="width:100%; height:100%; border:1px solid black;">
   </div>
   <script type="text/javascript">

 arrayOfData = new Array(
     [10.3,'Jan','#f3f3f3'],
     [15.2,'Feb','#f4f4f4'],
     [13.1,'Mar','#cccccc'],
     [16.3,'Apr','#333333'],
     [14.5,'May','#666666']
);
   $('#divForGraph').jqBarGraph({ data: arrayOfData });

   </script>
   </body>
   </html>

    There is another fix fir this without moving your scripts to the bottom of the page. Alternatively, you can also use jQuery’s $(document).ready() to wait until the document is loaded and then run your jqBar script!

    <html>
<head><script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jquery.js"></script>
<script type="text/javascript" src="http://www.workshop.rs/jqbargraph/jqBarGraph.js"></script>
<link rel="stylesheet" href="http://www.workshop.rs/jqbargraph/styles.css" type="text/css" />

   <script type="text/javascript">
$(document).ready(function() {
   $('#divForGraph').jqBarGraph({ data: arrayOfData });

});
 arrayOfData = new Array(
     [10.3,'Jan','#f3f3f3'],
     [15.2,'Feb','#f4f4f4'],
     [13.1,'Mar','#cccccc'],
     [16.3,'Apr','#333333'],
     [14.5,'May','#666666']
);

   </script>
   </head>
   <body>
   <div id="divForGraph" style="width:100%; height:100%; border:1px solid black;">
   </div>

   </body>
   </html>
    • 0