Android+ExtJs

I wanted to have a combine solution with Android+ExtJs.

Step1: get ExtJs.

Step2: prepare (or copy-past from an examle) some chart. Actually it needs 4 files Chart.html, Chart.js, ext-all.css, ext-all.js.

Chart.html

<link href="ext-all.css" type="text/css" rel="stylesheet">

<script type="text/javascript" src="ext-all.js"></script>

<script type="text/javascript" src="Chart.js"></script>

Chart.js

Ext.require('Ext.chart.*');
Ext.require(['Ext.data.*', 'Ext.layout.container.Fit', 'Ext.window.MessageBox']);

Ext.onReady(function() {

 window.staticData = [
  {name: 'January',data1: 47},
  {name: 'February',data1: 20},
  {name: 'March',data1: 67},
  {name: 'April',data1: 10}
 ];
 
    var store1 = Ext.create('Ext.data.JsonStore', {
        fields: ['name', 'data1'],
        data: staticData
    });

    window.chart1 = Ext.create('Ext.chart.Chart',{
  animate: false,
  store: store1,
  axes: [
   {
    type: 'Numeric',
    minimum: 0,
    position: 'left',
    fields: ['data1'],
    title: false,
    grid: true,
    label: {
     renderer: Ext.util.Format.numberRenderer('0,0'),
     font: '10px Arial'
    }
   }, {
    type: 'Category',
    position: 'bottom',
    fields: ['name'],
    title: false,
    label: {
     font: '11px Arial',
     renderer: function(name) {
      return name.substr(0, 3) + ' 07';
     }
    }
   }
  ],
  series: [{
   type: 'line',
   axis: 'left',
   xField: 'name',
   yField: 'data1',
   style: {
    fill: '#38B8BF',
    stroke: '#38B8BF',
    'stroke-width': 3
   },
   markerConfig: {
    type: 'circle',
    size: 4,
    radius: 4,
    'stroke-width': 0,
    fill: '#38B8BF',
    stroke: '#38B8BF'
   }
  }]
 });
 
    Ext.create('Ext.Viewport', {
        layout: 'fit',
        items: window.chart1,
  renderTo: Ext.getBody()
    });
 
});

Step3: load "Step3" into android project.

activity_main.xml
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 >

 <WebView
  android:id="@+id/webView1"
  android:layout_width="match_parent"
  android:layout_height="match_parent" />

 <Button
  android:id="@+id/button1"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:layout_alignParentRight="true"
  android:layout_alignParentTop="true"
  android:text="@string/hello_world" />

</RelativeLayout>


Step4: run the chart from Android.

MainActivity

public class MainActivity extends Activity {

  private WebView webView;
  private Button btn;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  btn = (Button) findViewById(R.id.button1);
  btn.setOnClickListener(updChart);

  webView = (WebView) findViewById(R.id.webView1);
  webView.getSettings().setJavaScriptEnabled(true);
  webView.loadUrl("file:///android_asset/Chart.html");
 }

    OnClickListener updChart = new OnClickListener() {
        public void onClick(View v) {
        //update the chart data.      
        webView.loadUrl("javascript:chart1.store.loadData([{name: 'January',data1: 35},{name: 'February',data1: 56},{name: 'March',data1: 17},{name: 'April',data1: 80}]);");
        }
    };

}

my result on a real device.

 

take some beer! :-)