Quickstart

Quickstart

We try to keep these pages as up to date as possible, but typos are inevitable, especially immediately following new releases. If you spot an error, please let us know either in the forums or shoot an email to oops@androidplot.com. Thanks!

Last Updated For: Androidplot 0.6.0

Overview

This tutorial will show you how to display two series of data in an XYPlot.  You can view this sample on your own device or emulator by installing the DemoApp on your device and clicking on the Simple XY Plot Example.  Full source code for the DemoApp is also available for online browsing and for download here.

Step 1: Create the project

The first thing you’ll need is to get a project setup.  There are a couple ways to go about this.

With an IDE

Obviously how this is done depends on which IDE (if any) that you use.  Google does have some pretty good documentation on the process. If you don’t currently use an IDE, our recommendations would be to go with either IntelliJ IDEA or Eclipse with ADT. Here are a few useful links to get you started:

UPDATE: Android Studio is another great option but currently has it’s quirks.  If you’re an Android Studio user be sure to check out this thread on Stack Overflow.

With Maven

Maven users can generate an Androidplot project from scratch by following these instructions.

Using the Android SDK

You’ll obviously need the Android SDK installed to do this.  Assuming that <android-sdk-dir>/tools is on your PATH, run this from a command line:

For more detailed instructions see the official Google documentation.

Step 2: Add the AndroidPlot library to the project

Download the latest version of the AndroidPlot Core Library and copy it to your /libs directory.  Maven Quickstart users can skip this step.  IDE users may also need to add the library to your classpath.

Step 3: Add an XYPlot Element to the xml layout

Once you’ve got the project skeleton created, it’s time to edit res/layout/simple_xy_plot_example.xml and add an XYPlot view.  By default this file is usually named main.xml.  If it is, go ahead and rename it.

res/layout/simple_xy_plot_example.xml

You’ve no doubt noticed there’s quite a bit of stuff here.  Any parameter starting with “androidPlot” above is essentially styling fluff and can be safely ignored for the duration of this tutorial.  For the curious, these values are passed to the Configurator for processing upon Activity startup.

You’ll also notice a few items starting with “@dimen” – these are dimensions specified in another XML file:

res/values/dimens.xml

Step 4: Create the Activity

The example below uses com.androidplot.demos as it’s package – change this to whatever package you used when you created your project in step 1.

Let’s look at an example Activity that displays the XYPlot graphic shown above.  The basic steps to follow are:

  1. Create an instance of Series and populate it with data to be displayed.
  2. Register the series with the Plot along with a Formatter to describing how the data should be styled.
  3. Draw the Plot

In our case, since we are working with XY data, we’ll be using an XYPlot, a SimpleXYSeries (which is an implementation of the XYSeries interface) and a LineAndPointFormatter:

SimpleXYPlotActivity.java

res/xml/line_point_formatter_with_plf1.xml

 res/xml/line_point_formatter_with_plf2.xml

For the most part everything is pretty straightforward.  One potentially confusing section of the code above is LineAndPointFormatter and the usage of configure(…).  This is actually more Configurator magic.  While it is possible and completely acceptable to programmatically create and configure Formatter instances (such as LineAndPointFormatter) this practice leads to a brittle visual experience.  Never the less for the sake of brevity, one could replace the code:

with:

and get a similar effect.  For more details on how to programmatically configure Formatters etc. consult the latest Javadoc for details on available constructors, setters, getters, etc.

What’s Next?

Now that you know the basics you’re ready to start plotting dynamic data.

7 thoughts on “Quickstart

  1. Micka

    Can you help me, I tried to make this but it doesn’t work because I use values out of a database. There is no Exception, but only Series 2 ist visible.
    Here is my Code:
    package de.gerding.wert_auslesen_wifi;
    import android.app.Activity;
    import android.content.Intent;
    import android.graphics.Color;
    import android.net.wifi.WifiManager;
    import android.os.Bundle;
    import android.os.Handler;
    import android.util.Log;
    import android.view.KeyEvent;
    import android.widget.Toast;

    import com.androidplot.xy.SimpleXYSeries;
    import com.androidplot.series.XYSeries;
    import com.androidplot.xy.*;

    import java.net.InetAddress;
    import java.net.UnknownHostException;
    import java.util.Arrays;

    /**
    * The simplest possible example of using AndroidPlot to plot some data.
    */
    public class diagrammAnzeigen extends Activity
    {

    private XYPlot mySimpleXYPlot;
    private ArduinoCommManager commMan;
    private WifiManager wifi;
    private InetAddress ip;
    private int port = 1234;
    private int pin = 15;
    static String HOST = “Http://192.168.72.1:5984/”;
    //static String DBNAME = “my_test_db”;
    static String DBNAME = “my_auto_test”;
    static String DOC_ID = “doc_id”;
    private static int anzahl;
    private static String[] entries;

    @Override
    public void onCreate(Bundle savedInstanceState)
    {

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

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

    // Create a couple arrays of y-values to plot:
    //int anzahl;
    //anzahl = CouchDBManager.getDatabaseSize(DBNAME);
    //String[] entries;
    //entries = CouchDBManager.getAllEntries(DBNAME);

    try
    {
    ip = InetAddress.getByName(“192.168.72.2″);
    } catch (UnknownHostException e)
    {
    Log.i(“diagrammAnzeigen”,”onCreate-IpFehler”);
    e.printStackTrace();
    Toast.makeText(this, “Fehler beim setzen der IP”, Toast.LENGTH_LONG).show();
    }
    final int spin = pin;
    final InetAddress sip = ip;
    final int sport = port;

    final Handler my2Handler = new Handler(); // wird automatisch mit aktuellem Thread vebunden.
    new Thread()
    {
    public void run()
    {
    anzahl = CouchDBManager.getDatabaseSize(DBNAME);
    entries = CouchDBManager.getAllEntries(DBNAME);
    }

    }.start();

    Number[] series1Numbers;
    series1Numbers = new Number[anzahl];
    for(int i = 0; i < anzahl; i++)
    {
    Number numObj = (Number)Integer.valueOf(entries[i]);
    series1Numbers[i] = numObj;
    }
    //Number[] series1Numbers = {1, 8, 5, 2, 7, 4};//Werte einer Kurve
    Number[] series2Numbers = {4, 6, 3, 8, 2, 10};//Werte einer zweiten Kurve

    // Turn the above arrays into XYSeries':
    XYSeries series1 = new SimpleXYSeries(
    Arrays.asList(series1Numbers), // SimpleXYSeries takes a List so turn our array into a List
    SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, // Y_VALS_ONLY means use the element index as the x value
    "Series1"); // Set the display title of the series

    // same as above
    XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers), SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, "Series2");

    // Create a formatter to use for drawing a series using LineAndPointRenderer:
    LineAndPointFormatter series1Format = new LineAndPointFormatter(
    Color.rgb(0, 200, 0), // line color
    Color.rgb(0, 100, 0), // point color
    null); // fill color (none)

    // add a new series' to the xyplot:
    mySimpleXYPlot.addSeries(series1, series1Format);

    // same as above:
    mySimpleXYPlot.addSeries(series2,
    new LineAndPointFormatter(Color.rgb(0, 0, 200), Color.rgb(0, 0, 100), null));

    // reduce the number of range labels
    mySimpleXYPlot.setTicksPerRangeLabel(3);

    // by default, AndroidPlot displays developer guides to aid in laying out your plot.
    // To get rid of them call disableAllMarkup():
    mySimpleXYPlot.disableAllMarkup();
    }
    @Override
    public boolean onKeyDown(int keyCode, KeyEvent event)
    {
    Log.i("WERT_AUSLESEN_WIFI","onKeyDown()");
    if (keyCode == KeyEvent.KEYCODE_BACK)
    {
    Intent i = new Intent(this, WertAuslesen.class);;
    finish();
    startActivity(i);
    }
    return super.onKeyDown(keyCode, event);
    }
    }

  2. Jesse

    Followed everything and when I try to run it, it crashes and says: “03-27 20:01:29.954: E/dalvikvm(29320): Could not find class ‘com.androidplot.xy.XYPlot’, referenced from method com.plot.plottester.PlotTesterActivity.onCreate”

  3. nayv

    Although you didn’t provide a stacktrace, I suppose it’s the one I encountered, complaining about a missing layout_width attribute. Try putting a:
    android:layout_width="match_parent"
    android:layout_height="match_parent"

    in the simple_xy_plot_example.xml LinearLayout tag.

  4. Daniel

    Really nice tutorial and library, thank you!

    There’s one minor mistake, though:

    The line_point_formatter_with_plf1 + 2 xmls should not be placed in layout/xml but in res/xml instead to make the code work :-)

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">