Android: add animated chart using Androidplot

To use the library in your gradle project add the following to your build.gradle:

dependencies {
    compile 'com.androidplot:androidplot-core:0.9.8'
}

Add a Plot to the XML Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:ap="http://schemas.android.com/apk/res-auto"    android:layout_height="200dp"    android:layout_width="fill_parent"    android:layout_gravity="bottom"    android:layout_margin="10dp"    >

    <com.androidplot.xy.XYPlot        style="@style/PlotBkool"        android:id="@+id/plot"        android:layout_width="fill_parent"        android:layout_height="fill_parent"/>

</LinearLayout>

And add this code

protected void onCreate(Bundle savedInstanceState) {

     ...

     XYPlot plot = (XYPlot) findViewById(R.id.plot);

     this.regionSetup(plot);

     ...

}

private void regionSetup(XYPlot plot)
{
    Number[] timHits = {105, 252, 220, 350, 70, 250, 353, 120, 140, 200};

    //Línea y puntos    LineAndPointFormatter timFormatter = new LineAndPointFormatter(
            Color.rgb(100, 25, 20),
            Color.rgb(100, 25, 20),
            null, null);
    timFormatter.getLinePaint().setStrokeWidth(PixelUtils.dpToPix(2));
    timFormatter.getVertexPaint().setStrokeWidth(PixelUtils.dpToPix(0));

    XYSeries timSeries = new SimpleXYSeries(Arrays.asList(timHits),
            SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "");

    plot.addSeries(timSeries, timFormatter);

    AnimatedSeries as1 = new AnimatedSeries(plot, timSeries);

    // add a new series' to the xyplot:    plot.addSeries(as1, timFormatter);

    // and another region:    XYRegionFormatter shortRegionFormatter = new XYRegionFormatter(Color.RED);
    shortRegionFormatter.getPaint().setAlpha(75);
    RectRegion shortRegion = new RectRegion(Double.NEGATIVE_INFINITY, Double.POSITIVE_INFINITY, Double.NEGATIVE_INFINITY, Double.POSITIVE_INFINITY, "");
    timFormatter.addRegion(shortRegion, shortRegionFormatter);

   new Thread(as1).start();
}

In my case I have added a plot over a map, and this is the result:

As you can see, the plot is animated. To do this use this class:

/** * A primitive example of applying an animation to a series */class AnimatedSeries implements XYSeries, Runnable {

    private final XYPlot plot;
    private final XYSeries series;
    private int step = 0;
    private int stepCount = 125;
    private float factor = 0;

    public AnimatedSeries(XYPlot plot, XYSeries series) {
        this.plot = plot;
        this.series = series;
    }

    @Override    public void run() {
        try {
            while (step < stepCount) {
                factor = step / (float) stepCount;
                Thread.sleep(50);
                plot.redraw();
                step++;
            }
        } catch (InterruptedException e) {
            throw new RuntimeException(e);
        }
    }

    @Override    public int size() {
        return series.size();
    }

    @Override    public Number getX(int index) {
        return index;
    }

    @Override    public Number getY(int index) {
        return series.getY(index).doubleValue() * factor;
    }

    @Override    public String getTitle() {
        return series.getTitle();
    }
}

You can configure the style of your plots using this in your style.xml

<style name="PlotBkool">
    <item name="android:background">@color/transparent</item>
    <item name="backgroundColor">@color/transparent</item>
    <item name="graphBackgroundColor">@color/transparent</item>
    <item name="gridBackgroundColor">@color/transparent</item>
    <item name="graphDomainLineColor">@color/transparent</item>
    <item name="graphRangeLineColor">@color/transparent</item>
    <item name="rangeTickLabelTextColor">@color/transparent</item>
    <item name="domainTickLabelTextColor">@color/transparent</item>
    <item name="domainOriginTickLabelTextColor">@color/transparent</item>
    <item name="rangeOriginTickLabelTextColor">@color/transparent</item>
    <item name="domainOriginLineColor">@color/transparent</item>
    <item name="rangeOriginLineColor">@color/transparent</item>
    <item name="labelTextColor">@color/ap_white</item>
    <item name="domainLabelTextColor">@color/ap_white</item>
    <item name="rangeLabelTextColor">@color/ap_white</item>
    <item name="legendTextColor">@color/ap_white</item>
</style>