Dynamic ichartjs 3D bar chart on android

Ichartjs is an HTML5-based graphics library. Use the pure javascript language and the canvas label of html5. Ichartjs provides simple, intuitive, and Interactive Graphic components for web applications. Is a web Chart solution. I recently learned HTML5 and used ichartjs to practice it. Ichartjs currently supports pie chart, line chart, Area Chart, column chart, and bar chart. Ichartjs is an open-source project based on the Apache License 2.0 protocol. Today we will introduce how to dynamically implement 3D bar chart on android phones.
The main principle of implementation is to package the data to be implemented in json format, because the data source defined by ichartjs adopts the json object method. A data source can be divided into a single data source and a set of multi-value data sources. The value of a single data source is a single value, and the set of multi-value data sources is a numerical set. 3D bar chart uses a single data source. If you don't talk much about it, simply add the code.

The first thing to write is Contact, an entity class that encapsulates data:

[Java]
Package com.chinasofti.html;
 
Public class Contact {
Private String name; // browser name
Private double value; // the market share of the browser
Private String color; // The color displayed in the column chart.

/**
* Constructor
* @ Param name: browser name
* @ Param value the market share of the browser
* @ Param color the color displayed in the column chart
*/
Public Contact (String name, double value, String color ){
This. name = name;
This. value = value;
This. color = color;
}

// The getters and setters of the three instance variables are as follows:
Public String getName (){
Return name;
}
Public void setName (String name ){
This. name = name;
}
Public double getValue (){
Return value;
}
Public void setValue (double value ){
This. value = value;
}
Public String getColor (){
Return color;
}
Public void setColor (String color ){
This. color = color;
}

}

Create a list to add the required contact object to the list:

[Java]
Import java. util. ArrayList;
Import java. util. List;
 
Import com.chinasofti.html. Contact;
 
Public class ContactService {
 
Public List <Contact> getContacts (){
List <Contact> contacts = new ArrayList <Contact> ();
Contacts. add (new Contact ("IE", 32.85, "# a5c2d5 "));
Contacts. add (new Contact ("Chrome", 33.59, "# cbab4f "));
Contacts. add (new Contact ("Firefox", 22.85, "#76a871 "));
Contacts. add (new Contact ("Safari", 7.39, "#9f7961 "));
Contacts. add (new contacts ("Opera", 1.63, "# a56f8f "));
Contacts. add (new Contact ("Other", 1.69, "#6f83a5 "));
Return contacts;
}
}

Then write the android main interface code to convert the list into a json string and interact with html files:
 

[Java]
Import java. util. List;
 
Import org. json. JSONArray;
Import org. json. JSONException;
Import org. json. JSONObject;
 
Import android. app. Activity;
Import android. OS. Bundle;
Import android. util. Log;
Import android. webkit. WebView;
 
Public class MainActivity extends Activity {
Private static final String TAG = "MainActivity ";
Private ContactService contactService; // class for creating a list
Private WebView webView;
 
@ Override
Public void onCreate (Bundle savedInstanceState ){
Super. onCreate (savedInstanceState );
SetContentView (R. layout. main );
 
ContactService = new ContactService ();
WebView = (WebView) this. findViewById (R. id. webView );
WebView. getSettings (). setJavaScriptEnabled (true); // javascript scripting is allowed.
WebView. getSettings (). setBuiltInZoomControls (true); // You can scale the settings.
// Set javaScript to operate the MainActivity class
WebView. addJavascriptInterface (this, TAG );
WebView. loadUrl ("file: // android_asset/3dchart.html ");
}

/**
* Converts a list to a json string.
* @ Return a json string
*/
Public String getContacts (){
List <Contact> contacts = contactService. getContacts ();
String json = null;
Try {
JSONArray array = new JSONArray ();
For (Contact contact: contacts ){
 
JSONObject item = new JSONObject ();
Item. put ("name", contact. getName ());
Item. put ("value", contact. getValue ());
Item. put ("color", contact. getColor ());
Array. put (item );
}
Json = array. toString ();
Log. I (TAG, json );
// WebView. loadUrl ("javascript: show ('" + json + "')");
} Catch (JSONException e ){
E. printStackTrace ();
}
Return json;
}
}

Finally, edit the html file. To implement an ichartjs table chart, first ensure that ichart-1.0.js has been imported under the assets Directory. Edit the html file:
 

[Html]
<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "UTF-8"/>
<Title> Hello World </title>
<Meta name = "Description" content = ""/>
<Meta name = "Keywords" content = ""/>
<Script type = "text/javascript" src = "ichart-1.0.js"> </script>
<Script type = "text/javascript">
Var data = new Array ();
Var contact = window. MainActivity. getContacts (); // obtain the json string converted from MainActivity.
Eval ('data = '+ contact); // obtain json data
 
$ (Function (){
New iChart. Column3D ({
Render: 'canvasdiv ', // The Dom target for rendering. canvasDiv is the Dom ID.
Data: data, // bind data
Title: 'top 5 Browsers in August 2012 ', // set the title
Showpercent: true, // display percentage
Decimalsnum: 2,
Width: 800, // set the width. The default unit is px.
Height: 400, // sets the height. The default unit is px.
Align: 'left ',
Offsetx: 50,
Legend :{
Enable: true
},
Coordinate: {// configure the custom axis
Scale: [{// configure the custom value axis
Width: 600,
Position: 'left', // configure the left axis
Start_scale: 0, // set the start scale to 0
End_scale: 40, // set the end scale to 40
Scale_space: 8, // set the scale spacing to 8
Listeners: {// configuration event
ParseText: function (t, x, y) {// set the parsing value axis text
Return {text: t + "% "}
}
}
}]
}
}). Draw (); // call the drawing method to start the drawing.
});
</Script>
</Head>
<Body>
<Div id = 'canvasdiv '> </div>
</Body>
</Html>

The final result is as follows: