Question

I am using the GraphView API and ive implemented the chart to be intractable. When the user touches the graph, a vertical line appears extending from the data point to the bottom of the graph.

Ive create the line in the onDraw method like so:

mDrawable = new ShapeDrawable(new RectShape());
mDrawable.getPaint().setColor(0xFF363636);
mDrawable.setBounds((int)markerX,(int) (markerY) , (int)markerX+1,  (int) height);
mDrawable.draw(canvas);

Iam using the following code, along with code to calculate the marker positions, to refresh the line in the onTouch method.

invalidate(mDrawable.getBounds());

My problem occurs when the the drawable is being moved. There tends to be a delay in refresh and the line disappears(for fractions of a second) on graph if the gesture is fast enough. The line keeps with the motion but it disappears. It seems almost like the Item is moving faster then its bounds, if that makes any sense.

I hear invalidating the entire canvas is a no-no, and invalidating the bounds of what you want change is preferred(what i’ve done above). When invalidating the entire canvas, the disappearing line phenomenon does not happen but the app does run sluggish.

I’ve some magical thing’s done with SurfaceView and surface holders but using them seems counter productive in this case. From my understanding, i would essentially be using the invalidate() method but in a different thread. Everything would still be redraw over and over which seems counter productive.

Is there another method to accomplish the effect described within GraphView library?

Answer 1

I was able to remedy this problem with a simple fix. Whenever the Screen was changed, either moved(portait mode) or touched (landscape mode), the onDraw() method is called. Although the dirty Rect method(landscape mode) was used, it still had a noticeable lag. There was also noticeable lag when scrolling the graph in a scroll view. The solution was saving the canvas to a bitmap(on the first call), storing the bitmap, and then only drawing marker after that atop of the bitmap. Whenever a viewport was changed, or different data set was added, the bitmap was nullified to draw all the data. The code

    protected void onDraw(Canvas sysCanvas) {
         canvas = new Canvas(); 

         if (bitmap != null) { 
                sysCanvas.drawBitmap(bitmap, 0,0, null); 
                drawMarker(sysCanvas); //draw whatever you want to the system canvas in a different method
                return; 
         } 


        bitmap = Bitmap.createBitmap(sysCanvas.getWidth(), sysCanvas.getHeight(), Bitmap.Config.ARGB_8888); 
        canvas.setBitmap(bitmap); 

        ///more code, draw whatever you want to canvas.
        sysCanvas.drawBitmap(bitmap,0, 0,null);
    } 

After the first run, the canvas will draw the graph. After the first pass though, the canvas just draws the bitmap and then go to a method to draw objects. These objects have x and y paramters that are set in the onTouch() method.

This method drastically improves performance. In my case, i had a graph in a scrollView( portrait mode). Whenever the scrollview moved, in either direction, the canvas was redrawn. This constant redrawing really ate resources. The same can be said for drawing the marker i had implemented(a circle that follows your finger). Since the CPU only has to redraw 2 objects, the time it takes is less causing greater performance.

Hope this helps!