Dynamically update Radar chart with JSON data

Share RGraph:   Share or Like RGraph on Facebook!

« 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 Ben on 14th April 2013
Hi, I am trying to update my Radar Graph using 2 lists that i am sending in a JSON.

var valueList = [[1,2,3,4,5,6,7],[8,9,10,11,12,13,14]];

However, I the graph is not returning anything. Any ideas why?

Receiver class is below.

Thanks.

<!DOCTYPE html>
<html>
<head>

   <script src="ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\"></script>
   <script src="cdn.sockjs.org/sockjs-0.3.min.js\"></script>
   <script src="js/stomp.js"></script>
   <script src="js/RGraph/libraries/RGraph.common.core.js" ></script>
   <script src="js/RGraph/libraries/RGraph.hbar.js" ></script>
   <script src="js/RGraph/libraries/RGraph.line.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.dynamic.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.tooltips.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.effects.js" ></script>
   <script src="js/RGraph/libraries/RGraph.radar.js" ></script>


   <script src="js/excanvas.js"></script>

  
   <style>

       .box
       {
           width: 220px;
           float: left;
           margin: 0 20px 0 20px;
       }

       .box div, .box input
       {
           border: 1px solid;
           -moz-border-radius: 4px;
           border-radius: 4px;
           width: 100%;
           padding: 5px;
           margin: 3px 0 10px 0;
       }

       .box div
       {
           border-color: grey;
           height: 200px;
           overflow: auto;
       }

       div code {
           display: block;
       }

       #first div code
       {
           -moz-border-radius: 2px;
           border-radius: 2px;
           border: 1px solid #eee;
           margin-bottom: 5px;
       }

       #second div
       {
           font-size: 0.8em;
       }

   </style>

   <title>RabbitMQ Web STOMP Example</title>

   <link href="main.css" rel="stylesheet" type="text/css"/>

     <h1><a href="index.html">--Receiver--</a> > Echo Server</h1>

     <div id="second" class="box">
       <h2>Logs</h2>
       <div></div>
     </div>

     <script>

         var has_had_focus = false;

         var pipe = function(el_name, send)
         {
             var div = $(el_name + ' div');
             var inp = $(el_name + ' input');
             var form = $(el_name + ' form');

             var print = function(m, p)
             {
                 p = (p === undefined) ? '' : JSON.stringify(p);
                 div.append($("<code>").text(m + ' ' + p));
                 div.scrollTop(div.scrollTop() + 10000);
             };

             return print;
         };

       //Stomp.js boilerplate
       Stomp.WebSocketClass = SockJS;

       var client = Stomp.client('http://' + window.location.hostname + ':15674/stomp');

       client.debug = pipe('#second');

       var print_first = pipe('#first', function(data)
       {
           client.send('/topic/test', {}, data);
       });



       // 7 empty slots for data
       var array = ['','','','','','',''];

       var radar2;

       var subscribeCallback = function(message)
       {
         // called when the client receives a STOMP message from the server
         if (message.body)
         {
           //Deconstruct JSON object
           var bodyObj = JSON.parse(message.body);
  
    //Print out the contents of the JSON
    if (bodyObj.together)
           {
   //console.log("got message with body " + bodyObj.together);
           //console.log("SAMPLES " + bodyObj.together.valueList);
           //console.log("valuelist2" + bodyObj.together.valueList2);

   //console.log("message body " + message.body);
    }
          
          
    //Clear the graph by ID
    RGraph.Clear(document.getElementById("cvs"));

    for(var i in bodyObj.together.valueList)
    {

     radar2.data.push(parseInt(bodyObj.together.valueList[i]));

   //set a function for a timer callback that adds the value for each value, one in 0 seconds, one in 250ms, one in 500ms
 
     //Keep the number of bars shown to 7
            if (radar2.data.length >= 7) radar2.data.splice(0,1);
       }

    //Draw the graph
           radar2.Draw();

           } else
           {
              console.log("got empty message");
           }
        
           print_first(message.body);
       };

       var on_connect = function(x)
       {
           id = client.subscribe("/topic/test", subscribeCallback);
       };

       var on_error = function()
       {
         console.log('error');
       };

       client.connect('guest', 'guest', on_connect, on_error, '/');

       $('#first input').focus(function()
       {
           if (!has_had_focus)
           {
               has_had_focus = true;
               $(this).val("");
           }
       });

       window.onload = function ()
       {
           
             radar2 = new RGraph.Radar('cvs', array);
             radar2.Set('chart.labels', ['Oldest', 'Old', '','','', '', 'Most Recent']);

                 radar2.Set('chart.background.circles.poly', true)
                 radar2.Set('chart.background.circles.spacing', 30)
                 radar2.Set('chart.colors', ['transparent'])
                 radar2.Set('chart.axes.color', 'transparent')
                radar2.Set('chart.highlights', true)
                radar2.Set('chart.strokestyle', ['red', 'black'])
                radar2.Set('chart.linewidth', 2)
                 radar2.Set('chart.linewidth', 2)
                 radar2.Set('chart.labels.axes', '7')
                 radar2.Set('chart.text.size', 16)
            
          
       }

     </script>

</head>

<body>

    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
   
    <h1>Demo Bar chart</h1>

     <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

    
   
     <p>
         <a href="./">« Back</a>
     </p>
 
</body>

</html>
Posted by RGraph support on 14th April 2013
Hi there,

The variable that should hold your data is only mentioned twice - here:

radar2 = new RGraph.Radar('cvs', array);

And here:

var array = ['','','','','','',''];

1. That's a terrible name - at least call it "myArray" or "data" or "myData".
2. It's full of strings - why? It should be numbers. If you have numbers coming from
    JSON or AJAX you can use parseInt() to make sure that they're numbers.
3. Only the latest beta supports multiple datasets as one big array - so if you're not using it it won't work.
4. So your constructor should look something like this:

var radar2 = new RGraph.Radar('cvs', [[4,6,5,3,4,8], [4,5,8,6,8,9]]);

Or this:

var dataset1 = [4,6,5,3,4,8];
var dataset2 = [4,5,8,6,8,9];
var radar2 = new RGraph.Radar('cvs', [dataset1, dataset2]);

5. Ensure you have the chart working before adding things to the code or to the chart.

Richard, RGraph Support
Posted by Ben on 15th April 2013
Richard,

I have created the array with 7 empty spaces so that when the data is pushed in it gets to the 7th element and then starts back at the beginning. I am using parseInt when I push the values of the JSON into the graph.

I have just downloaded the latest beta and my new code is below however there still seems to be an error.

Any help is appreciated.


<!DOCTYPE html>
<html>
<head>

   <script src="ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\"></script>
   <script src="cdn.sockjs.org/sockjs-0.3.min.js\"></script>
   <script src="js/stomp.js"></script>
   <script src="js/RGraph/libraries/RGraph.common.core.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.dynamic.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.tooltips.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.effects.js" ></script>
   <script src="js/RGraph/libraries/RGraph.radar.js" ></script>


   <script src="js/excanvas.js"></script>

  
   <style>

       .box
       {
           width: 220px;
           float: left;
           margin: 0 20px 0 20px;
       }

       .box div, .box input
       {
           border: 1px solid;
           -moz-border-radius: 4px;
           border-radius: 4px;
           width: 100%;
           padding: 5px;
           margin: 3px 0 10px 0;
       }

       .box div
       {
           border-color: grey;
           height: 200px;
           overflow: auto;
       }

       div code {
           display: block;
       }

       #first div code
       {
           -moz-border-radius: 2px;
           border-radius: 2px;
           border: 1px solid #eee;
           margin-bottom: 5px;
       }

       #second div
       {
           font-size: 0.8em;
       }

   </style>

   <title>RabbitMQ Web STOMP Example</title>

   <link href="main.css" rel="stylesheet" type="text/css"/>

     <h1><a href="index.html">--Receiver--</a> > Echo Server</h1>

     <div id="second" class="box">
       <h2>Logs</h2>
       <div></div>
     </div>

     <script>

         var has_had_focus = false;

         var pipe = function(el_name, send)
         {
             var div = $(el_name + ' div');
             var inp = $(el_name + ' input');
             var form = $(el_name + ' form');

             var print = function(m, p)
             {
                 p = (p === undefined) ? '' : JSON.stringify(p);
                 div.append($("<code>").text(m + ' ' + p));
                 div.scrollTop(div.scrollTop() + 10000);
             };

             return print;
         };

       //Stomp.js boilerplate
       Stomp.WebSocketClass = SockJS;

       var client = Stomp.client('http://' + window.location.hostname + ':15674/stomp');

       client.debug = pipe('#second');

       var print_first = pipe('#first', function(data)
       {
           client.send('/topic/test', {}, data);
       });



       // 7 empty slots for data
       var myData = ['','','','','','',''];
       var myData2 = ['','','','','','',''];

       var radar2;

       var subscribeCallback = function(message)
       {
         // called when the client receives a STOMP message from the server
         if (message.body)
         {
           //Deconstruct JSON object
           var bodyObj = JSON.parse(message.body);
  
    //Print out the contents of the JSON
    if (bodyObj.together)
           {
   //console.log("got message with body " + bodyObj.together);
           console.log("valueList " + bodyObj.together.valueList);
           //console.log("valuelist2" + bodyObj.together.valueList2);

   //console.log("message body " + message.body);
    }
          
          
    //Clear the graph by ID
    RGraph.Clear(document.getElementById("cvs"));

    for(var i in bodyObj.together.valueList)
    {
     radar2.data.push(parseInt(bodyObj.together.valueList[i][2]));

   //set a function for a timer callback that adds the value for each value, one in 0 seconds, one in 250ms, one in 500ms
 
     //Keep the number of bars shown to 7
            if (radar2.data.length >= 7) radar2.data.splice(0,1);

       }

    //Draw the graph
           radar2.Draw();

           } else
           {
              console.log("got empty message");
           }
        
           print_first(message.body);
       };

       var on_connect = function(x)
       {
           id = client.subscribe("/topic/test", subscribeCallback);
       };

       var on_error = function()
       {
         console.log('error');
       };

       client.connect('guest', 'guest', on_connect, on_error, '/');

       $('#first input').focus(function()
       {
           if (!has_had_focus)
           {
               has_had_focus = true;
               $(this).val("");
           }
       });

           window.onload = function ()
        {
           
              radar2 = new RGraph.Radar('cvs', [myData, myData2]);
              radar2.Set('chart.labels', ['Oldest', 'Old', '','','', '', 'Most Recent']);

                  radar2.Set('chart.background.circles.poly', true)
                  radar2.Set('chart.background.circles.spacing', 30)
                  radar2.Set('chart.colors', ['transparent'])
                  radar2.Set('chart.axes.color', 'transparent')
                  radar2.Set('chart.highlights', true)
                  radar2.Set('chart.strokestyle', ['red', 'black'])
                  radar2.Set('chart.linewidth', 2)
                  radar2.Set('chart.linewidth', 2)
                  radar2.Set('chart.labels.axes', '7')
                  radar2.Set('chart.text.size', 16)
            
          
        }

     </script>

</head>

<body>

    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
   
    <h1>Demo Bar chart</h1>

     <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

    
   
     <p>
         <a href="./">« Back</a>
     </p>
 
</body>

</html>
Posted by RGraph support on 15th April 2013
Hi there,

Check your console to see if there is an error message. Then once you've done that use static data until you get the chart up and running, for example:

myRadar = new RGraph.Radar('cvs', [4,8,6,3,5,4,2]);



Richard, RGraph Support
Posted by Ben on 15th April 2013
Hi,

The graph is showing with the correct labels, it's just that nothing's being drawn.

I am getting this in console -

[14:21:32.955] canvas: an attempt to set strokeStyle or fillStyle to a value that is neither a string, a CanvasGradient, or a CanvasPattern was ignored. @ localhost:5555/js/RGraph/libraries/RGraph.radar.js:687

Thanks.
Posted by RGraph support on 15th April 2013
Hi there,

That error is nothing to worry about. If you're still not seeing anything you could try starting afresh with one of the demo pages as a starting point. They don't have any dependencies (other than the RGraph libraries) so should work if you put them on your server and change the paths. There's also a basic example of using JSON data here:

www.rgraph.net/docs/basic-json.html

That may prove useful.



Richard, RGraph Support
Posted by Ben on 15th April 2013
Richard,

Thanks for your response. I have the set up that I have above working for bar charts and have therefore chosen to implement a line graph first as that is simpler. However, what I have so far isn't displaying the drawing of the points, only the axis.

Any ideas?

Thanks.

<!DOCTYPE html>
<html>
<head>

   <script src="ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js\"></script>
   <script src="cdn.sockjs.org/sockjs-0.3.min.js\"></script>
   <script src="js/stomp.js"></script>
   <script src="js/RGraph/libraries/RGraph.common.core.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.dynamic.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.tooltips.js" ></script>
   <script src="js/RGraph/libraries/RGraph.common.effects.js" ></script>
   <script src="js/RGraph/libraries/RGraph.line.js" ></script>


   <script src="js/excanvas.js"></script>

  
   <style>

       .box
       {
           width: 220px;
           float: left;
           margin: 0 20px 0 20px;
       }

       .box div, .box input
       {
           border: 1px solid;
           -moz-border-radius: 4px;
           border-radius: 4px;
           width: 100%;
           padding: 5px;
           margin: 3px 0 10px 0;
       }

       .box div
       {
           border-color: grey;
           height: 200px;
           overflow: auto;
       }

       div code {
           display: block;
       }

       #first div code
       {
           -moz-border-radius: 2px;
           border-radius: 2px;
           border: 1px solid #eee;
           margin-bottom: 5px;
       }

       #second div
       {
           font-size: 0.8em;
       }

   </style>

   <title>RabbitMQ Web STOMP Example</title>

   <link href="main.css" rel="stylesheet" type="text/css"/>

     <h1><a href="index.html">--Receiver--</a> > Echo Server</h1>

     <div id="second" class="box">
       <h2>Logs</h2>
       <div></div>
     </div>

     <script>

         var has_had_focus = false;

         var pipe = function(el_name, send)
         {
             var div = $(el_name + ' div');
             var inp = $(el_name + ' input');
             var form = $(el_name + ' form');

             var print = function(m, p)
             {
                 p = (p === undefined) ? '' : JSON.stringify(p);
                 div.append($("<code>").text(m + ' ' + p));
                 div.scrollTop(div.scrollTop() + 10000);
             };

             return print;
         };

       //Stomp.js boilerplate
       Stomp.WebSocketClass = SockJS;

       var client = Stomp.client('http://' + window.location.hostname + ':15674/stomp');

       client.debug = pipe('#second');

       var print_first = pipe('#first', function(original_data)
       {
           client.send('/topic/test', {}, original_data);
       });



       // 7 empty slots for data
       var myData = ['','','','','','',''];

       var line;

       var subscribeCallback = function(message)
       {
         // called when the client receives a STOMP message from the server
         if (message.body)
         {
           //Deconstruct JSON object
           var bodyObj = JSON.parse(message.body);
  
    //Print out the contents of the JSON
    if (bodyObj.together)
           {
   //console.log("got message with body " + bodyObj.together);
           console.log("valueList " + bodyObj.together.valueList);
           //console.log("valuelist2" + bodyObj.together.valueList2);

   //console.log("message body " + message.body);
    }
          
          
    //Clear the graph by ID
    RGraph.Clear(document.getElementById("cvs"));

    for(var i in bodyObj.together.valueList2)
    {
     line.original_data.push(parseInt(bodyObj.together.valueList2[i]));

   //set a function for a timer callback that adds the value for each value, one in 0 seconds, one in 250ms, one in 500ms
 
     //Keep the number of bars shown to 7
            if (line.original_data.length >= 7) line.original_data.splice(0,1);

       }

    //Draw the graph
           line.Draw();

           } else
           {
              console.log("got empty message");
           }
        
           print_first(message.body);
       };

       var on_connect = function(x)
       {
           id = client.subscribe("/topic/test", subscribeCallback);
       };

       var on_error = function()
       {
         console.log('error');
       };

       client.connect('guest', 'guest', on_connect, on_error, '/');

       $('#first input').focus(function()
       {
           if (!has_had_focus)
           {
               has_had_focus = true;
               $(this).val("");
           }
       });

           window.onload = function ()
        {
           
              line = new RGraph.Line('cvs', myData);
              line.Set('chart.labels', ['Oldest', 'Old', '','','', '', 'Most Recent']);

 
            
          
        }

     </script>

</head>

<body>

    
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
   
    <h1>Demo Bar chart</h1>

     <canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

    
   
     <p>
         <a href="./">« Back</a>
     </p>
 
</body>

</html>
Posted by Enter your name... on 15th April 2013
Hi there,

Try starting with one of the basic examples and building you page up gradually



Richard, RGraph support

Add a reply




« Back to message list