Close ??? show incorrect custom tickmarks in small canvases

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 10th June 2013
Hello!

So I have another tricky one…

I made a chart using multiple custom tickmarks (22 to be exact!). I have discrete data in whole numbers from 0 to 22 and I wanted to display on the chart the actual number (y value) as a tickmark. I did this by making a tickmark image of the number (with a coloured box around it), and then used yVal part of function to specify which image to use.

It all works nicely if the chart canvas is large so that there is no overlap of the tickmarks, however with small canvas sizes where the tickmarks overlap in the x plane, it sometimes shows the wrong tickmark. Is there some way to configure the size of the tickmark that the RGraph notices so that I can use a small canvas size, without RGraph showing the wrong tickmarks? I hope that makes sense?

I have made an example as below. In example.php the canvas is large so it works as it should. examplea.php uses the exact same data array but you can see that it occasionally displays the wrong tickmark (eg tickmark 2 is displayed for yVal 2 and 3)

www.stage.mattstubbs.co.uk/5/charts/example5a.php?mrn=10000001&date=2013-06-09
www.stage.mattstubbs.co.uk/5/charts/example5b.php?mrn=10000001&date=2013-06-09

Thanks in advance for any help with this,

Matt
Posted by RGraph support on 11th June 2013
Hi there,

There's nothing to dynamically resize images I'm afraid.




Richard, RGraph Support
Posted by Matt on 11th June 2013
Ah, ok thats a shame. Is there a way to force all the tooltips to be open (ie not just with mouseover) +/- change tooltip div background colour depending on yVal? Maybe i could achieve a similar effect by using tooltips and making the tickmarks 1x1px blank images?

Cheers,

Matt
Posted by RGraph support on 12th June 2013
Hi there,

There's no option for it - though you might be able loop through all the tooltips/coords once the chart has been drawn. For the background color you could use the ontooltip function in conjunction with the getYValue() method (or the equivalent)




Richard, RGraph Support
Posted by Matt on 12th June 2013
Ah ok thanks. My javascript isn't very good- presumably that means start a separate <script> towards the end of the page, below the <canvas>. What should the code look like? Thanks again for the help Richard, Matt.
Posted by RGraph support on 13th June 2013
Hi there,

For the background color you would use the tooltip method.


Richard
Posted by Matt on 13th June 2013
Ahhh...ok I follow you, thank you that makes sense to me now. Thanks very much for that. You mentioned looping through all of the tooltips in order to display them without mouseover? How do i do that?
Posted by RGraph support on 13th June 2013
Hi there,

Actually I've had a quick look at it's not feasible with the Scatter chart due to the event object being necessary.



Richard, RGraph support
Posted by Matt on 15th June 2013
Ah ok. what about line charts? are there any chart types that would be able to do it that can also plot time on the x axis? Cheers, Matt
Posted by RGraph support on 15th June 2013
Hi there,


Afraid not - the Line chart doesn't do an X axis scale - just the Scatter.


Richard, RGraph support
Posted by Matt on 18th June 2013
Humm… ok, what about using the X,Y,colour,tooltip array. Would it be possible to exchange the colour for a background image somehow and then make the tickmark an empty box big enough to display the image. It looks like the reason the custom tickmarks doesn’t work is because it relies on the y value, so if those overlap the size of the tickmark then it causes the wrong one to be displayed. However, this way is independent of the x value, I can put (for example) :

var data1 = ['2013/05/30 13:50:28', 50, ‘blue','This tickmark is blue and the y value is 50'], ['2013/05/30 15:52:38', 50, 'red', This tickmark is red, and the y value is still 50'];

This will display correctly with one read and one blue circle tickmark even though the y value is the same for both.

Is there some way to do this perhaps, by replacing colour for image?

Cheers, thanks for the help.

Matt
Posted by RGraph support on 19th June 2013
Hi there,

I have no idea what you're trying to achieve - what are your asking?




Richard, RGraph Support
Posted by Matt on 19th June 2013
Hi Richard,

My aim is to display values for ‘score’ (discrete numbers from 0-17) against time. I would like to plot these all as the same value on the x axis (so rather than a chart, it would look more like a table row).

I want it to look something like stage.mattstubbs.co.uk/5/charts/example6.png

I have tried various methods using RGraph to do this but no luck yet. One way that I thought of that might work is to use a scatter graph, and plot all the points as the same x value, against time (y value), using tooltips to display the ‘score’ value for each point (and then changing the style of the tooltips so that they don’t look like tooltips). However, this would mean displaying all of the tooltips to the user at the same time, rather than just on mouseover (which I gather is not possible to do?).

The next way though of is to use custom tickmarks, but rather than a colour (which can be set in the data array), use an image as their background. This means I could use images of the score numbers to achieve a similar effect. This relies on the idea that the background colour of the tooltips can be exchanged for an image, which I guess is really my main question, can this be done? Eg:

If at 2013/05/30 13:50:28 the score was 5
And at 2013/05/30 14:50:28 the score was 9

then i would use an array like this:

var data1 = ['2013/05/30 13:50:28', 10, ‘image_for_score_of_5'], ['2013/05/30 14:50:28', 10, 'image_for_score_of_9'];

(10 is an entirely arbitrary value for x, it doesn’t matter as all the x vlues are the same, to get the numbers to align horizontally).

I hope that this makes sense now, it’s quite tricky to explain what im trying to achieve.

Thanks very much for your help with this, I really do greatly appreciate it.
Matt
Posted by RGraph support on 19th June 2013
Hi there,

1. You appear to be mixing up the X and Y axes. The X axis is horizontal and the Y axis is vertical. So if all the Y values are the same you get a horizontal line.

2. Your URL doesn't show any horizontal lines.

3. I would use the drawing API text object and the coords array to draw the text. But there's no automatic sizing.


Richard, RGraph support
Posted by Matt on 20th June 2013
Hi Richard,

In reply,

1. Yes, you are correct there. Sorry, it was a long day yesterday!

2. I should explain, i was only interested in the top canvas, which displayed a horizontal line of numbers (scores)

3. Ah ha! this looks promising, i hadn't considered using this. I think i would be able to achieve what i am trying to do using the API text object and then hiding the line and tickmarks. The only issue is i want to draw a variable number of text objects per graph, depending on the number of data sets (variable, passed from php). The obvious way to do this would be using an array like this:


             var data = [10,20,'Sample text 1', 30,40,'Sample text 2'];
   
             var text = new RGraph.Drawing.Text('cvs', data)
                 .Set('valign', 'top')
                 .Set('font', 'Verdana')
                 .Set('size', 22)
                 .Set('bounding', true)
                 .Draw();


However (sadly) this does not work, and this only displays the first text box:

var text = new RGraph.Drawing.Text('cvs', 10,20,'Sample text 1', 30,40,'Sample text 2')

Is there some way to display a variable number of text boxes?

Thanks very much in advance for any reply.
Posted by RGraph support on 21st June 2013
Hi there,

You need to use one text object for each piece of text that you want to display. The docs for the text object are here:

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





Richard, RGraph Support
Posted by Matt on 21st June 2013
Ok thanks Richard,

I think i have worked out a way to do it, but it relies on the API text object working for scatter graphs with datetime x axis. Sadly this does not appear to be the case as i have tried it but i get no text object on the graph. This is what i have, would you expect it to work for datetime x axis?

          var scatter = new RGraph.Scatter('par', data1);
    scatter.Set('chart.ymin', 0);
             scatter.Set('chart.ymax', 50);
             scatter.Set('chart.xmin', '2013/06/20 00:00:00'); // Start of day
             scatter.Set('chart.xmax', '2013/06/20 23:59:59');// End of day
             scatter.Set('chart.line', true);
             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', 0);
    scatter.Set('chart.background.grid.autofit.numvlines', 24);
    scatter.Set('chart.numyticks', 2);
    scatter.Set('chart.ylabels.count', 0);
    scatter.Set('chart.numxticks', 0);
             scatter.Draw();
   
         var text = new RGraph.Drawing.Text('par','2013/06/20 21:14:37',30,'Sample text2!')
                 .Set('valign', 'top')
                 .Set('font', 'Verdana')
                 .Set('size', 22)
                 .Set('bounding', true)
                 .Set('tooltips', ['An example tooltip!'])
                 .Draw();
Posted by RGraph support on 24th June 2013
Hi there,

> var text = new RGraph.Drawing.Text('par','2013/06/20 21:14:37',30,'Sample text2!')

What's that?





Richard, RGraph Support
Posted by Matt on 24th June 2013
Hi Richard,

Its:

var text = new RGraph.Drawing.Text('cvs', x, y, 'An example of the drawing API text object')

The canvas name is 'par', x value is a datetime value (on scatter graph - see chart.xmin and chart.xmax above), y value is 30, 'Sample text 2' is some text to write.

Have i formatted this wrong somehow?

Thanks again,

Matt
Posted by RGraph support on 25th June 2013
Hi there,

The drawing API text object doesn't support using dates as X values - so you'll need to do something like this in conjunction with your Scatter object:

var msec = Date.parse('2013/06/20 21:14:37');
var x = scatter.getXCoord(msec);
var y = 30;

var text = new RGraph.Drawing.Text('cvs', x, y, 'An example of the drawing API text object')

// ...





Richard, RGraph Support
Posted by Matt on 25th June 2013
Hi Richard,

Thanks for that advice. Unfortunately i can't seem to get that to work. I set up a new chart for testing purposes to make sure it wasn't somehow interacting with any of the other elements on the page but still no joy. This should work no?:

        <script>
          window.onload = function ()
    {
   
    //DATA SET
 
    var data = [['2013/06/25 07:08:45',1, 'rgba(1,0,0,1)', 'tooltip1'], ['2013/06/25 19:09:30',9, 'rgba(1,0,0,1)', 'tooltip2'],];
   
  
    //PAR GRAPH DETAILS
   
      var scatter = new RGraph.Scatter('par', data);
             scatter.Set('chart.ymin', 0);
             scatter.Set('chart.ymax', 10);
             scatter.Set('chart.xmin', '2013/06/25 00:00:00'); // Start of day
             scatter.Set('chart.xmax', '2013/06/25 23:59:59');// End of day
             scatter.Set('chart.line', true);
             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', 0);
      scatter.Set('chart.background.grid.autofit.numvlines', 24);
      scatter.Set('chart.numyticks', 0);
      scatter.Set('chart.ylabels.count', 0);
      scatter.Set('chart.numxticks', 0);
             scatter.Draw();
   
   
    var msec = Date.parse('2013/06/25 21:14:37');
    var x = scatter.getXCoord(msec);
    var y = 5;

    var text = new RGraph.Drawing.Text('par', x, y, 'An example of the drawing API text object')
                 .Set('valign', 'top')
                 .Set('font', 'Verdana')
                 .Set('size', 22)
                 .Draw();

    }
       </script>

I have also put up an example:

stage.mattstubbs.co.uk/5/charts/example7.php

Thanks again for your help with this Richard,

Many thanks.

Matt
Posted by RGraph support on 26th June 2013
Hi there,

If you use a JavaScript console you'll see the error. In Chrome you can press CTRL+SHIFT+J to get it up - then click Console:

www.rgraph.net/docs/howto-debugging-with-chrome.html





Richard, RGraph Support
Posted by Matt on 27th June 2013
Ah ha! I didn't know about that feature in Chrome. Very useful, thanks.

Matt

Add a reply




« Back to message list