Using Google Charts with AppInventor

Google Charts allows to visualize data in websites with a large number of plot types using JavaScript snippets that can be added to the code of the webpage. The code can load any Chart library, add the data to be plotted using the DataTable class, customize the plot and create a usable object with an id that will be used in the webpage with a <div id="id_of_the_chart" style="width: 900px; height: 500px"></div> to display the Google Chart. Easy ready-to-use code can be found in this get started web page.

The following code plots a smoothed function with the array in the variable data.

  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

The first row of this array contains the strings that describe the data in the columns and will be used in the legend. The rest of the rows are the data where the column ‘Year’ are also strings and ‘Sales’ and ‘Expenses’ are integer numbers. The layout of this table is very important because AppInventor has to follow the same structure so Google Charts can import the data correctly. Note that the array is defined inside brackets, all data in rows are also inside brackets and separated with commas and the rows are also separated with commas. For instance, a 3×3 matrix with numerical data would be defined as:

[[1,2,3],[4,5,6],[7,8,9]]

The code in AppInventor would be similar to:

The global variable Datoscontains a structure that can be read by Google Chart created with a list of lists being every one of the lists the rows of the matrix. The matrix is initialized with the name of the data in a list; in the case of the example, ‘X’ and ‘Y’ as the first row. The rest of the rows are populated with lists that contain the number of the counter ct in the X-axis and a number in the Y-axis introduced by the user in the TextBox1 and clicking Button2.The data input is finished and plotted by clicking Button1. This action assigns the variable Datosto the WebViewString of the object WebViewer to pass the data to the Google Charts snippet. The code has to be modified assigning to the variable d the string created with the list of lists in Datos. Then array is created parsing d with JSON. It is mandatory to tick ShowListsAsJson in the properties of the screen in AppInventor.

<html>
 <head>
 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
 <script type="text/javascript">
 google.charts.load('current', {'packages':['corechart']});
 google.charts.setOnLoadCallback(drawChart);
 d = window.AppInventor.getWebViewString();
 var array = JSON.parse(d);

function drawChart() {
 var data = google.visualization.arrayToDataTable(array);

var options = {
 title: 'Company Performance',
 curveType: 'function',
 legend: { position: 'bottom' }
 };

var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

chart.draw(data, options);
 }
 </script>
 </head>
 <body>
 <div id="curve_chart" style="width: 500px; height: 200px"></div>
 </body>
</html>

The file with the snippet has to be uploaded to AppInventor in the designer screen so it can be included in the code of the app and visualized in the Webviewer object as shown in these instances:

The uploaded file is saved by default in the path: file:///mnt/sdcard/AppInventor/assets/ so the URL has to be pointed to that. When the app is finally ready to be compiled and the .apk uploaded to the mobile phone, the path has to be changed to file:///android_asset/<filename.html>

The result is shown in this figure in which the populated list of lists is also displayed in the bottom TextBox.

This page (in Spanish) was used as reference for some of the ideas presented in this post.