android scatter plot graph

Question

I want to create scatter plot graph in android, and also want to access value of point that is clicked by user.

can any one please help me? I am not having any idea of how to create graph in android. I am using Graph View.jar file to create graph but not able to access plots value.

here is my code:

package com.example.test;
import java.text.FieldPosition;
import java.text.Format;
import java.text.ParsePosition;
import java.util.Arrays;

import android.app.Activity;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.PointF;
import android.os.Bundle;
import android.view.Menu;

import com.androidplot.series.XYSeries;
import com.androidplot.xy.LineAndPointFormatter;
import com.androidplot.xy.PointFormatter;
import com.androidplot.xy.SimpleXYSeries;
import com.androidplot.xy.XYPlot;
import com.androidplot.xy.XYStepMode;

public class MainActivity extends Activity {

    private XYPlot xyPlot;

    final String[] mMonths = new String[] {
        "Jan","Feb", "Mar","Apr", "May","Jun",
        "Jul", "Aug","Sep","Oct", "Nov","Dec"
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // initialize our XYPlot reference:
        xyPlot = (XYPlot) findViewById(R.id.xyplot);

        Number[] income =  {2000, 2500, 2700, 3000, 2800, 3500, 3700, 3800 };
     //   Number[] expense = {2200, 2700, 2900, 2800, 2600, 3000, 3300, 3400 };

        // Converting the above income array into XYSeries
        XYSeries incomeSeries = new SimpleXYSeries(
            Arrays.asList(income),                   // array => list
            SimpleXYSeries.ArrayFormat.Y_VALS_ONLY , // Y_VALS_ONLY means use the element index as the x value
            "Income");                                  // Title of this series

        // Converting the above expense array into XYSeries
//        XYSeries expenseSeries = new SimpleXYSeries(
//            Arrays.asList(expense),                 // array => list
//            SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, // Y_VALS_ONLY means use the element index as the x value
//            "Expense");                                // Title of this series

        // Create a formatter to format Line and Point of income series

        PointFormatter pformater = new PointFormatter() {

            @Override
            public void draw(Canvas arg0, Number arg1, PointF arg2) {
                // TODO Auto-generated method stub

            }
        };
        LineAndPointFormatter incomeFormat = new LineAndPointFormatter(
            Color.rgb(0, 0, 0),                   // line color
            Color.rgb(200, 200, 200),               // point color
            null );                                    // fill color (none)

        // Create a formatter to format Line and Point of expense series
//        LineAndPointFormatter expenseFormat = new LineAndPointFormatter(
//            Color.rgb(0, 0, 0),                   // line color
//            Color.rgb(200, 200, 200),               // point color
//            null);                                    // fill color (none)
// 
        // add expense series to the xyplot:
      //  xyPlot.addSeries(expenseSeries,expenseFormat);

        // add income series to the xyplot:
        xyPlot.addSeries(incomeSeries, incomeFormat);

        // Formatting the Domain Values ( X-Axis )
        xyPlot.setDomainValueFormat(new Format() {

            @Override
            public StringBuffer format(Object obj, StringBuffer toAppendTo, FieldPosition pos) {
                return new StringBuffer( mMonths[ ( (Number)obj).intValue() ]  );
            }

            @Override
            public Object parseObject(String source, ParsePosition pos) {
                return null;
            }
        });

        xyPlot.setDomainLabel("");
        xyPlot.setRangeLabel("Amount in Dollars");

        // Increment X-Axis by 1 value
        xyPlot.setDomainStep(XYStepMode.INCREMENT_BY_VAL, 1);

        xyPlot.getGraphWidget().setRangeLabelWidth(50);

        // Reduce the number of range labels
        xyPlot.setTicksPerRangeLabel(2);

        // Reduce the number of domain labels
        xyPlot.setTicksPerDomainLabel(2);

        // Remove all the developer guides from the chart
        xyPlot.disableAllMarkup();
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
}

Answer 1

Download the jar file here

Use the following code in your layout xml file

<com.jjoe64.graphview.GraphView
        android:layout_width="match_parent"
        android:layout_height="200dip"
        android:title="Graph Title"
        android:id="@+id/graph"
        android:layout_below="@+id/pointtext"/> 

Use the Following code in your Activity java file

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

import com.jjoe64.graphview.GraphView;
import com.jjoe64.graphview.series.DataPoint;
import com.jjoe64.graphview.series.DataPointInterface;
import com.jjoe64.graphview.series.OnDataPointTapListener;
import com.jjoe64.graphview.series.PointsGraphSeries;
import com.jjoe64.graphview.series.Series;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        GraphView point_graph = (GraphView) findViewById(R.id.graph);

    PointsGraphSeries<DataPoint> point_series = new PointsGraphSeries<DataPoint>(new DataPoint[]{
            new DataPoint(0, 2000),
            new DataPoint(1, 2500),
            new DataPoint(2, 2700),
            new DataPoint(3, 3000),
            new DataPoint(4, 3500),
            new DataPoint(5, 2800),
            new DataPoint(6, 3700),
            new DataPoint(7, 3800),
            new DataPoint(8, 3500),
    });
    point_graph.addSeries(point_series);
    point_series.setShape(PointsGraphSeries.Shape.RECTANGLE);
    point_series.setColor(Color.RED);
    point_series.setSize(18);

    StaticLabelsFormatter staticLabelsFormatter = new StaticLabelsFormatter(point_graph);
    staticLabelsFormatter.setHorizontalLabels(new String[]{"Jan", "Feb", "March", "Apr", "May", "june", "Aug", "Sept", "OCt", "Nov", "Dec"});
    point_graph.getGridLabelRenderer().setLabelFormatter(staticLabelsFormatter);
    point_series.setOnDataPointTapListener(new OnDataPointTapListener() {
        @Override
        public void onTap(Series series, DataPointInterface dataPoint) {
            Toast.makeText(MainActivity.this, "Series1: On Data Point clicked: " + dataPoint, Toast.LENGTH_SHORT).show();
        }
    });

Answer 2

Snowdon is a simple, fast, graphing library for Android, featuring scatter plots, line graphs, area plots, histograms, bar charts and heat maps.

I think this is what you are looking for .

Hope this may helps you :)