Y axis values on the Scatter chart


« 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 Matej Komar on 7th April 2014
Dear Rgraph,

i am working with scatter graph and i have a problem:

when i have data that are in negative values. I have a problem to draw a graph becouse i need my Y axis to have higher value in the bottom and lower on the top.

So my y axis should go from -1 -> -2 for eg. But if i use ymin = -1 and ymax = -2, my graph doesnt work.

Is there any reverse/invert attribute or option i can use?

If not is it even possible to do it?

Thank for the answer.
Posted by Richard on 7th April 2014
Hi there,

You can put the X axis in the middle. You don't need to set ymin.

obj.set('xaxispos', 'center');

There's an example of the various axis options here:

www.rgraph.net/demos/scatter-axis-options.html



Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Matej Komar on 9th April 2014
Thanks a lot for the answer,

invered labels is exactly the thing i need to do.

Is there any set for only inverted labels?

.Set(...)

Posted by Richard on 9th April 2014
Hi there,


Yes - IIRC it's:

obj.set('scale.invert', true);

And that should be fine with the X axis at the bottom or in the middle.






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Matej Komar on 9th April 2014
Thanks for answer again,

but my problem get a little bit messy.

This is a part of my code:
...
scatter = new RGraph.Scatter(canvas, [data])...
                                              
                         .Set('xmin', xmin)
                         .Set('xmax', xmax)
                         .Set('ymin', ymin)
                         .Set('ymax', ymax)
                         .Draw();

                 scatter.canvas.onmousedown = function(e)
                 {
                     var obj = e.target.__object__;
                     var x = obj.getYValue(e);
                     var y = obj.getYValue(e);


                     document.getElementById('xmin').value = x;

                     document.getElementById('ymin').value = y;


                 }...

when i use .Set('scale.invert', true), it doesnt work at all and do nothing.

If i use .Set('ylabels.invert', true) finally i will have my graph as i need it. BUT!

When i use mousedown and mouseup , it returns the values of non-inverted graph.

Can u help me?
Posted by Richard on 10th April 2014
Hi there,

That would be a bug . You can get the correct value though by doing this:

(ymax - [reported value] ) + ymin

So for example if the ymax is 10 and the ymin is 5 and you click near the top of the chart you might expect a value of something near 5, but you actually get 9.9. Then you do:

(10 - 9.9) + 5

To change it to 5.1.



My test page for this can be seen here:

dev.rgraph.net/fiddle/view/a-scatter-chart-showing-getyvalue




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Matej Komar on 11th April 2014
Thanks again,

that is exactly the solution i tried and it worked.

I have one last question.

When i use MouseDown for left/top coords and MouseUp for right/bot coords. As a zooming rectangle.

Is there any possibility to draw a rectangle with MouseMove, something like tooltip, so the rectangle doesnt really draw on canvas, but fade out just in the moment your use MouseUP?

Posted by Richard on 11th April 2014
Hi there,

You could use a DIV. You'll need the RGraph.getCanvasXY function along with the RGraph.getMouseXY function - and it will be easiest I think to use jQuery.

Oh you could also use e.pageX/Y to position the DIV too inside you events. That might be a tad easier.




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Matej Komar on 11th April 2014
Could you please show me how to use e.pageX/Y to position the DIV?
I really have no idea how to make it.

This is mine onMouseDown method:

scatter.canvas.onmousedown = function(e)
                 {
                     var obj = e.target.__object__;
                     var x = obj.getXValue(e);
                     var y = obj.getYValue(e);
                     y = (ymin + (ymax - y));


                     document.getElementById('xmin').value = x.toFixed(4);

                     document.getElementById('ymin').value = y.toFixed(4);


                 }

OnMouseUp is exactly the same just with different elements IDs.
Posted by Richard on 14th April 2014
Hi there,

Well here's an example that should enable you to get started:


dev.rgraph.net/fiddle/view/a-scatter-chart-with-a-highlight-rect



Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support
Posted by Matej Komar on 15th April 2014
Hi thanks for answer but,

i need a username and password to open that link.
Posted by Richard on 16th April 2014
Hi there,


Try this one instead:

www.rgraph.net/fiddle/view/a-scatter-chart-with-a-highlight-rect




Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!
Posted by Matej Komar on 16th April 2014
Thank you again for the fast answer,

it looks nice, but my problem is that, i need to set the height and width of the div dynamicly with my mouseMove.

The point of my work is to draw a rectangle like a zooming tool and remove it from graph asap. as i use mouseUP
Posted by Richard on 16th April 2014
Hi there,

You need to store the coordinates of the start mouse coords (the top left of the rect - it's easiest to use the CSS top/left values) and then in the mousemove event get the coordinates again of the mouse and calculate the difference. Then set the width/height of the rect to those coordinates.






Richard
www.rgraph.net
If RGraph has helped you - please share the website - thanks!

RGraph Priority Support: www.rgraph.net/support#priority-support

Add a reply

 




« Back to message list
RGraph on social media