RGraph drawing API Y axis X coordinates


« 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 Emanuele on 18th March 2014
I am using RGraph.Drawing.Yaxis() to build multiple Y axis. Since the values of each scale are non-deterministic, I have to calculate the space/offset between each Y axis.
What I am doing right now is a loop containing:
newOffset=lastOffset+[(numberOfChar*10)+20]
lastOffset=newOffset

Where, "numberOfChar" is the number of charaters of the longest value of that scale (e.g. "100%" is numberOfChar= 4).

This way I can choose the right offset without wasting too much space (or not having enough) using a fixed one.
It should work fine but some time - I still do not understand why - it does not work. The result will be with some charts with some y scale values overwriting the previous Y axis.
How should I calculate the offset?
I have done some tests with Arial (default) font and Courier New (monospace!).

Thanks,
Emanuele
Posted by Richard on 18th March 2014
Hi there,

It might work if you used a fixed width font - but most fonts are not fixed width. So you can either use the canvas API function context.measureText() or there's an RGraph API function RGraph.MeasureText() too. If you use the former you need to set the size/font/bold BEFORE you measure the text. With the latter they are arguments to the function:

RGraph.MeasureText(text, bold, font, size)

The will give you the width/height - but don't use it too much as it adds an element to the DOM (it can slow down animations).






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Emanuele on 18th March 2014
To clarify, this is the result: oi59.tinypic.com/2rcmj2g.jpg when using:

     var yaxis1 = new RGraph.Drawing.YAxis('cvs',80)
     .Set('colors', ['red'])
     .Set('text.color', 'red')
     .Set('text.font', 'Courier New')
     .Set('max',175)
     .Set('min',0)
     .Set('gutter.bottom', 50)
     .Set('units.post','RPM')
.Draw();
     var yaxis2 = new RGraph.Drawing.YAxis('cvs',160)
     .Set('colors', ['orange'])
     .Set('text.color', 'orange')
     .Set('text.font', 'Courier New')
     .Set('max',25583.48)
     .Set('min',0)
     .Set('gutter.bottom', 50)
     .Set('units.post','g')
     .Set('scale.decimals',2)
.Draw();
     var yaxis3 = new RGraph.Drawing.YAxis('cvs',290)
     .Set('colors', ['green'])
     .Set('text.color', 'green')
     .Set('text.font', 'Courier New')
     .Set('max',1870.99)
     .Set('min',0)
     .Set('gutter.bottom', 50)
     .Set('units.post','g/hr')
     .Set('scale.decimals',2)
.Draw();
     var yaxis4 = new RGraph.Drawing.YAxis('cvs',370)
     .Set('colors', ['blue'])
     .Set('text.color', 'blue')
     .Set('text.font', 'Courier New')
     .Set('max',10000)
     .Set('min',0)
     .Set('gutter.bottom', 50)
     .Set('units.post','g')
.Draw();
Posted by Emanuele on 18th March 2014
Thanks for the answer, actually, I am using RGraph starting from some VB code that will generate some html+js files. So I can count the lenght of the string before printing it to the file. I don't think to need to use the .MeasureText() function.

I am already using Courier New (as you can see from the last screenshot) which is monospaced. I don't get why the orange axis overwrite the red one. Is, as I am doing, adding "10px" for each char enough?
Posted by Richard on 18th March 2014
Hi there,

Then your calculations must be off of the string length. Are you allowing for the comma and the point?




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Emanuele on 19th March 2014
I have discover that I was not counting those two. Is there any way to tell to RGraph to do not display the point to separate thousand, milions...? Will it always reflect the locale regional settings?
Thanks,
Emanuele
Posted by Richard on 19th March 2014
Hi there,

You could set both of the options:

scale.thousand
scale.point

to nothing. Eg:

obj.Set('scale.thousand', '');





Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Emanuele on 24th March 2014
Thanks, even if I have managed how to "guess" better the space needed.

Add a reply

 




« Back to message list
RGraph on social media