sample Archives - Truiton Technology Reaching Us In Time - Online Mon, 25 Nov 2019 13:16:02 +0000 en-US hourly 1 https://i0.wp.com/www.truiton.com/wp-content/uploads/2022/11/cropped-truiton_new_logo_half_white.png?fit=32%2C32&ssl=1 sample Archives - Truiton 32 32 54534495 Android Tutorial- Using Google Chart Tools With SVG and Image API https://www.truiton.com/2013/04/android-tutorial-using-google-chart-tools-with-svg-and-image-api/ https://www.truiton.com/2013/04/android-tutorial-using-google-chart-tools-with-svg-and-image-api/#comments Wed, 03 Apr 2013 16:09:41 +0000 http://blog.truiton.com/?p=131 Recently I discovered that Google has rolled out a new chart platform called Google Chart Tools. Being an app Consultant at Truiton earlier I developed an Android app which was using the elder sibling of this called Google Chart Tools : Image Tools. Hence I found a new topic to write about here. In today’s… Read More »Android Tutorial- Using Google Chart Tools With SVG and Image API

The post Android Tutorial- Using Google Chart Tools With SVG and Image API appeared first on Truiton.

]]>
Banksy in Seattle?

Recently I discovered that Google has rolled out a new chart platform called Google Chart Tools. Being an app Consultant at Truiton earlier I developed an Android app which was using the elder sibling of this called Google Chart Tools : Image Tools. Hence I found a new topic to write about here.

In today’s electronic world, many business applications are being developed in which there’s a need to show data graphically. I am going to focus on five most popular android chart tools/libraries:

  1. Google Chart Tools- Latest Chart Tools – Android Tutorial- Using Google Chart Tools With SVG and Image API
  2. Google Chart Tools: Image Tools- Deprecated – Android Tutorial- Using Google Chart Tools With SVG and Image API
  3. AFreeChart- AFreeChart Tutorial
  4. AChartEngine- AChartEngine Tutorial
  5. MPAndroidChart – Android MP Chart Library

In this tutorial I would be explaining how to utilize the power of Google Chart Tools and Image API in our Android based business applications. Google Chart Tools display charts in in HTML5/SVG format. Therefore it generates charts in a very cool and interactive manner. It is almost impossible to cover the whole Google Chart Tools for Android in a single post, therefore I am going to show on how to Use Google Chart Tools with SVG on Android for ColumnChart/Bar Chart.

To use Google Chart Tools SVG ColumnChart in Android we need a snippet of simple JS/HTML code which could be generated from Charts Gallery and Google Code Playground. Code I used :

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2010',  1000,      400],
          ['2011',  1170,      460],
          ['2012',  660,       1120],
          ['2013',  1030,      540]
        ]);

        var options = {
          title: 'Truiton Performance',
          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 1000px; height: 500px;"></div>
    <img style="padding: 0; margin: 0 0 0 330px; display: block;" src="truiton.png"/>
  </body>
</html>

If you try and paste this code in an HTML file and open in a browser you will see a graph. But we will be using this code in our Android App. As you may have guessed by now this requires an internet connection this is also a drawback of this approach if you are building an offline app. Here is the permission to be added in AndroidManifest.xml :

<uses-permission android:name="android.permission.INTERNET" />

Next lets create a layout for our Android app containing a WebView which would load our Google Chart Tool: ColumnChart Graph SVG in our Android Deveice:

<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"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <WebView
        android:id="@+id/webView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

</RelativeLayout>

Now thinking practically, when building an Android app we need to feed data dynamically into this Google Chart Tool: ColumnChart Graph at run-time. As of now we have created only a file which has static values. Now keeping mind that we have to change values in this graph at run-time, I took this approach :

package com.truiton.googlegraphs;

import android.os.Bundle;
import android.app.Activity;
import android.content.Intent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends Activity {

 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 WebView webview = (WebView) findViewById(R.id.webView1);
 String content = "<html>"
 + "  <head>"
 + "    <script type=\"text/javascript\" src=\"jsapi.js\"></script>"
 + "    <script type=\"text/javascript\">"
 + "      google.load(\"visualization\", \"1\", {packages:[\"corechart\"]});"
 + "      google.setOnLoadCallback(drawChart);"
 + "      function drawChart() {"
 + "        var data = google.visualization.arrayToDataTable(["
 + "          ['Year', 'Sales', 'Expenses'],"
 + "          ['2010',  1000,      400],"
 + "          ['2011',  1170,      460],"
 + "          ['2012',  660,       1120],"
 + "          ['2013',  1030,      540]"
 + "        ]);"
 + "        var options = {"
 + "          title: 'Truiton Performance',"
 + "          hAxis: {title: 'Year', titleTextStyle: {color: 'red'}}"
 + "        };"
 + "        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));"
 + "        chart.draw(data, options);"
 + "      }"
 + "    </script>"
 + "  </head>"
 + "  <body>"
 + "    <div id=\"chart_div\" style=\"width: 1000px; height: 500px;\"></div>"
 + "    <img style=\"padding: 0; margin: 0 0 0 330px; display: block;\" src=\"truiton.png\"/>"
 + "  </body>" + "</html>";

 WebSettings webSettings = webview.getSettings();
 webSettings.setJavaScriptEnabled(true);
 webview.requestFocusFromTouch();
 webview.loadDataWithBaseURL( "file:///android_asset/", content, "text/html", "utf-8", null );
 //webview.loadUrl("file:///android_asset/Code.html"); // Can be used in this way too.
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
 // Inflate the menu; this adds items to the action bar if it is present.
 getMenuInflater().inflate(R.menu.main, menu);
 return true;
 }

 @Override
 public boolean onOptionsItemSelected(MenuItem item) {

 switch (item.getItemId()) {
 case R.id.action_to_image:
 Intent intent = new Intent(MainActivity.this, GoogleImageGraphActivity.class);
 startActivity(intent);
 return true;

 default:
 return super.onOptionsItemSelected(item);
 }
 }
}

In this MainActivity.Java we have created a String content which contains JS/HTML which could be modified at run-time. In this way we can generate our Google Chart Tool: ColumnChart Graph SVG dynamically at run-time on our Android device. To make this happen I have made a change in our original Code.html i.e. have a look at the highlighted line 20 here src=jspi.js. I have not used the Google’s URL for jsapi as in original Google Chart Tool: ColumnChart Graph SVG JS/HTML code. I have saved Google’s jsapi.js in my Android app’s assets folder, therefore a local reference is made . Please Note:  If you have to generate ColumnChart Graph SVG on Android from code you have to save jsapi.js in the assets folder. Reason being we have to specify base URL as file:///android_asset/. To create jsapi.js just right click on this URL and use “Save Target As” to save file as jsapi.js :

https://www.google.com/jsapi

Lets have a look at the highlighted line no.50, If you want to generate Google Chart Tool: ColumnChart Graph SVG via a file that can also be done, for this copy Code.html in the assets folder and un-comment line 50.

On successfully running this app we would get this graph:

Android Google Chart Tools: ColumnChart Graph SVG
Android Google Chart Tools: ColumnChart Graph SVG

With this done we can conclude that Google Chart Tool: ColumnChart Graph SVG can be drawn on Android OS 3.x and above. I read some articles and questions about people not being able to display Google Chart Tool on an Android device webview. Hope this helps them.

Google Chart Tools: Image Charts API

As I stated above the new Google Chart Tool: ColumnChart Graph SVG wont run on Android devices having OS lower than 3.x, and this could be a major setback for some. Hence those developers could use Google Chart Tools: Image Charts API. The Major Advantage of this API is that it returns an image as Graph which could be displayed anywhere on any device. But this approach also has a drawback- It has been officially deprecated by Google on April 2012.

Google Chart Tools: Image Charts API can be used to generate simple but beautiful non-interactive charts. To simplify the chart generation process Google has provided Charts Gallery and Chart Wizard. With help of these I created this URL :

You can click on this URL view the chart, now all we have to do is call this API URL from our Android code to generate Google Chart Tools: Image Chart. Here is the class to call this:

package com.truiton.googlegraphs;

import android.os.Bundle;
import android.app.Activity;
import android.util.Log;
import android.webkit.WebView;

public class GoogleImageGraphActivity extends Activity {

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

 String GraphURL = "http://chart.googleapis.com/chart?chxr=0,2010,2013|1,100,1300" +
 "&chxs=0,676767,8.5,0,l,676767&chxt=x,y&chbh=a,3,80&chs=1000x300" +
 "&cht=bvg&chco=3366CC,FF0000&chds=0,1170,0,1120" +
 "&chd=t:1000,1170,660,1030|400,460,1120,540&chdl=Sales|Expenses" +
 "&chg=0,-1&chtt=Truiton%27s+Performance";
 Log.v("GraphURL :", GraphURL);
 WebView webview = (WebView) findViewById(R.id.webView1);
 webview.loadUrl(GraphURL);
 }
}

To display this Google Chart Tools: Image Chart on Android we are again using a WebView. This is how it looks.

Android Google Chart Tools: Image Chart API

Now that I have explained two approaches for Google Chart Tools on Android, you can make an informed decision about which approach to choose, as both approaches have their own advantages and disadvantages. Although approaches explained here require internet connectivity, there are situations where we require to display graphs/charts without internet connection, if that’s the case, have a look at my tutorials on AfreeChart and AChartEngine libraries. If you like this article please share it with friends and like our Facebook page for updates.

The post Android Tutorial- Using Google Chart Tools With SVG and Image API appeared first on Truiton.

]]> https://www.truiton.com/2013/04/android-tutorial-using-google-chart-tools-with-svg-and-image-api/feed/ 31 131