Android realizes weather forecast temperature/temperature Polyline Trend Chart

Source: Internet
Author: User
Tags polyline



Android realizes weather forecast temperature/temperature Polyline Trend Chart

Weather forecast app, will inevitably encounter drawing weather temperature/temperature, and other data on the trend of the line or curve, such as the temperature/temperature of the line chart, there will generally be two lines, one is a high temperature line, one is a low-temperature line.
I previously introduced a statistical chart library of third-party open source frameworks on an Android platform Mpandroidchart (article link address: http://blog.csdn.net/zhangphil/article/details/47656521), See this article for details on how to use it.
The temperature/Temperature line chart is now implemented based on the Mpandroidchart on the Android platform.

All the code for the main Activity:MainActivity.java:

Package Zhangphil.chart;import Java.text.decimalformat;import Java.util.arraylist;import android.app.Activity; Import Android.graphics.color;import Android.os.bundle;import Com.github.mikephil.charting.charts.LineChart; Import Com.github.mikephil.charting.components.legend;import Com.github.mikephil.charting.components.legend.legendform;import Com.github.mikephil.charting.components.legend.legendposition;import Com.github.mikephil.charting.components.xaxis;import Com.github.mikephil.charting.components.xaxis.xaxisposition;import Com.github.mikephil.charting.components.yaxis;import Com.github.mikephil.charting.components.yaxis.axisdependency;import Com.github.mikephil.charting.data.Entry; Import Com.github.mikephil.charting.data.linedata;import Com.github.mikephil.charting.data.linedataset;import Com.github.mikephil.charting.utils.valueformatter;public class Mainactivity extends Activity {@Overrideprotected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate); SetconTentview (R.layout.activity_main); Linechart Mchart = (linechart) Findviewbyid (R.id.chart); Setchart (Mchart);//production of 5 data points. SetData (Mchart, 5); Legend L = mchart.getlegend (); L.setform (legendform.line); l.settextsize (12f); L.settextcolor (Color.Black); L.setposition (Legendposition.below_chart_center); Xaxis Xaxis = Mchart.getxaxis ();//move the ruler scale of the x axis to the bottom. Xaxis.setposition (Xaxisposition.bottom);//x-axis value between the interval xaxis.setspacebetweenlabels (1); xaxis.settextsize (12f); Xaxis.settextcolor (Color.Black); YAxis Leftaxis = Mchart.getaxisleft (); Setyaxisleft (Leftaxis); YAxis Rightaxis = Mchart.getaxisright (); Setyaxisright (Rightaxis);} private void Setchart (Linechart mchart) {mchart.setdescription ("@ http://blog.csdn.net/zhangphil"); Mchart.setnodatatextdescription ("If the value passed is empty, then you will see this text.") "); mchart.sethighlightenabled (true); mchart.settouchenabled (true); Mchart.setdragdecelerationfrictioncoef (0.9f); Mchart.setdragenabled (True); mchart.setscaleenabled (true); Mchart.setdrawgridbackground (true); Mchart.sethighlightperdragenabled (true); mChart.setpinchzoom (True); Mchart.setbackgroundcolor (Color.ltgray); Mchart.animatex (3000);} private void Setyaxisleft (YAxis leftaxis) {//4 tick values are marked on the left y-axis leftaxis.setlabelcount (4, true);// The color of the y axis axis is leftaxis.setgridcolor (color.red);//The Color Leftaxis.settextcolor (color.red) of the coordinate scale value on the y axis axis;// Y axis Max Leftaxis.setaxismaxvalue (x);//y-Axis minimum leftaxis.setaxisminvalue (ten); Leftaxis.setstartatzero (false); Leftaxis.setdrawlabels (TRUE);} private void Setyaxisright (YAxis rightaxis) {///Y axis marked with 8 tick values Rightaxis.setlabelcount (8, true);// The color of the tick value on the Y axis rightaxis.settextcolor (color.blue);//Y axis color rightaxis.setgridcolor (color.blue);// Y axis Maximum value rightaxis.setaxismaxvalue (+);//y-Axis minimum rightaxis.setaxisminvalue ( -5); Rightaxis.setstartatzero (false); Rightaxis.setdrawlabels (TRUE);}  private void SetData (Linechart mchart, int count) {arraylist<string> xvals = new arraylist<string> (); for (int i = 0; I < count; i++) {Xvals.add ("one month" + (i + 1) + "Day");} arraylist<entry> Yhigh = new arraylist<entry> (); Linedataset High = new Linedataset (Yhigh, "hot"); Sethightemperature (Hi, Yhigh, count); arraylist<entry> Ylow = new arraylist<entry> (); Linedataset low = new Linedataset (Ylow, "cryogenic"); Setlowtemperature (lo, Ylow, count); arraylist<linedataset> dataSets = new arraylist<linedataset> ();d atasets.add (High);d atasets.add (Low); Linedata data = new Linedata (xvals, dataSets);d Ata.setvaluetextcolor (Color.dkgray);d ata.setvaluetextsize (10f); Mchart.setdata (data);} private void Sethightemperature (Linedataset high, arraylist<entry> yvals,int count) {for (int i = 0; i < count; I + +) {float val = (float) math.random () + 30;yvals.add (new Entry (Val, i));} The y-axis on the left is the quasi-high.setaxisdependency (axisdependency.left); High.setlinewidth (5f); High.setcolor (color.red); High.setcirclesize (8f); High.setcirclecolor (Color.yellow); High.setcirclecolorhole (Color.dkgray); High.setdrawcirclehole (TRUE);//sets the format for displaying data on a polyline. If not set, the float data format is displayed by default. High.setvalueformatter (New Valueformatter () {@Overridepublic String GetformattEdvalue (float value) {DecimalFormat DecimalFormat = new DecimalFormat (". 0"); String s = "High Temperature" + decimalformat.format (value); return s;});} private void Setlowtemperature (Linedataset low, arraylist<entry> yvals,int count) {for (int i = 0; i < count; i++ ) {Float val = (float) math.random () + 5;yvals.add (new Entry (Val, i));} The right y-axis is the quasi-low.setaxisdependency (axisdependency.right);//Discounted Color low.setcolor (color.green);//Line width low.setlinewidth ( 3f)///Low.setcirclecolor (Color.Blue) of the ball color on the spot,//The Color Low.setcirclecolorhole (color.ltgray) of the hole filled with the center of the ball; The size of the sphere low.setcirclesize (5f); Low.setdrawcirclehole (true); Low.setvalueformatter (new Valueformatter () {@ Overridepublic String GetFormattedValue (float value) {DecimalFormat DecimalFormat = new DecimalFormat (". 0"); String s = "Low temperature" + decimalformat.format (value); return s;}});}}


Mainactivity.java Required Layout article Activity_main.xml:

<relativelayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http// Schemas.android.com/tools "    android:layout_width=" match_parent "    android:layout_height=" Match_parent " ><com.github.mikephil.charting.charts.linechart        android:id= "@+id/chart"        android:layout_width= " Match_parent "        android:layout_height=" match_parent "/>    </RelativeLayout>


Run results


The coordinate system of Mpandroidchart needs to be explained. The y-axis of the Mpandroidchart is divided into left and right two ordinate axes: the left ordinate axis (the YAxis obtained by the Getaxisleft () of the chart) and the starboard axis (YAxis obtained by the chart's Getaxisright ()). Although they are all yaxis a class representation in Mpandroidchart, they are independent of each other in their use, but they share the x axis (horizontal axis).
For example, in this case, the red y vertical axis on the left represents a high-temperature polyline, and it has its own set of drawing mechanisms to run independently; in the same vein, the blue y vertical axis on the right represents a low-temperature polyline, and it has its own set of drawing mechanisms that run independently. Don't confuse the two.

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced. Reprint Please specify source: Http://blog.csdn.net/zhangphil

Android realizes weather forecast temperature/temperature Polyline Trend Chart

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.