Use embedded chart to customize chart controls and background images

In ace, embedded chart is actually a graphicalview object. Unlike a chart, it can be embedded into another activity (in fact, it is a normal view) without being called through intent. The advantage of doing so is that we can more flexibly customize this graphicalview, such as placing some other views in the chart, such as buttons and images.

The following shows how to use the embedded chart. We can see that in this custom line chart, we not only add a label control and a button on graphicalview, but also display our own background image.

 

Androidmainifest. xml

Add a new activity, for example, test. Ace. embeddedchart:

<Activity Android: Name = "test. Ace. embeddedchart"/>

This is a common activity class. We embed a graphicalview in it to demonstrate the example of embeddedchart. Next we will implement this activity.

Layout File

An activity is an XML layout file, which is no exception here. we name it embeddedchart. xml and put it in the Res/layout directory:

<? XML version = "1.0" encoding = "UTF-8"?>
<! -- Pay attention to the use of the Android: Background attribute and add a background image to the activity -->
<Linearlayout xmlns: Android = "http://schemas.android.com/apk/res/android"
Android: Orientation = "vertical" Android: layout_width = "fill_parent" Android: Background = "@ drawable/icon"
Android: layout_height = "fill_parent">

<Textview Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"
Android: text = "embedded chart Demo"/>

<Button Android: Id = "@ + ID/button1" Android: text = "button1"
Android: layout_width = "wrap_content" Android: layout_height = "wrap_content"/>

<! -- This linearlayout is used to place graphicalview -->
<Linearlayout Android: Id = "@ + ID/Chart" Android: Orientation = "horizontal"
Android: layout_width = "fill_parent" Android: layout_height = "wrap_content" Android: layout_weight = "1"/>
</Linearlayout>

Embeddedchart. Java

This is the implementation of the activity class, in which we use graphicalview to generate a line chart and embed it into it:

First, we declare several member variables:

PrivateXymultipleseriesdataset Ds;

PrivateXymultipleseriesrenderer render;

PrivateXyseries series;

PrivateGraphicalview GV;

 

PrivateXyseriesrenderer xyrender;

 

Except for private graphicalview GV, which is especially used by embedded chart, all variables are used in the bar chart and line chart we have previously drawn.

There are two special methods:

Protected voidOnsaveinstancestate (bundle outstate ){

Log.I("Onsaveinstancestate", "onsaveinstancestate ");

Super. Onsaveinstancestate (outstate );

Outstate. putserializable ("dataset", DS );

Outstate. putserializable ("Renderer", render );

Outstate. putserializable ("current_series", series );

Outstate. putserializable ("current_renderer", xyrender );

}

// When the activity is restored, the stored data is deserialized.

Protected voidOnrestoreinstancestate (bundle savedstate ){

Log.I("Onrestoreinstancestate", "onrestoreinstancestate ");

Super. Onrestoreinstancestate (savedstate );

DS = (xymultipleseriesdataset) savedstate. getserializable ("dataset ");

Render = (xymultipleseriesrenderer) savedstate. getserializable ("Renderer ");

Series = (xyseries) savedstate. getserializable ("current_series ");

Xyrender = (xyseriesrenderer) savedstate. getserializable ("current_renderer ");

}

These two methods are used to suspend or wake up an activity. For example, when the program is running, the user presses the Home key or the listen key (pause), and the activity is suspended and then started again (wake up ).

The onsaveinstancestate method is called when it is suspended. Here we use the serialization method (putserializable method) to store the activity member variables to bundle.

The onrestoreinstancestate method is called when the activity is awakened. Here we use the deserialization method (getserializable method) to restore the value of the member variable from the bundle.

In addition, two methods are also used in pairs.

// Note that onresume is called after oncreate.

Protected voidOnresume (){

Log.I("Onresume", "onresume ");

Super. Onresume ();

If(DS =Null) Getdataset ();

If(Render =Null) Getrenderer ();

If(GV =Null){

Linearlayout layout = (linearlayout) findviewbyid (R. Id.Chart);

GV = chartfactory.Getlinechartview(This, DS, render );

Layout. addview (GV,NewLayoutparams (layoutparams.Fill_parent,

Layoutparams.Fill_parent));

}Else{

// Draw the image

GV. repaint ();

}

}

// Note that oncreate is called every time startactivity (this, embeddedchart. Class)

Protected voidOncreate (bundlesavedinstancestate ){

Log.I("Oncreate", "oncreate ");

// Initialize the activity View

Super. Oncreate (savedinstancestate );

Setcontentview (R. layout.Embeddedchart);

}

Generally, the oncreate method and onresume method of the activity are called in sequence as long as the activity is started using the startactivity method.

The oncreate method is easy to skip. In the onresume method, we call the getdataset method to construct the vertex data of the line chart, use the getrenderer method to construct the Renderer of the line chart, and then use chartfactory. getlinechartview constructs a graphicalview, and adds this graphicalview to the linearlayout with the ID as the chart. Therefore, a line chart is displayed on the activity.

Finally, implement the getdataset and getrenderer methods:

PrivateXymultipleseriesdataset getdataset (){

DS =NewXymultipleseriesdataset ();

Final intNr = 10; // each series contains 10 random numbers

Random r =NewRandom ();

For(IntI = 0; I <1; I ++ ){

// Create a series (line)

Series =NewXyseries ("series" + (I + 1 ));

For(IntK = 0; k <NR; k ++ ){

IntX = R. nextint () % 10; // random integer between 0 and 10

IntY = 50 + R. nextint () % 50; // y: a random integer between 50 and

Series. Add (x, y); // Add a random distribution point to the series.

}

// Put the line of the added vertexDataset

DS. addseries (series );

}

ReturnDS;

}

PublicXymultipleseriesrenderer getrenderer (){

// CreateXymultipleseries

Render =NewXymultipleseriesrenderer ();

Render. setaxistitletextsize (16); // you can specify the text size of the Axis title.

Render. setcharttitletextsize (20); // you can specify the text size of a chart title.

Render. setlabelstextsize (15); // set the axis label text size

Render. setlegendtextsize (15); // set the legend text size

Render. setmargins (New int[] {20, 30, 15, 0}); // you can specify four sides for white.

Render. setpanenabled (False,False); // Set the X and Y axes to be moved without the screen being scratched by the user.

// Set the 4-Side white and transparent

//

Render. setmarginscolor (color.Argb(0, 0xff, 0, 0 ));

Render. setbackgroundcolor (color.Transparent); // Set the background color to transparent.

Render. setapplybackgroundcolor (True); // Make the background color take effect

// Set the color of a series to blue.

Xyrender =NewXyseriesrenderer ();

Xyrender. setcolor (color.Blue);

// ForwardXymultiplerenderAdd a series

Render. addseriesrenderer (xyrender );

ReturnRender;

}

These two methods have been introduced in "using achartengine to draw a line chart. The only thing worth noting is that color cannot be used when you use setmarginscolor to set the four-side background color transparency. transparent or defaultrenderer. no_color. The two transparent colors are invalid in the setmarginscolor method. You must use this method to set the four-side transparency. Only color is used. argb method. When the Alpha value of the first parameter of the argb (INT Alpha, int red, int green, int blue) method is 00, the transparent color can be obtained. Other color values are arbitrary, for example, 0x00ff0000. In the setbackgroundcolor method, color. Transparent is valid-it can set the background of the central area of the chart to transparent. I wonder if it is a bug.

 

Call embeddedchart

To use this embeddedchart class, there is no difference between it and the general activity. You can directly use the following statement in another activity:

Intent =NewIntent (This, Embeddedchart.Class);

Startactivity (intent );

As shown in figure: