xyz9999 xyz9999 - 7 months ago 14
Javascript Question

using jqBarGraph in my page

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.

Answer

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>