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>

Leave a Comment