Android Tutorial- Using Google Chart Tools With SVG and Image API - Truiton
Skip to content

Android Tutorial- Using Google Chart Tools With SVG and Image API

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.

Tags:

31 thoughts on “Android Tutorial- Using Google Chart Tools With SVG and Image API”

  1. Minnesha
    Reply

    Hi, I am trying to implement something similar using a piechart…I want to understand your code fully. Can you please also post the R.java file in Android?

    Thank you kindly

    1. Mohit Gupt
      Reply

      HI Minnesha, I don’t understand, R.java is an auto generated file why would you like to see that, anyways here it is:

      /* AUTO-GENERATED FILE. DO NOT MODIFY.
      *
      * This class was automatically generated by the
      * aapt tool from the resource data it found. It
      * should not be modified by hand.
      */

      package com.truiton.googlegraphs;

      public final class R {
      public static final class attr {
      }
      public static final class dimen {
      /** Default screen margins, per the Android Design guidelines.

      Customize dimensions originally defined in res/values/dimens.xml (such as
      screen margins) for sw720dp devices (e.g. 10" tablets) in landscape here.

      */
      public static final int activity_horizontal_margin=0x7f040000;
      public static final int activity_vertical_margin=0x7f040001;
      }
      public static final class drawable {
      public static final int ic_launcher=0x7f020000;
      public static final int truiton=0x7f020001;
      }
      public static final class id {
      public static final int action_to_image=0x7f080002;
      public static final int imageView1=0x7f080001;
      public static final int webView1=0x7f080000;
      }
      public static final class layout {
      public static final int activity_google_image_graph=0x7f030000;
      public static final int activity_main=0x7f030001;
      }
      public static final class menu {
      public static final int main=0x7f070000;
      }
      public static final class string {
      public static final int action_image=0x7f050001;
      public static final int app_name=0x7f050000;
      public static final int hello_world=0x7f050002;
      public static final int title_activity_google_image_graph=0x7f050003;
      }
      public static final class style {
      /**
      Base application theme, dependent on API level. This theme is replaced
      by AppBaseTheme from res/values-vXX/styles.xml on newer devices.

      Theme customizations available in newer API levels can go in
      res/values-vXX/styles.xml, while customizations related to
      backward-compatibility can go here.

      Base application theme for API 11+. This theme completely replaces
      AppBaseTheme from res/values/styles.xml on API 11+ devices.

      API 11 theme customizations can go here.

      Base application theme for API 14+. This theme completely replaces
      AppBaseTheme from BOTH res/values/styles.xml and
      res/values-v11/styles.xml on API 14+ devices.

      API 14 theme customizations can go here.
      */
      public static final int AppBaseTheme=0x7f060000;
      /** Application theme.
      All customizations that are NOT specific to a particular API-level can go here.
      */
      public static final int AppTheme=0x7f060001;
      }
      }

    1. Mohit Gupt
      Reply

      hi, oh now I understand what you are trying to ask, actually action_to_image is just a menu item to call the activity with image graph.

    1. Mohit Gupt
      Reply

      Hi,

      action_to_image is just a menu item which is used to switch between two activities. To make it work just add a main.xml file in Res/menu folder of your project. and in that file add this code for item element:

      android:id="@+id/action_to_image"
      android:orderInCategory="100"
      android:showAsAction="never"
      android:title="Google Image Chart API"

      Hope this solves your issue.

    1. Mohit Gupt
      Reply

      Hi Venkat,

      If you need to add custom values in GraphURL, you can add variables in between the string and use it dynamically.

  12. Fabricio
    Reply

    Hi When i try your code on android studio it says that :
    Gradle: cannot find symbol class GoogleImageGraphActivity
    Can you help me pls ?

    1. Mohit Gupt
      Reply

      Hi, I think you need to declare this class as explained in the tutorial. What I understand by this error message, is that android studio was not able to find the specified class. Hope this helps.

    1. Mohit Gupt
      Reply

      Hi Chris,

      Have you included jsapi.js? Please Note: If you have to generate ColumnChart Graph SVG on Android from code you have to save jsapi.js in the assets folder. For detailed explanation you can refer to para above. Hope this helps.

    1. Mohit Gupt
      Reply

      Thanks Ashish, I believe you can get the height and width of your device by using this code:

      DisplayMetrics metrics = new DisplayMetrics();
      getWindowManager().getDefaultDisplay().getMetrics(metrics);
      int width = metrics.widthPixels;

      and then use them as parameters for generating map. Hope this helps.

  18. Ezhil
    Reply

    Hi Mohit,

    I have setup the code as such as given in this tutorial. But when running the app I am getting the blank white screen. No graph was generated. I am getting error on “GoogleImageGraphActivity” class not foound. So I have addded dummy class for that. But I am getting blank screen only. Please help me out on this as soon as possible

    Thanks
    Ezhil.

    1. Mohit Gupt
      Reply

      Hi Ezhil,

      I believe you need to include jsapi.js.Please Note: If you have to generate ColumnChart Graph SVG on Android from code you have to save jsapi.js in the assets folder. For detailed explanation you can refer to para above. Hope this helps.

  20. Florian
    Reply

    Hi Mohit,

    can you tell me how often Google Chart Tools needs to access the internet? E.g. after every change in data, after every session or only once to get the chart and then you can persists it?

    Thanks
    Florian

    1. Mohit Gupt
      Reply

      Hi Florian,

      I believe that google.load function needs internet connectivity as by google.setOnLoadCallback, drawchart function is called. Now since this is a callback method it would only by invoked when internet connectivity is available. Hence to sum up I would say that until the google.setOnLoadCallback is called you need internet access.

      -Mohit

  22. Adam
    Reply

    Hi Mohit,

    I’m trying to make a app which shows a chart with animation and allows interaction with the user.
    I can show the chart in the webview, but is it possible to interact with the chart as if I were in a desktop browser?
    ex:
    when I add the explorer Configuration Option in the chart, I can zoom drag the chart in desktop, but in android, I can only zoom the webview size.

  26. sumitra
    Reply

    Hi Mohit,

    thnx for this. very helpful.
    But can you tell me how do I generate this google chart using Live data ie.mostly from a database.pls help.

  30. Akhil
    Reply

    i want to develop same kind of app but i want to import chart(database) from google spreadsheet and make a bar graph of it instead of manually giving values in a web view. Is it possible? Thanks in advance.

  31. Hakan
    Reply

    Hi mate,
    this is really a great tutorial.
    If I want to send an email and embed this chart into the body of the email, how I can achieve this?

    Thanks in advance,
    Hakan

Leave a Reply

Your email address will not be published. Required fields are marked *