{"id":171,"date":"2012-11-02T09:11:15","date_gmt":"2012-11-02T16:11:15","guid":{"rendered":"http:\/\/androidplot.com\/?page_id=171"},"modified":"2016-05-23T08:49:30","modified_gmt":"2016-05-23T15:49:30","slug":"quickstart","status":"publish","type":"page","link":"http:\/\/androidplot.com\/docs\/quickstart\/","title":{"rendered":"Quickstart"},"content":{"rendered":"

\"simplexyscreen\"<\/a><\/h1>\r\n

Overview<\/h1>\r\nThis tutorial will walk you through Adding Androidplot as a dependency and displaying an XYPlot with two data series. \u00a0You can view this sample on your own device or emulator by installing the\u00a0DemoApp<\/a>\u00a0on your device and clicking on the Simple XY Plot Example. Full source\u00a0available here<\/a>.\r\n\r\nThis tutorial is also available in video form on youtube<\/a>.\r\n

Add the\u00a0Dependency<\/h2>\r\nTo use the library in your gradle project add the following to your\u00a0<\/span>build.gradle<\/code>:<\/span>\r\n
dependencies {\r\n    compile \"com.androidplot:androidplot-core:0.9.8\"\r\n}<\/pre>\r\nIf you're using Proguard obfuscation\u00a0(Projects created by Android Studio do by default) you'll also want add this to your proguard-rules.pro file:\r\n
-keep class com.androidplot.** { *; }<\/pre>\r\n
Add a Plot to\u00a0the XML Layout<\/h2>\r\nOnce you've got the project skeleton created, it's time to edit res\/layout\/simple_xy_plot_example.xml<\/strong> and add an XYPlot view. \u00a0By default this file is usually named main.xml. \u00a0If it is, go ahead and rename it.\r\n
res\/layout\/simple_xy_plot_example.xml<\/h3>\r\n
\r\n
\r\n
<LinearLayout xmlns:android=\"http:\/\/schemas.android.com\/apk\/res\/android\"\r\n              xmlns:ap=\"http:\/\/schemas.android.com\/apk\/res-auto\"\r\n              android:layout_height=\"match_parent\"\r\n              android:layout_width=\"match_parent\">\r\n\r\n    <com.androidplot.xy.XYPlot\r\n        style=\"@style\/APDefacto.Dark\"\r\n        android:id=\"@+id\/plot\"\r\n        android:layout_width=\"fill_parent\"\r\n        android:layout_height=\"fill_parent\"\r\n        ap:label=\"A Simple XY Plot\"\r\n        ap:rangeLabel=\"range\"\r\n        ap:domainLabel=\"domain\"\/>\r\n\r\n<\/LinearLayout><\/pre>\r\n<\/div>\r\n<\/div>\r\nThis example uses a default style to decorate the plot. \u00a0The full list of styleable attributes is\u00a0available here<\/a>. \u00a0 While new attributes\u00a0are added regularly, not all configurable properties are yet available. \u00a0If something you need is missing, use the Configurator<\/a>.\r\n
Create the Activity<\/h2>\r\nLet's look at an example Activity that displays the XYPlot graphic shown above. \u00a0The basic steps to follow are:\r\n
    \r\n \t
  1. Create an instance of Series and populate it with data to be displayed.<\/li>\r\n \t
  2. Register the series with the Plot along with a Formatter to describing how the data should be styled.<\/li>\r\n \t
  3. Draw the Plot<\/li>\r\n<\/ol>\r\nIn 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.\r\n
    SimpleXYPlotActivity.java<\/h3>\r\n
    \r\n
    \r\n
    import android.app.Activity;\r\nimport android.graphics.DashPathEffect;\r\nimport android.os.Bundle;\r\nimport com.androidplot.util.PixelUtils;\r\nimport com.androidplot.xy.SimpleXYSeries;\r\nimport com.androidplot.xy.XYSeries;\r\nimport com.androidplot.xy.*;\r\nimport java.util.Arrays;\r\n\r\n\/**\r\n * A simple XYPlot\r\n *\/\r\npublic class SimpleXYPlotActivity extends Activity\r\n{\r\n\r\n    private XYPlot plot;\r\n\r\n    @Override\r\n    public void onCreate(Bundle savedInstanceState)\r\n    {\r\n        super.onCreate(savedInstanceState);\r\n        setContentView(R.layout.simple_xy_plot_example);\r\n\r\n        \/\/ initialize our XYPlot reference:\r\n        plot = (XYPlot) findViewById(R.id.plot);\r\n\r\n        \/\/ create a couple arrays of y-values to plot:\r\n        Number[] series1Numbers = {1, 4, 2, 8, 4, 16, 8, 32, 16, 64};\r\n        Number[] series2Numbers = {5, 2, 10, 5, 20, 10, 40, 20, 80, 40};\r\n\r\n        \/\/ turn the above arrays into XYSeries':\r\n        \/\/ (Y_VALS_ONLY means use the element index as the x value)\r\n        XYSeries series1 = new SimpleXYSeries(Arrays.asList(series1Numbers),\r\n                SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, \"Series1\");\r\n\r\n        XYSeries series2 = new SimpleXYSeries(Arrays.asList(series2Numbers),\r\n                SimpleXYSeries.ArrayFormat.Y_VALS_ONLY, \"Series2\");\r\n\r\n        \/\/ create formatters to use for drawing a series using LineAndPointRenderer\r\n        \/\/ and configure them from xml:\r\n        LineAndPointFormatter series1Format = new LineAndPointFormatter();\r\n        series1Format.setPointLabelFormatter(new PointLabelFormatter());\r\n        series1Format.configure(getApplicationContext(),\r\n                R.xml.line_point_formatter_with_labels);\r\n\r\n        LineAndPointFormatter series2Format = new LineAndPointFormatter();\r\n        series2Format.setPointLabelFormatter(new PointLabelFormatter());\r\n        series2Format.configure(getApplicationContext(),\r\n                R.xml.line_point_formatter_with_labels_2);\r\n\r\n        \/\/ add an \"dash\" effect to the series2 line:\r\n        series2Format.getLinePaint().setPathEffect(\r\n                new DashPathEffect(new float[] {\r\n\r\n                        \/\/ always use DP when specifying pixel sizes, to keep things consistent across devices:\r\n                        PixelUtils.dpToPix(20),\r\n                        PixelUtils.dpToPix(15)}, 0));\r\n\r\n        \/\/ just for fun, add some smoothing to the lines:\r\n        \/\/ see: http:\/\/androidplot.com\/smooth-curves-and-androidplot\/\r\n        series1Format.setInterpolationParams(\r\n                new CatmullRomInterpolator.Params(10, CatmullRomInterpolator.Type.Centripetal));\r\n\r\n        series2Format.setInterpolationParams(\r\n                new CatmullRomInterpolator.Params(10, CatmullRomInterpolator.Type.Centripetal));\r\n\r\n        \/\/ add a new series' to the xyplot:\r\n        plot.addSeries(series1, series1Format);\r\n        plot.addSeries(series2, series2Format);\r\n\r\n        \/\/ reduce the number of range labels\r\n        plot.setTicksPerRangeLabel(3);\r\n\r\n        \/\/ rotate domain labels 45 degrees to make them more compact horizontally:\r\n        plot.getGraphWidget().setDomainLabelOrientation(-45);\r\n\r\n    }\r\n}<\/pre>\r\n<\/div>\r\n<\/div>\r\n
    res\/xml\/line_point_formatter_with_labels.xml<\/h3>\r\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<config\r\n    linePaint.strokeWidth=\"5dp\"\r\n    linePaint.color=\"#00AA00\"\r\n    vertexPaint.color=\"#007700\"\r\n    vertexPaint.strokeWidth=\"20dp\"\r\n    fillPaint.color=\"#00000000\"\r\n    pointLabelFormatter.textPaint.color=\"#FFFFFF\"\/><\/pre>\r\n
    \u00a0res\/xml\/line_point_formatter_with_labels_2.xml<\/h3>\r\n
    <?xml version=\"1.0\" encoding=\"utf-8\"?>\r\n<config\r\n    linePaint.strokeWidth=\"5dp\"\r\n    linePaint.color=\"#0000AA\"\r\n    vertexPaint.strokeWidth=\"20dp\"\r\n    vertexPaint.color=\"#000099\"\r\n    fillPaint.color=\"#00000000\"\r\n    pointLabelFormatter.textPaint.color=\"#FFFFFF\"\/><\/pre>\r\nOne potentially confusing section of the code above is LineAndPointFormatter and the usage of configure(...). \u00a0This is actually more Configurator magic<\/a>. \u00a0While it's possible to programmatically create and configure Formatter instances (such as LineAndPointFormatter) doing so leads to a brittle visual experience. \u00a0Never the less for the sake of brevity, one could replace the code:\r\n
    LineAndPointFormatter series1Format = new LineAndPointFormatter();\r\n        series1Format.setPointLabelFormatter(new PointLabelFormatter());\r\n        series1Format.configure(getApplicationContext(),\r\n                R.xml.line_point_formatter_with_plf1);<\/pre>\r\nwith:\r\n
    LineAndPointFormatter series1Format = new LineAndPointFormatter(Color.RED, Color.GREEN, Color.BLUE, null);<\/pre>\r\nFor more details on how to programmatically configure Formatters etc. consult the latest Javadocs.\r\n
    What's Next?<\/span><\/h2>\r\nNow that you know the basics you're ready to start plotting dynamic data<\/a>.","protected":false},"excerpt":{"rendered":"
    Overview This tutorial will walk you through Adding Androidplot as a dependency and displaying an XYPlot with two data series. \u00a0You can view this sample on your own device or emulator by installing the\u00a0DemoApp\u00a0on your device and clicking on the Simple XY Plot Example. Full source\u00a0available here. This tutorial is also available in video form […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":12,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-171","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/pages\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":47,"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/pages\/171\/revisions"}],"predecessor-version":[{"id":877,"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/pages\/171\/revisions\/877"}],"up":[{"embeddable":true,"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/pages\/12"}],"wp:attachment":[{"href":"http:\/\/androidplot.com\/wp-json\/wp\/v2\/media?parent=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}