Invert scale, tickmarks, custom Y axis labels on Scatter chart

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 Matt on 27th May 2013
Hi!
I’ve just started using R Graph to produce charts from my SQL database, it’s fantastic. I’m having a few minor issues though I was wondering if anybody had any ideas?

1) 'chart.scale.invert', 'true' does not seem to invert the scale on my scatter graph, I cant figure out why? I did find an update (www.rgraph.net/docs/release-notes-january-2013.html) which mentions RGraph.DrawYAxis() but I cant work out how to incorporate that into the code and get it to work. What’s the trick to inverting the y scale? jsfiddle.net/wnDRG/

2) scatter.Set('chart.tickmarks', 'circle') seems to be the only tickmark I can get to work. All the other tickmarks that are listed in the documentation just cause an error box to come up saying unknown tickmarks.

3) Probably the most tricky, I want to leave a gap between the bottom of my graph and 0. The obvious way I can think to do this is start the graph (ymin) at a minus number (eg -2 in my case) which causes 0 to be further up on the scale, however this means that the minus number will be on the yscale, which I don’t want. Short of making a white div and positioning it over the top of the – numbers and tickmarks on the y scale, is there some other way to get rid of them. I hope this makes sense? If not let me know and i will make an example page

Thanks in advance for any help.

Matt
Posted by RGraph support on 28th May 2013
Hi there,

1. There is no option to invert the scale on the Scatter chart. Even using the YAxis
    drawing API object - whilst you can invert that the Scatter chart itself will not
    be inverted. Though using that you could fake it it. Say you have a maximum Y
    value of 100 - to invert your Scatter chart you could take all the Y values from
    100. So a point of [365,12] (so X=365 and Y=12) would become [365, 100 - 12]. So
    larger Y values get plotted near the bottom and smaller ones at the top.

2. The tickmarks do all work

3. There's no option for a vertical margin I'm afraid.



Richard
Posted by Matt on 28th May 2013
Hello!

Thanks for the reply.

1) ah ok i will try that
2) yep ok ive managed to get that one working now. I was hoping to use custom tickmarks. is it possible to use two custom tickmarks per graph if you have two datasets ie something like :

         window.onload = function ()
  
       function myTick1 (obj, data, x, y, xVal, yVal, xMax, yMax, color)
     {
         var img = new Image();
         img.src = '../images/tickmark.png';
        
         img.onload = function ()
         {
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }

function myTick1 (obj, data, x, y, xVal, yVal, xMax, yMax, color)
     {
         var img = new Image();
         img.src = '../images/tickmark.png';
        
         img.onload = function ()
         {
             obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
         }
     }
  
         {
   
    //DATA SETS
   
       var data1 = [<?php echo($BSBP) ?>];
             var data2 = [<?php echo($BDBP) ?>];

   var scatter = new RGraph.Scatter('bp', data1, data2);
  scatter.Set('chart.ymin', 40);
         scatter.Set('chart.ymax', 210);
         scatter.Set('chart.Tickmarks', myTick1, myTick2);

I tried the above with no joy, is there a way?

3) Never mind, i will overlay a div.
Posted by Matt on 28th May 2013
Sorry, the second function should be myTick2 and second image tickmark2.png
Posted by RGraph support on 29th May 2013
Hi there,

You can check the dataset_index and/or the data_index variables. If you don't have these you may need to update:

function myTick (obj, data, x, y, xVal, yVal, xMax, yMax, color, dataset_index, data_index)
{
     // Draw your custom tick here
}



Richard, RGraph Support
Posted by Matt on 29th May 2013
Hi Richard,

Thanks for the help.

I have the latest version i think but still no joy with this (just showing myTick1 for both datasets:

         <script>
          window.onload = function ()
    {
function myTick1 (obj, data, x, y, xVal, yVal, xMax, yMax, color, dataset_index, data_index)
      {
          var img = new Image();
          img.src = 'up.png';
         
          img.onload = function ()
          {
              obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
          }
      }

function myTick2 (obj, data, x, y, xVal, yVal, xMax, yMax, color, dataset_index, data_index)
      {
          var img = new Image();
          img.src = 'down.png';
         
          img.onload = function ()
          {
              obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
          }
      }
   
         
   
       var data1 = [<?php echo($BSBP) ?>];

  var scatter = new RGraph.Scatter('bp', data1, data2);
    scatter.Set('chart.ymin', 40);
             scatter.Set('chart.ymax', 210);
             scatter.Set('chart.xmin', '<?php print($Date) ?> 00:00:00'); // Start of day
             scatter.Set('chart.xmax', '<?php print($Date) ?> 23:59:59');// End of day
             scatter.Set('chart.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']);
             scatter.Set('chart.line', true);
             scatter.Set('chart.line.linewidth', 1);
             scatter.Set('chart.line.stepped', [false,false]);
             scatter.Set('chart.line.colors', ['black', 'black']);
             scatter.Set('chart.line.shadow.color', '#999');
             scatter.Set('chart.line.shadow.blur', 10);
             scatter.Set('chart.line.shadow.offsetx', 0);
             scatter.Set('chart.line.shadow.offsety', 0);
             //scatter.Set('chart.tickmarks', 'circle');
      scatter.Set('chart.Tickmarks', myTick1, myTick2);
      scatter.Set('chart.outofbounds', true);


--

I also tried this with no success, both data sets now show myTick2

      scatter.Set('chart.Tickmarks', myTick2, 2);
      scatter.Set('chart.Tickmarks', myTick1, 1);

Am i using this right?
Posted by RGraph support on 30th May 2013
Hi there,

In your function you can check the dataset_index and use it to determine what you should draw:

if (dataset_index == 0) {

     // Draw first tick

} else if (dataset_index == 1) {

     // Draw second tick

}


Richard, RGraph Support
Posted by Matt on 30th May 2013
Damn. I have tried a hundred ways and now im back tail between legs. How do you use that in the function, im really not very used to javascript. I would have though like this but apparently not? :

I would have thought like this:

          window.onload = function ()
    {
function myTick (obj, data, x, y, xVal, yVal, xMax, yMax, color, dataset_index, data_index)
      {
    if (dataset_index == 0) {
          var img = new Image();
          img.src = 'up.png'; }
   
    else if (dataset_index == 1) {
     var img = new Image();
          img.src = 'down.png'; }
         
          img.onload = function ()
          {
              obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2));
          }
      }

  }

...

scatter.Set('chart.Tickmarks', myTick);


Thanks! Matt
Posted by Matt on 30th May 2013
sorry richard, ignore that. i left an extra } which is why it wasnt working, now working perfect!. thanks. matt
Posted by Matt on 3rd June 2013
Hi Richard,

So i decided to take your advice and see if i can fake the y scale. I want to make it so that the top tickmark is blank, then to start at the second tickmark from 0 (like here: stage.mattstubbs.co.uk/5/charts/example2.png). I think i am getting there. i have been messing around with the 'static y axis' support page to learn how to use y axis drawing api object but im still getting all '0's for my axis. Can you help me understand why?

Here is a link : stage.mattstubbs.co.uk/5/charts/example2.php?mrn=10000001&;date=2013-05-30 (graph in question is O2 FLOW (5th graph down).

Thanks again,

Matt
Posted by RGraph support on 3rd June 2013
Hi there,

What's this:

yaxis.Set('0,1,2,3,4,5,6,7')

?

I guess you might mean this:

yaxis.Set('chart.min', 0);
yaxis.Set('chart.max', 7);

Then you could add this:

yaxis.Set('chart.scale.invert', true);

But for the vertical margin this may work:

yaxis.Set('chart.gutter.top',50);

Though it may not.

Richard
Posted by Matt on 4th June 2013
Fantastic thanks Richard that worked well. Well done for reading my mind with the chart.min and max as well that's exactly what i was trying to do. My last conundrum is how to change the number of ylables. I just want to display 3. I would have though just use yaxis.Set('chart.ylabels.count', 3) or scatter.Set('chart.ylabels.count', 3); but no matter what i do the number stays the same. Any ideas how to change this?

Thanks again, Matt

    var scatter = new RGraph.Scatter('o2flow', data6);
    scatter.Set('chart.ymin', 90);
             scatter.Set('chart.ymax', 102);
             scatter.Set('chart.xmin', '<?php print($Date2) ?> 00:00:00'); // Start of day
             scatter.Set('chart.xmax', '<?php print($Date2) ?> 23:59:59');// End of day
             scatter.Set('chart.labels', ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23']);
             scatter.Set('chart.line', true);
    //scatter.Set('tooltips.coords.page', true);
             scatter.Set('noxaxis', true);
             scatter.Set('noyaxis', true);
             scatter.Set('ylabels', false);
             scatter.Set('chart.line.linewidth', 1);
             scatter.Set('chart.line.stepped', [false]);
             scatter.Set('chart.line.colors', ['black']);
             scatter.Set('chart.line.shadow.color', '#999');
             scatter.Set('chart.line.shadow.blur', 10);
             scatter.Set('chart.line.shadow.offsetx', 0);
             scatter.Set('chart.line.shadow.offsety', 0);
             scatter.Set('chart.tickmarks', 'circle');
    scatter.Set('chart.tooltips.hotspot', 25);
    scatter.Set('chart.outofbounds', true);
    scatter.Set('chart.background.grid.vlines', true);
    scatter.Set('chart.background.grid.autofit', true);
    scatter.Set('chart.background.grid.autofit.numhlines', 7);
    scatter.Set('chart.background.grid.autofit.numvlines', 24);
    //scatter.Set('chart.numyticks', 3);
    //scatter.Set('chart.ylabels.count', 3);
    scatter.Set('chart.background.hbars', [[95, 5, 'rgba(225,225,0,0.25)'], [90, 5, 'rgba(225,116,0,0.25)']]);
             scatter.Draw();
   
       var yaxis = new RGraph.Drawing.YAxis('axes', 22);
             yaxis.Set('chart.min', 0);
    yaxis.Set('chart.max', 10);
    yaxis.Set('chart.scale.invert', true);
             yaxis.Set('chart.colors', ['black']);
    yaxis.Set('chart.gutter.top',50);
    yaxis.Set('chart.numyticks', 3);
    yaxis.Set('chart.ylabels.count', 3);
             yaxis.Draw();
Posted by RGraph support on 4th June 2013
Hi there,

Close, but the property that controls the number of labels shown is called chart.numlabels. The API docs page for the Y axis object is here:

www.rgraph.net/docs/drawing-api-yaxis.html


Richard
Posted by Matt on 6th June 2013
Fantastic, thanks
Posted by RGraph support on 6th June 2013
Hi there,

!

Thanks.



Richard, RGraph support
Posted by Matt on 9th June 2013
Of course!

Add a reply




« Back to message list