Draw a Line in aChartEngine

Question

I would like to have a vertical cursor show up at the location where i touch the chart area. a textview that is associated with this line would display the value of the bar the y-axis value of the point in it. and when i move my finger to the left of the right while keeping my finger down [left-move or right-move], this vertical cursor would then move accordingly and the textview would follow as well but displaying the y-axis value at the new location(s) as it moves.

I see that the GraphicalView has a touchlistener that i can register to get callbacks - but i am clueless how to use that from that point onwards. I can manage to associate the touchevent to some sort of gesturelistener as well. But how do i draw the vertical cursor line that overlays goes on top of the current chart?

Other problem that I have is , in the onTuuch when return a true I cannot get the values of mChart.getCurrentSeriesAndPoint(); , always return Null, but if I change the return to False I can get the values but I cannot access again to the ontuch.

This is my code

    mChart.setOnTouchListener(new View.OnTouchListener() {
               @Override
               public boolean onTouch(View v, MotionEvent event) {
                   if (event.getAction() == MotionEvent.ACTION_CANCEL) {

                       dataset.removeSeries(dataset.getSeriesCount()-1);
                       multiRenderer.removeSeriesRenderer(GraficaCuatro);
                    }
                    if (event.getAction() == MotionEvent.ACTION_DOWN) { 
                        multiRenderer.setPanEnabled(false);
                        multiRenderer.setZoomEnabled(false);
                        SeriesSelection seriesSelection = mChart.getCurrentSeriesAndPoint();


                           if(seriesSelection != null)
                           {
                               Toast.makeText(
                                        getActivity().getBaseContext(),"Hola",
                                        Toast.LENGTH_SHORT).show();
                           }
                        XYSeries Line = new XYSeries("");
                        Line.add(event.getX()/1.5,minValue);
                        Line.add(event.getX()/1.5,maxValue);
                        dataset.addSeries(Line);    
                        multiRenderer.addSeriesRenderer(GraficaCuatro);
                    }
                    if (event.getAction() == MotionEvent.ACTION_MOVE) {

                           dataset.removeSeries(dataset.getSeriesCount()-1);
                           multiRenderer.removeSeriesRenderer(GraficaCuatro);
                           XYSeries Line = new XYSeries("");
                           Line.add(event.getX()/1.5,minValue);
                           Line.add(event.getX()/1.5,maxValue);
                           dataset.addSeries(Line); 
                           multiRenderer.addSeriesRenderer(GraficaCuatro);

                    }
                       if (event.getAction() == MotionEvent.ACTION_UP) {

                           dataset.removeSeries(dataset.getSeriesCount()-1);
                           multiRenderer.removeSeriesRenderer(GraficaCuatro);
                        }
                   mChart.repaint();
                  return true;
               }
            });

i Would like this exactly.

_{(source: subirimagenes.com)}

Please i need help !

EDIT: This is my onTouch code, when i return True; in onTouch, the values from toRealPoint(); and SeriesSelection are incorrect, if i change true to false i can get the real values. Help please

            mChart.setOnTouchListener(new View.OnTouchListener() {
               @Override
               public boolean onTouch(View v, MotionEvent event) {
                   SeriesSelection seriesSelection = mChart.getCurrentSeriesAndPoint();
                   double[]values = mChart.toRealPoint(0);
                   if(seriesSelection != null)
                   {
                       if (event.getAction() == MotionEvent.ACTION_CANCEL) {
                           dataset.removeSeries(dataset.getSeriesCount()-1);
                           multiRenderer.removeSeriesRenderer(GraficaCuatro);
                        }
                       if (event.getAction() == MotionEvent.ACTION_DOWN) {

                           XYSeries Line = new XYSeries("");
                           Line.add(seriesSelection.getXValue(),minValue);
                           Line.add(seriesSelection.getXValue(),maxValue);
                           dataset.addSeries(Line); 
                           multiRenderer.addSeriesRenderer(GraficaCuatro);
                       }
                       if (event.getAction() == MotionEvent.ACTION_MOVE) {

                           dataset.removeSeries(dataset.getSeriesCount()-1);
                           multiRenderer.removeSeriesRenderer(GraficaCuatro);
                           XYSeries Line = new XYSeries("");
                           Line.add(seriesSelection.getXValue(),minValue);
                           Line.add(seriesSelection.getXValue(),maxValue);
                           dataset.addSeries(Line); 
                           multiRenderer.addSeriesRenderer(GraficaCuatro);
                    }
                       if (event.getAction() == MotionEvent.ACTION_UP) {

                           dataset.removeSeries(dataset.getSeriesCount()-1);
                           multiRenderer.removeSeriesRenderer(GraficaCuatro);
                        }
                   }

                   mChart.repaint();
                  return true;
               }
            });

Dan D. · Accepted Answer · 2013-02-14T19:16:12.793

1

In order to draw the vertical cursor, you will have to add an extra series of vertical points added to your chart.

The chart.getCurrentSeriesAndPoint() will return you the stuff that is the closest to the point you touched the screen under a selectable buffer. So, you need to touch the screen close to an existing point such as it returns you something. However, you can set the selectable buffer to any value you want:

renderer.setSelectableBuffer(100);

In order to listen for touch events on your chart, register like this:

chartView.setOnClickListener(...);

For some working code, check the official AChartEngine demo, this piece will help you.

Update: Another option would have to handle the touch yourself and search through the series to find the closest point. You can use chartView.toRealPoint() to retrieve the real data point from a screen point.

edited Feb 14 '13 at 19:16

answered Feb 14 '13 at 18:16

Dan D.

32,246
5
63
79

Thanks Dan. The onClick event doesnt work for me because I need to obtain the values while Im touching the screen and moving my finger around it. That's why I'm using the onTouchListener, the problem is that on the event "getCurrentSeriesAndPoint()" only returns values with the line "return false;" but in that case it only works one time. If I change the line for "return true;" it seems to work everytime but it never returns values. – SairSalazar Feb 14 '13 at 19:02
CODE EXAMPLE: mChart.setOnTouchListener(new View.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) { SeriesSelection seriesSelection = mChart.getCurrentSeriesAndPoint(); } return true; } }); – SairSalazar Feb 14 '13 at 19:02
Thanks again Dan, now Iam working on and it work well, already I can get the Y-value in mChart.getCurrentSeriesAndPoint(); ... the only thing is that the X-value is always 0.0 ... I will apreciate if you can help me with that ... Iam sorry to disturving you but I really need finish this project. Savid. – SairSalazar Feb 15 '13 at 00:00

score 0 · Answer 2 · answered Apr 10 '13 at 15:17

Im use this

         mChart = (GraphicalView) ChartFactory.getLineChartView(getActivity().getBaseContext(), dataset, multiRenderer);
        mChart.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                MotionEvent motionEvent = MotionEvent.obtain(
                        event.getDownTime(), 
                        event.getEventTime(), 
                        MotionEvent.ACTION_DOWN, 
                        event.getX(), 
                        event.getY(), 
                        event.getMetaState()
                        );
                mChart.onTouchEvent(motionEvent);
                double[]values = mChart.toRealPoint(0);
                for(int i = 0; i < dataset.getSeriesCount(); i++)
                {
                    try
                    {
                        if((int)values[0] < dataset.getSeriesAt(i).getItemCount())
                        {
                            //float value = (float) dataset.getSeriesAt(i).getY((int)values[0]);
                            //Log.d("", "");
                        }
                    }
                    catch (Exception e) {
                        // TODO: handle exception
                    }
                }
                if (event.getAction() == MotionEvent.ACTION_CANCEL) {
                    dataset.removeSeries(dataset.getSeriesCount()-1);
                    multiRenderer.removeSeriesRenderer(GraficaCuatro);
                }
                if (event.getAction() == MotionEvent.ACTION_DOWN) {
                    XYSeries Line = new XYSeries("");
                    Line.add(values[0],minValue);
                    Line.add(values[0],maxValue);
                    dataset.addSeries(Line);    
                    multiRenderer.addSeriesRenderer(GraficaCuatro);
                }
                if (event.getAction() == MotionEvent.ACTION_MOVE) {

                    dataset.removeSeries(dataset.getSeriesCount()-1);
                    multiRenderer.removeSeriesRenderer(GraficaCuatro);
                    XYSeries Line = new XYSeries("");
                    Line.add(values[0],minValue);
                    Line.add(values[0],maxValue);
                    dataset.addSeries(Line);    
                    multiRenderer.addSeriesRenderer(GraficaCuatro);

                }
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    dataset.removeSeries(dataset.getSeriesCount()-1);
                    multiRenderer.removeSeriesRenderer(GraficaCuatro);
                }

                mChart.repaint();
                return true;
            }
        });

Draw a Line in aChartEngine

2 Answers2