Scatter chart with dynamic data


« 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 Ralph on 17th April 2013
I am trying to load scatter plots dynamically. Everything works perfectly when I use a static dataset like:
var data1 = [['2013-01-01',5.30,'red'],['2013-02-01',4.20,'red'],['2013-11-31',3.95,'red'],['2013-12-31',5.25,'red']];

But when I generate a dataset taken from the database if will not draw.
var data1 = [['2007-10-01',1.75,'red'],['2008-10-01',1.80,'red'],['2009-02-09',1.87,'red'],['2009-05-01',2.00,'red'],['2010-05-01',2.11,'red'],['2011-01-07',1.98,'red'],['2011-07-01',2.15,'red'],['2012-01-02',2.09,'red'],['2012-09-26',2.20,'red']];

Can you see where I am going wrong? I don't see it. These are the exact inputs.
Posted by RGraph support on 18th April 2013
Hi there,

There doesn't appear to be anything wrong with the data:

dev.rgraph.net/tests/scatter/scatter01.html

Are remwmbering to set the chart.xmax and chart.xmin values?




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Ralph on 18th April 2013
Yes Richard, as I mentioned, with the static data it works perfectly. When I construct the dynamically, it will not draw. The numbers, color, and dates do not make a difference in the dynamic data. The results are always the same. Do I need to cast the string into a different value?
Posted by Ralph on 18th April 2013
I have tried everything that I can think of but here is the current version of the code. I am receiving a JSON string from Ajax. This is only the current effort. I have tried many versions of this.

data1 = '[';
var jsonData = JSON.parse(res1);
   
for (var i=0; i<jsonData.length; i++) {
  var d_txt = jsonData[i];
  data1 = data1 + '[';
         var p_date = d_txt.log_recorded;
         data1 = data1 + "'" + p_date + "',";
  data1 = data1 + Number(d_txt.price).toFixed(2) + ',';
  data1 = data1 + "'red'],";
}
data1 = data1.substring(0, data1.length - 1);
data1 = data1 + ']';

Posted by RGraph support on 18th April 2013
Hi there,

You can use the p() function (which is part of RGraph) to see what your variable contains. More importantly it will show you types - and if your numbers are actually strings you'll need to convert them. For example:

dev.rgraph.net/tests/scatter/scatter01.html



Richard, RGraph Support

1 Year Priority Support now reduced to £299:
   www.rgraph.net/support
Posted by Ralph on 18th April 2013
Sorry for being such a noob, but what is the p() function and how is it used?
Posted by Ralph on 18th April 2013
Okay I used the p() function and this is what the data results in:
[['2007-07-04 00:00:00',4.95,'red'],['2008-01-01 00:00:00',5.25,'red'],['2008-06-01 00:00:00',3.95,'red'],['2009-01-01 00:00:00',6.25,'red'],['2009-08-02 00:00:00',4.85,'red'],['2010-01-04 00:00:00',5.50,'red'],['2010-07-05 00:00:00',4.50,'red'],['2011-01-03 00:00:00',6.95,'red'],['2011-07-04 00:00:00',5.75,'red'],['2012-02-09 00:00:00',7.95,'red'],['2012-08-30 00:00:00',7.50,'red'],['2012-09-14 00:00:00',7.50,'red'],['2012-09-26 00:00:00',7.00,'red']] (string, 456)
Posted by Enter your name... on 18th April 2013
Hi there,

Its much like the alert() function but also gives you type information. If your numbers are actually strings - it will tell you.



Richard, RGraph support
Posted by Ralph on 18th April 2013
Okay I have translated everything into objects like you are showing in your example. It is still not drawing.

Object {
         0 => Object {
             0 => 2007-10-01 00:00:00 (string, 19)
             1 => 1.75 (number)
             2 => red (string, 3)
         }
         1 => Object {
             0 => 2008-10-01 00:00:00 (string, 19)
             1 => 1.8 (number)
             2 => red (string, 3)
         }
         2 => Object {
             0 => 2009-02-09 00:00:00 (string, 19)
             1 => 1.87 (number)
             2 => red (string, 3)
         }
         3 => Object {
             0 => 2009-05-01 00:00:00 (string, 19)
             1 => 2 (number)
             2 => red (string, 3)
         }
         4 => Object {
             0 => 2010-05-01 00:00:00 (string, 19)
             1 => 2.11 (number)
             2 => red (string, 3)
         }
         5 => Object {
             0 => 2011-01-07 00:00:00 (string, 19)
             1 => 1.98 (number)
             2 => red (string, 3)
         }
         6 => Object {
             0 => 2011-07-01 00:00:00 (string, 19)
             1 => 2.15 (number)
             2 => red (string, 3)
         }
         7 => Object {
             0 => 2012-01-02 00:00:00 (string, 19)
             1 => 2.09 (number)
             2 => red (string, 3)
         }
         8 => Object {
             0 => 2012-09-26 00:00:00 (string, 19)
             1 => 2.2 (number)
             2 => red (string, 3)
         }
     }
Posted by RGraph support on 18th April 2013
Hi there,

That's not JavaScript code - just a representation. So if you're using that as JavaScript - it won't work. Try posting a link to the Javascript page in question.
The example page is working code:

dev.rgraph.net/tests/scatter/scatter01.html


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Ralph on 18th April 2013
What are you saying Richard? Should I be passing a string as in the first example that I gave or an object as in the example that you are giving?
Posted by RGraph support on 18th April 2013
Hi there,

I don't know what you're referring to - but there's an example of using date/time values here:

dev.rgraph.net/demos/scatter-date-time-values.html

After you get your data from JSON - ensure it is what you think it is by using the p() function.


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Ralph on 18th April 2013
Richard,
As mentioned earlier, if I use a static data entry, as you are on the linked page that you mentioned, there is no problem at all. It always displays perfectly. I need to have the data loaded dynamically. I am pulling it from the database on the server side and using Ajax to retrieve it. When it gets to the client side, in javascript, I need to enter it into rGraph in the proper format so that it will display. I am trying to ask what that format should be. An identical looking string does not work (as shown above). An object with the data in it, also does not work(as shown above). I have tried the rGraph Ajax, but the example given in the documentation is not really what I am dealing with. I need a scatter and not a line. This will need to be JSON or a similar concept in order to pass all of the data needed for a scatter. If you can give me a working example, then I can take it from there. I do not mean to monopolize your time.
Thank you,
Ralph
Posted by RGraph support on 18th April 2013
Hi there,

The example I gave you is indeed a scatter chart. And it also has the data variables seperated out so they're easier to see. Check your console for any error message - try putting your page online so I can see it.



Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Ralph on 18th April 2013
Okay one more time. I know that you are not understanding what I am trying to say. If I declare data as follows:
var data1 = [['2007-01-01',5.30,'red'],['2008-02-01',4.20,'red'],['2010-11-31',3.95,'red'],['2012-12-31',5.25,'red']];

The graph works perfectly!!!! No problems! It it fine and displays wonderfully!

If I parse the JSON data and create a string:
"[['2007-01-01',5.30,'red'],['2008-02-01',4.20,'red'],['2010-11-31',3.95,'red'],['2012-12-31',5.25,'red']]"

and then assign it to data1:
var data1 = "[['2007-01-01',5.30,'red'],['2008-02-01',4.20,'red'],['2010-11-31',3.95,'red'],['2012-12-31',5.25,'red']]";

No graph is draw. The chart is blank. No errors! No issues other than a blank chart. No javascript errors! No PHP errors! No mySQL errors!

I need to know how to bring in the data from the server (I am open to any suggestions) and draw a graph on the chart. It sounds very simple, but it is not working.
Posted by RGraph support on 18th April 2013
Hi there,

This is your problem:

> and then assign it to data1:
> var data1 = "[['2007-01-01',5.30,'red'],['2008-02-01',4.20,'red']]";

You're passing a single STRING as the data. Just because it looks like an array to you means nothing. So you can eval() the string to turn it into an array:

var data = eval('(' + "[['2007-01-01',5.30,'red'],['2008-02-01',4.20,'red']]" + ')');

Then you can use it in your constructor:

scatter = new RGraph.Scatter('cvs, data);




Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Ralph on 18th April 2013
www.woodanalytics.com
main menu - Analytics
Only product #1 is working as a dynamic data load at the moment.
Only product #2 will show the same static data loaded no matter what product you choose.
Choose wood species and you will see the p() function results.
Posted by RGraph support on 18th April 2013
Hi there,

Still a string.


Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer
Posted by Ralph on 18th April 2013
Yahoooooooooooooooooooooooo....eval worked! Thank you so much Richard. I am sorry for being such a noob and taking so much of your time.
Thank you,
Ralph
Posted by RGraph support on 20th April 2013
Hi there,

FYI - There's now four new functions coming in RGraph which should help with AJAX in future:

RGraph.AJAX.getNumber()
RGraph.AJAX.getString()
RGraph.AJAX.getJSON()
RGraph.AJAX.getCSV()


Might not help you immediately - but could save some typing in future!

Richard, RGraph Support

5 developer license with Priority support for £299:
   www.rgraph.net/license#five-developer

Add a reply

 




« Back to message list
RGraph on social media