Custom mouse cursor in 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 jlost55 on 22nd April 2014
Hello,

Is it possible to create your own mouse cursor for a chart like this:

www.tacx.com/en/products/trainers/i-genius#tab_2.

I've tried with toline()-function:
www.dropbox.com/s/wwdr5y8ft3axf12/grafiek%20-%20Copy.html

(you must insert the rgraph libraries to see my chart).

I can erase my lines only to erase whole my canvas. But this is not performance.

www.dropbox.com/s/fw0gdj6dxgqqj7l/grafiek%20-%20Copy%20-%20Copy.html

How can I save my chart in Javascript or how can I delete my line in Javascript?

Posted by Richard on 22nd April 2014
Hi there,

At the start of your mousemove event you can "start afresh" by calling the RGraph.redrawCanvas() function' BTW RGraph has crosshairs that you can use - and with the Scatter chart you can also have the coords shown.






Richard
Posted by jlost55 on 22nd April 2014
What's the difference between RGraph.redraw() and RGraph.redrawCanvas()?
Posted by Richard on 22nd April 2014
Hi there,


The redraw function redraws all of the canvas tags (the RGraph related ones) on the page, whereas redrawCanvas only redraws the specified canvas - so it can be a little faster.


www.rgraph.net/canvas/docs/api.html






Richard
Posted by jlost55 on 22nd April 2014
is it possible to set your line before the graphic with RGraph?

I can see only my line on the empty part of my chart.
Posted by Richard on 22nd April 2014
Hi there,

I don't know what you mean - try putting an example online and sending the link to it.






Richard
Posted by jlost55 on 22nd April 2014
Hi,

I've now this result:
www.dropbox.com/s/ioyut8f9nmofkly/CaptureNu.PNG

You see that my line is drawing after the line bar (it's filling).

This is the result that I will: (I will my line before the line filling bar)
www.dropbox.com/s/8khqq70p7x5ys5c/CaptureResultaat.PNG

You see that the green line is drawing. It is created with MS-Paint.
Posted by Richard on 22nd April 2014
Hi there,

Instead of using the onbeforedraw event use the ondraw event:

line.ondraw = function (obj)
{
     // ...
}




Richard
Posted by jlost55 on 22nd April 2014
is it possible to use: "z-index"?

Because I will not redraw my chart with every mousemove (it is not performance because I have a lot of arrays).
Posted by Richard on 22nd April 2014
Hi there,


No - canvas drawings are not affected by CSS. You could try turning off the background grid verticals or entirely to help speed up redrawing.





Richard
Posted by jlost55 on 23rd April 2014
I'll try my best to explain what I have and what I want.

I have a static canvas and a dynamic canvas. The static canvas contains the Graph and background lines, the dynamic canvas is meant my own programmed crosshair (mousepointer) with horizontal and vertical line that accentuate the crosshair.
Why the choice of a static and a dynamic canvas?
The graph exists of 40 lines with datainput of 40 points (40 array’s with 40 items). Redrawing the graph is a heavy calculation, so it's impossible to do every mousemove. The static/dynamic canvas makes sure that only the dynamic canvas has to be redrawn.

Code
----
Creation of the graph
---------------------
function createGraphic(positive, negative, colornegative, xaxispos,gutterLeft,gutterTop)
{
            
     var x = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
         21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
         31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
         41, 42, 43, 44, 45, 46, 47, 48, 49, 50];

     var canvas = document.getElementById('myCanvas');
     var graphic = new RGraph.Line(canvas, [positive, negative])
         .set('labels', x)
         .set('numticks', 1)
         .set('ymax', 1200)
         .set('ylabels.count', 6)
         .set('fillstyle', colornegative)
         .set('colors', colornegative)
         .set('gutter.left', gutterLeft)
         .set('gutter.top', gutterTop)
         .set('filled', true)
         .set('filled.accumulative', false)
         .set('axis.color', 'blue')
         .set('tickmarks', 'null')
         .set('axesontop', true)
         .set('scale.thousand', ' ')

         .set('xaxispos', xaxispos);
     RGraph.clear(canvas);
     graphic.draw();
    
     RGraph.Register(graphic);

     var canvasdynamic = document.getElementById('myCanvasDynamic');
     var ctxdynamic = canvasdynamic.getContext("2d");
    
     graphic.canvas.onmousemove = function (e) {

         canvas.style.cursor = "crosshair";
         var obj = e.target.__object__;

         canvasdynamic.width = canvasdynamic.width;
         ctxdynamic.moveTo(e.clientX-8, 575);
         ctxdynamic.lineTo(e.clientX-8, 25);

ctxdynamic.moveTo(55, e.clientY - 125); ctxdynamic.lineTo(canvasdynamic.width - 25, e.clientY - 125);
         ctxdynamic.strokeStyle = 'green';

        if ((e.clientY > 150 && e.clientY < 704) && (e.clientX > 63 && e.clientX < 985)) {
                 ctxdynamic.stroke();
         }
     };
    
}
 
Creation of the black lines (C#)
--------------------------------
             var sb = new StringBuilder();
             sb.Append("function blackline()");
             sb.Append("{");
             for (int i = 0; i < 41; i++) //41
             {
                 sb.Append(@"var data = [");
                 for (int j = 0; j < 41; j++)
                 {
                     sb.Append(data[i, j].ToString(CultureInfo.InvariantCulture));         

                     if (j != 40)
                     {
                         sb.Append(",");
                     }

                 }
                 sb.Append(@"];");
                 sb.Append(@"
                     var line = new RGraph.Line(canvas, data)
                     var gutter_left = 55;
                     var gutter_top = 25;

                     line.context.beginPath();
            //line.context.rect(0,0,51,300)
            line.context.rect(gutter_left,gutter_top,920,550)
            line.context.clip();

                     line.set('background.grid', false)
                     .set('ylabels', false)
                     .set('tickmarks','null')");

                 sb.Append(string.Format(@".set('gutter.left', {0})
                    .set('gutter.top',{1})",GutterLeft.ToString(CultureInfo.InvariantCulture),GutterTop.ToString(CultureInfo.InvariantCulture)));
                    
                 sb.Append(@".set('outofbounds', true)
                     .set('ymax', 1200)
                     .set('noaxes', true)");

                 sb.Append(i != 21 ? ".set('colors', ['black'])" : ".set('colors', ['red'])");
                 sb.Append(string.Format(@".set('linewidth', 2)
                     .set('ymax', 1200)
         .set('xaxispos',{0})
                     .draw();", xasispos));
             }

             sb.Append("}");

             return sb.ToString();



Is it possible to redraw the dynamic canvas (mouse crosshair) in front of the graph in an efficient way? I don't want to redraw the main graph (static canvas) with every mousemove.
With the tip you gave about .ondraw and .onbeforedraw, you have to redraw the whole graph.
www.dropbox.com/s/ioyut8f9nmofkly/CaptureNu.PNG
www.dropbox.com/s/08kh0cighbhnae8/probleemmuis.png
Posted by Richard on 23rd April 2014
Hi there,

Yes you could do that. You could have two canvas tags positioned on top of each other like this:

<div style="position: relative">
   <canvas id="cvs_back" width="600" height="200"></canvas>
   <canvas id="cvs_front" width="600" height="200" style="position: absolute; top: 0; left: 0"></canvas>
</div>

Draw the Scatter chart with all the points on the back canvas, and then create another scatter chart to go on the front canvas which has the same ymax/xmax but no labels/axis/grid/points but which does have the crosshairs enabled.






Richard
Posted by jlost55 on 23rd April 2014
Thank you,

it works but I have also 1 question.

Is it possible to read the coordinates of the back canvas (graph) with a mouseover? I have only a graph on my back canvas.
Posted by Richard on 23rd April 2014
Hi there,

Np = since the mousemove event only fires on the front canvas. But if you set the same xmax/ymax on the front canvas the coordinates will be the same though. The coords.snap option won't work though.






Richard
Posted by jlost55 on 23rd April 2014
Ok, it works with a front graph

Add a reply




« Back to message list