MPAndroidChart set center vertical line

Question

I want to set a vertical line in center of LineChart like this:

When scrolling to each point, it can notify to change the date below (the orange date field). And it can move left or right programmatically by click on arrow button.

Currently, I can set viewport and allow moving to center with this code:

LineData data = new LineData(xVals, dataSets);
mChart.setScaleMinima((float) data.getXValCount() / 7f, 1f);
mChart.moveViewTo(0, 7, YAxis.AxisDependency.LEFT);

And get the result:

How can I draw and set a vertical line like above?

Update:

For the listener, I think OnChartGestureListener onChartTranslate(MotionEvent me, float dX, float dY) may help. What I need is the distance between 2 points and how to calculate how many points are in current view port. Does anyone know that?

@activesince93 how to make it center and how I know when each node scrolls to this line with this way? — ductran, Nov 19 '15 at 14:39
How to detect whether the graph finished scrolling. I am not asking about the end of the graph. When we scroll, how can we detect that the scrolling of the graph is finished ? — Kanagalingam, Jan 02 '19 at 11:54
@Kanagalingam you should read the wiki https://github.com/PhilJay/MPAndroidChart/wiki/Interaction-with-the-Chart Try to debug to find out, it could be `onChartGestureEnd` or `onChartTranslate`, as I remember — ductran, Jan 02 '19 at 12:11
@R4j Thanks, onChartGestureEnd gets called when we take the finger out from the graph and onChartTranslate gets called even after the scroll gets finish. I am stuck on that. I want to get the visible ViewPortHandler values once the scroll event ends. Any ideas would be really helpful — Kanagalingam, Jan 02 '19 at 12:22
@Kanagalingam I think you can use handler to post delay in one of these events — ductran, Jan 02 '19 at 12:52
@R4j, i have already tried it. But its not accurate. Can you KT on how you managed to get the visible ViewPortHandler values after the chart scrolls? — Kanagalingam, Jan 02 '19 at 12:56
@Kanagalingam This is what i did. I delay 500ms before check visibility — ductran, Jan 02 '19 at 13:33
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/186059/discussion-between-kanagalingam-and-r4j). — Kanagalingam, Jan 02 '19 at 16:53

score 6 · Accepted Answer · answered Dec 03 '15 at 20:15

6

Have you tried using getEntryByTouchPoint on your chart supplying the x and y coordinates of the center of the chart?

public Entry getEntryByTouchPoint(float x, float y)

returns the Entry object displayed at the touched position of the chart

answered Dec 03 '15 at 20:15

Cory Charlton

8,868
4
48
68

I combined this method with `onChartTranslate` event and it worked. But it's wrong when I tried to scroll to the first and last entry. These entries can't be moved to center line, but getEntryByTouchPoint still return them – ductran Dec 07 '15 at 14:01
@R4j the only option I could think of in that case would be to add "fake" or empty `Entry`s or xVals without entries before the first real data point and after the last. See this post for an example: http://stackoverflow.com/questions/33619679/make-line-chart-with-values-and-dates/33619941#33619941 – Cory Charlton Dec 08 '15 at 17:19

score 5 · Answer 2 · answered Nov 30 '15 at 16:19

5

Take a look at the method

protected void drawGridBackground(Canvas c) {

in the BarLineChartBase class (parent for a LineChart). In that method you have all data to draw your line right in the middle. Something like this

RectF rectF = mViewPortHandler.getContentRect();
float xMiddle = (rectF.right - rectF.left)/2;
Paint p = new Paint();
p.setColor(Color.BLACK);
c.drawLine(xMiddle, rectF.bottom, xMiddle, rectF.top, p);

answered Nov 30 '15 at 16:19

Lanitka

922
1
10
20

Thank you. This line is drawn below the point chart instead of above. And the big problem is I don't know how to listen when scrolling points over this vertical line. Do you have any suggestion? – ductran Dec 01 '15 at 06:13
If you need to draw a line below the data, you can do it in method renderGridLines(Canvas c) in XAxisRender class. Just add code above to the end of the method.. Can't answer the other part of your question (about listener). If I find the answer - I'll write you. – Lanitka Dec 01 '15 at 09:30

score 3 · Answer 3 · answered Mar 17 '17 at 08:43

Maybe it's too late but here is my answer. It's encoded in Swift using Charts (MPAndroidCharts port for iOS) but API is 99% the same ;)

let verticalPointEntry = ChartDataEntry(x: xValue, y: yValue)

let dataSet = LineChartDataSet(values: [verticalPointEntry], label: "")
dataSet.drawCirclesEnabled = false
dataSet.drawValuesEnabled = false
dataSet.setDrawHighlightIndicators(true)
dataSet.drawHorizontalHighlightIndicatorEnabled = false
dataSet.highlightColor = UIColor.white
dataSet.highlightLineWidth = 1   

let highlightPoint = Highlight(x: xValue, y: yValue, dataSetIndex: datasetIndex)
self.highlightValues([highlightPoint])

// "yourNormalDataSet" is your regular dataSet in which you want to display vertical line over it
let chartData = LineChartData(dataSets: [yourNormalDataSet, dataSet])
self.data = chartData
self.data?.notifiyDataChanged()
self.notifyDataSetChanged

This will display a vercital line over the point defined by your xValue variable.

Hope it helps!

MPAndroidChart set center vertical line

3 Answers3

Linked