Set xmax property of a Scatter chart

Share RGraph:  

« 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 Bill on 5th February 2014
Richard,

Here is my html file...

<!DOCTYPE html>
<html>
<head>
<title>A Line Chart</title>
   <script src="RGraph.common.core.js" ></script>
   <script src="RGraph.common.key.js" ></script>
   <script src="RGraph.common.tooltips.js" ></script>
   <script src="RGraph.common.dynamic.js" ></script>
   <script src="RGraph.Scatter.js" ></script>
</head>
<STYLE type=text/css>
   BODY {margin:8px;font-family:verdana;font-size:10pt;background-color:#FFFFFF;}
   H4 {margin:5px;font-family:verdana;font-size:14pt;font-weight:normal;color:darkblue;}
   HR {margin-bottom:0px;margin-left:0px;}
   .RGraph_tooltip {background-color:yellow ! important;font-size:12pt ! important;}
}
</STYLE>
<body>

<canvas id="cvs" width="900" height="300" style="margin:0px;border:2px solid #000000;padding:20px;background-color:rgb(190,190,175);">[No canvas support]</canvas>

<script>

   window.onload = function ()
   {

     var callback = function ()
     {

       var dt;
       var num;
       var text = this.responseText.split("\n");

       var labels = [];
       var keys = new Array();
       var db = new Array();

       var buff = text[0].split(/,/);

       for (var col=0; col<18; col++) keys.push(buff[col+1].trim());
       keys.push(buff[22].trim());


       for (var i=0; i<19; i++) db[i] = new Array();

       for (var row=1; row<text.length-1; ++row)
       {
         var cells = text[row].split(/,/);

         dt = new Date(cells[0]);

         for (var i=0; i<18; i++)
         {
           num = Number(cells[i+1])/1000;
           db[i][row-1] = new Array(cells[0], num, null, cells[0]+' '+num.toFixed(1));
         }

         num = Number(cells[22])/1000;
         db[18][row-1] = new Array(cells[0], num, null, cells[0]+' '+num.toFixed(1));

         labels[row-1] = dt.toTimeString().substring(0,2);

       }

       var ib=0;
       var ie=0;
       var x=0;
       for(var i=0; i<db[0].length; i++)
       {
         if(db[0][i][0] == '2013/01/01 00:00') ib=i;
         if(db[0][i][0] == '2013/02/01 01:00') ie=i;
         if(db[0][i][1] > x) x = db[0][i][1];
       }

       if(ie == 0) ie=744;

       var scatter = new RGraph.Scatter('cvs', db[10].slice(ib,ie), 0, db[1].slice(ib,ie))
         .Set('background.color', 'white')
         .Set('background.grid.color', '#333')
         .Set('background.grid.dotted', true)
         .Set('background.grid.border', true)

         .Set('title', 'Test Graph')
         .Set('title.color', ['darkblue'])

         .Set('tickmarks', null)

         .Set('line', true)
         .Set('line.linewidth', 1)
         .Set('line.colors', ['red','green','blue'])

         .Set('colors', ['red','green','blue'])

         .Set('gutter.left', 70)
         .Set('gutter.right', 2)

         .Set('xmin', '2013/01/01 01:00')
         .Set('xmax', '2013/02/01 00:00')

         .Set('numxticks', 30)
         .Set('xlabels.count', 30)
         .Set('background.grid.autofit.numvlines', 30)

         .Set('numyticks', 7)
         .Set('background.grid.autofit.numhlines', 7)
         .Set('labels', ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'])


         .Set('tooltips.effect', 'fade')
         .Set('tooltips.coords.page', true)

         .Draw();

     }

     RGraph.AJAX('pedr2013.csv', callback);

   }

// ****************************************************************************
// ******************* END OF ON LOAD FUNCTION ********************************
// ****************************************************************************

   function setxmax()
   {
     var canvas = document.getElementById('cvs');
     RGraph.Text2(canvas, {'font': 'Arial', 'size': 10, 'x': 100, 'y': 100, 'text': 'Some text'});
     RGraph.Set(canvas, {'xmax': '2013/04/01 00:00'});
// RGraph.Set('xmax', '2013/04/01 00:00');
   }

</script>
<br>
<button onclick="setxmax();">Set xmax!</button>

</body>
</html>


I am using the AJAX call to read a csv file which is working great.

How can I structure my HTML file so that I can control the scatter graph parameters from a javascript event like a button press (seen above)?

Also, what would be the syntax to do so?

Thanks.

BF




Posted by Richard on 6th February 2014
Hi there,


Instead of:

RGraph.Set('xmax', '2013/04/01 00:00');

it should be:

myObject.Set('xmax', '2013/04/01 00:00');

Where 'myObject' is your Scatter chart object. However in your callback you create your Scatter chart object like this:

var scatter = new RGraph.Scatter('cvs', db[10].slice(ib,ie), 0, db[1].slice(ib,ie))

The 'var' at the beginning means that it's a local variable inside the 'callback' function. So it would be easiest to simply remove the 'var' keyword so that it will then be a global. Perhaps rename it too to help prevent naming clashe, eg:


myScatter = new RGraph.Scatter('cvs', db[10].slice(ib,ie), 0, db[1].slice(ib,ie))

You can then use it in your setXmax function:

function setxmax()
{
     var canvas = document.getElementById('cvs');

     RGraph.Text2(canvas, {'font': 'Arial', 'size': 10, 'x': 100, 'y': 100, 'text': 'Some text'});

     myScatter.Set(canvas, {'xmax': '2013/04/01 00:00'});
    }




Richard
Posted by Bill on 6th February 2014
Rich,

Thanks for your response; I am still struggling...

How can I:

1) Call the same drawgraph function during window.onload (page load) as well as later (after page load). After page load I want the client to be able to adjust the xmin and xmax through <input> tags or other user enterable parameters passed to the drawing function.


2) Pursuant to the above, do I have to do a RGraph.Clear and then create a new scatter graph each time or can I somehow tell the scatter graph to simply redraw itself after the underlying arrays have been modified (with new start and end values for example)?

The attached code will not display the scatter plot on window.load but does after pressing the <button> tag.

Thanks in advance!!!


<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<title>A Line Chart</title>
   <script src="RGraph.common.core.js" ></script>
   <script src="RGraph.common.key.js" ></script>
   <script src="RGraph.common.tooltips.js" ></script>
   <script src="RGraph.common.dynamic.js" ></script>
   <script src="RGraph.Scatter.js" ></script>
</head>
<STYLE type=text/css>
{
   BODY {margin:8px;font-family:verdana;font-size:10pt;background-color:#FFFFFF;}
   H4 {margin:5px;font-family:verdana;font-size:14pt;font-weight:normal;color:darkblue;}
   HR {margin-bottom:0px;margin-left:0px;}
   .RGraph_tooltip {background-color:yellow ! important;font-size:12pt ! important;}
}
</STYLE>
<body>

<canvas id="cvs" width="900" height="300" style="margin:0px;border:2px solid #000000;padding:20px;background-color:rgb(190,190,175);">[No canvas support]</canvas>

<script>

   var labels = [];
   var keys = new Array();
   var db = new Array();
   var ds1;
   var ds2;

   window.onload = function ()
   {

     RGraph.AJAX('pedr2013.csv', callback);

     drawgraph(0);

   }

// ****************************************************************************

   var callback = function ()
   {

     var dt;
     var num;
     var text = this.responseText.split("\n");

     var buff = text[0].split(/,/);

     for (var col=0; col<18; col++) keys.push(buff[col+1].trim());
     keys.push(buff[22].trim());


     for (var i=0; i<19; i++) db[i] = new Array();

     for (var row=1; row<text.length-1; ++row)
     {
       var cells = text[row].split(/,/);

       dt = new Date(cells[0]);

       for (var i=0; i<18; i++)
       {
         num = Number(cells[i+1])/1000;
         db[i][row-1] = new Array(cells[0], num, null, cells[0]+' '+num.toFixed(1));
       }

       num = Number(cells[22])/1000;
       db[18][row-1] = new Array(cells[0], num, null, cells[0]+' '+num.toFixed(1));

       labels[row-1] = dt.toTimeString().substring(0,2);

     }

   }

// ****************************************************************************

   function drawgraph(xmax)
   {

       var canvas = document.getElementById('cvs');
       RGraph.Clear(canvas);

       var ib=0; var ie=0; var imax=0;
       for(var i=0; i<db[0].length; i++)
       {
         if(db[0][i][0] == '2013/01/01 00:00') ib=i;
         if(db[0][i][0] == '2013/02/01 00:00') ie=i;
         if(db[0][i][1] > imax) imax = db[0][i][1];
       }

       ds1 = db[2].slice(ib,ie);
       ds2 = db[1].slice(ib,ie);

       var scatter1 = new RGraph.Scatter('cvs', ds1, ds2)
         .Set('background.color', 'white')
         .Set('background.grid.color', '#333')
         .Set('background.grid.dotted', true)
         .Set('background.grid.border', true)

         .Set('title', 'Test Graph')

         .Set('tickmarks', null)

         .Set('line', true)
         .Set('line.linewidth', 1)
         .Set('line.colors', ['red','green','blue'])

         .Set('xmin', '2013/01/01 01:00')
         .Set('xmax', '2013/02/01 00:00')

         .Set('numxticks', 30)
         .Set('xlabels.count', 30)
         .Set('background.grid.autofit.numvlines', 30)

         .Set('numyticks', 7)
         .Set('background.grid.autofit.numhlines', 7)
         .Set('labels', ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30'])

         .Set('tooltips.effect', 'fade')

         .Draw();

   }

</script>
<br>

<button onclick="drawgraph(0);">Set new xmax!</button>

</body>
</html>




Posted by Richard on 7th February 2014
Hi there,

1) Make your scatter chart object a global. Then you can make changes to it outside of the AJAX callback. You can make it global by removing the 'var' that's in front of it. Just remember that it then is a global - so name it something sensible to help prevent naming clashes - eg myScatter.

Ifyou want you could change the xmax and then call the window.onload function manually (so it runs again just like it does when the page loads): window.onload()

2) Yes you can do that. A clear and then a redraw does just that. RGraph has an internal 'registry' that remembers the charts. Charts are only removed from that if you call the RGraph.Reset(canvas); function.



Richard
Posted by Bill on 7th February 2014
Richard,

Thank you so much for answering my previous questions...

I am still confused. I have created an initial scatter graph that is working well but I want the client to interact with the graph by updating the xmin and xmax values. This works great except the lines extend out into the gutter area which is undesirable. My goal is to modify the array that the current scatter graph is using in conjunction with the xmin and xmax values thereby restricting lines to the limits of the background graph area. Is this possible? How can I simply tell the current scatter graph to point at the new array instead of the array passed on the original "scatter1 = new RGraph.Scatter('cvs', array_number1)" call? Is something like the following possible?


scatter1.Set('chart.data', array_number2);
scatter1.Set('chart.xmin', bdate);
scatter1.Set('chart.xmax', edate);
scatter1.Draw();



Or do I need to create a new RGraph scatter graph with all necessary parameters and do a RGraph.Clear(canvas); between calls?

Thanks for your response and patience.


Bill
Posted by Richard on 10th February 2014
Hi there,

Points that are "out of range" are hidden in the Line chart - but not the Scatter. If you have points that you don't want on the chart then you have to remove them manually. You could maintain a "master" array of all the points and then when the xmax is adjusted copy the relevant points out of that array into a new array and then use that.

If you want to just create a new chart with the new data ()it would probably be easier you could reset the canvas and then create the new chart with the new data.





Richard

Add a reply




« Back to message list