Replicate a simple AJAX rendered Line chart


« Back to message list

Enter your email address to get email updates on this topic. You can stop receiving updates by clicking the link in the update email messages.

Posted by Vincent Devine on 11th December 2013
Hello!

Using the code from www.rgraph.net/docs/howto-using-ajax.html as a guide I want to create a very simple working version of the chart on that page. I have much bigger plans for dynamically created data, but I want to at least start here. This is the code I have so far:
// = = = S T A R T H T M L C O D E = = =
<!DOCTYPE html>
<html>
<head>
  <title>HELP me I am trying AJAX</title>
  <script src="libraries/RGraph.common.core.js"></script>
  <script src="libraries/RGraph.line.js"></script>
  <script src="libraries/RGraph.common.effects.js"></script>

  <script>
   //# The window.onload function only fetches the data using the AJAX function
   window.onload = function (e)
   {
    //# Go Get the first batch of data
    RGraph.AJAX.getCSV('doc/getData.php', myCallback); // have also tried 'www.rgraph.net/getdata.html'
   
    //# Call the window.onload function again in 3 seconds
    setTimeout(window.onload, 3000);
   }

    /* According to documentation This is the AJAX callback. When the
     AJAX function above has the data it calls the 'myCallback' function
     below. The 'myCallback' function then creates the chart. */
   
   function myCallback (data)
   {
    if (document.getElementById('updates_enabled').checked)
    {
     //# Reset the canvas
     RGraph.Reset(document.getElementById('cvs'));

     //# Recreate the line graph
     var myChart = new RGraph.Line('cvs', data)
     .Set('ymax', 100)
     .Set('hmargin', 10)
     .Set('linewidth', 2)
     .Set('tickmarks', 'endcircle')
     .Set('labels', ['Julio','Richard','Jack','Kenny','Ivan','Pete','Rodrigo','Luis','Fred','John'])

     RGraph.Effects.Line.Trace2(myChart, {frames: 30});
    }
   }
     </script>
</head>
<body>
  <canvas id="cvs" width="600" height="250" style="border: 1px solid black">[No canvas support]</canvas>
</body>
</html>
// = = = E N D H T M L C O D E = = =

And because getData.php is the source of data I used the same php code as published on www.rgraph.net/docs/howto-using-ajax.html, which is:
// = = = S T A R T P H P C O D E = = =
<?php
     $data = array();

     for ($i=0; $i<10; ++$i) {
         $data[] = mt_rand(0, 99);
     }
    
     echo implode(',', $data);
?>
// = = = E N D P H P C O D E = = =
My trouble? the page loads, and I can see the border of the canvas element but nothing renders. I have tried it in different browsers. What if anything am I missing?
Posted by RGraph support on 11th December 2013
Hi there,

1. Take out the check for the "updates enabled" - get the thing working first and add fancy stuff later.

2. Take out the Trace2 effect and use a simple .Draw() call - same reason.

3. Are you getting data into the callback function? You can check by doing this:

p(data);

At the top of your callback.

4. Is your page on a webserver?AJAX won't work otherwise.



Richard, RGraph Support
Please remember to link to the RGraph website

Help support RGraph - single site license only £99
    www.rgraph.net/license#single-site
Posted by Vincent Devine on 11th December 2013
Thank you for your reply Richard.

I made the corrections suggested above and myCallback function now looks like this:
function myCallback (data)
{
  //# Added check for data
  // p(data); ~ ~ it worked! but is now commented out to avoid endless popups
 
  //# Reset the canvas
  RGraph.Reset(document.getElementById('cvs'));

  //# Recreate the line graph
  var myChart = new RGraph.Line('cvs', data)
  .Set('ymax', 100)
  .Set('hmargin', 10)
  .Set('linewidth', 2)
  .Set('tickmarks', 'endcircle')
  .Set('labels', ['Julio','Richard','Jack','Kenny','Ivan','Pete','Rodrigo','Luis','Fred','John'])
  .Draw();
}

And I want to confirm I am using an Apache development server. The good news? - Your sugesstions fixed it.

¬°Muchas Gracias!

Add a reply

 




« Back to message list
RGraph on social media