Synchronized charts or multiple charts like Highcharts in Android

Question

How could we achieve Synchronized charts in Android.

For my web page I've used Highcharts API. Is there any similar thing for Android. I've checked various libraries mentioned here but didn't find any which will match the requirement.

I don't want combined charts like this and this. I'm looking for Synchronized charts.

Is there any library which will meet the requirement or Should I go with webView (It's a worst case for me)

Is it possible with MPAndroidChart?

EDIT:

Resultant chart should be like the Charts given in highcharts page

Sample:

UPDATE

Motto is not just to draw the 3 charts. The Aim is to synchronize them. Synchronise means all the 3 charts have same x-axis(values), on click at any point in these charts the plot at that particular point should be highlighted in all the charts. I'm sure I didn't explain it properly. Kindly check this link and hover the graph

Answer 1

when clicked on chart 1 get the X and Y points and highlight them on chart 2. Same with 2nd chart.

    lineChart1.setOnChartValueSelectedListener(new OnChartValueSelectedListener()
    {
        @Override
        public void onValueSelected(Entry e, Highlight h)
        {
            lineChart2.highlightValue(e.getX(),e.getY(),0,false);
        }

        @Override
        public void onNothingSelected()
        {
        }
    });


    lineChart2.setOnChartValueSelectedListener(new OnChartValueSelectedListener()
    {
        @Override
        public void onValueSelected(Entry e, Highlight h)
        {
            lineChart1.highlightValue(e.getX(),e.getY(),0,false);
        }

        @Override
        public void onNothingSelected() {
        }
    });

NOTE set the last argument to false so that it doesn't call the listener again and again. If this is not set then it results to deadlock.

Answer 2

The sample app has a good display of the features available to you "out of the box" with MPAndroidChart.

As you can see, there is an example of multiple charts inside a ListView which seems to be close to your requirement.

Likewise, the source code is available on GitHub for you to inspect and see if it has the available classes and methods for you to do what you want out of the box.

At the same time, you should understand that it is often unrealistic to expect to find a library that will exactly suit an unusual requirement from mere configuration alone. Free and open source libraries often provision for extension and customisation and MPAndroidChart is no exception. As a professional software engineer, or as an aspiring one, you should be willing and prepared to program that yourself.

In your particular case, it seems you want some kind of co-ordination between the charts. So if you click on one of them then the MarkerView appears on all at the same xIndex in the DataSet.

To attempt this, you would start by looking at the code for OnChartGestureListener. A solution can be obtained through using event-driven programming. You would set up 3 implementations of OnChartGestureListener which would use events to transmit the current gesture to a mediator who then triggers the same gestures on the other two charts. For example, inside OnChartGestureListener there is a method to implement called:

void onChartScale(MotionEvent var1, float var2, float var3);

Your implementation would look something like this:

@Override
void onChartScale(MotionEvent var1, float var2, float var3) {
    //transmit event to mediator 
    //handle event for this chart
}

If this is too difficult then you will have to stick with Highcharts inside a WebView as you have cogently suggested yourself. However, be aware that the performance inside the WebView will not be as good as using a library that renders to canvas directly.

In short, it is possible, although difficult, to accomplish what you want using MPAndroidChart and no "out-of-the-box" solution is available.

Answer 3

You can surely make it using MPAndroidCharts library.

Go for 1> LineChart (with legend, simple design) for Speed 2> LineChart (cubic lines) / (gradient fill) for Elevation , Heart

While Using gradientFill apply this to eliminate dashed line and draw a straight line:

    lineDataSet.enableDashedLine(0f, 0f, 0f);
    lineDataSet.enableDashedHighlightLine(0f, 0f, 0f);