Using Google Charts in your app to visualise data from Parse IoT cloud

Hammad TariqBlogs, Tutorials

Tweet about this on TwitterShare on FacebookShare on LinkedInShare on Google+

parse_temp_hammadIn this tutorial you’ll learn to retrieve the stored TI SensorTag data and visualize it using a Google Charts widget inside the webcontainer of an Evothings app. You’ll be using the Parse IoT cloud service and Evothings Studio. The live data source is a Texas Instruments SensorTag, tethered to a modern smartphone via Bluetooth Smart.

Facebook Parse cloud is designated Mobile-Backend-as-a-service, simply put, it’s designed for mobile app developers who want to obtain app persistence and store mobile backend data in the form of a cloud service. Previously, we’ve used Parse cloud to store temperature data generated by a Texas Instrument SensorTag. For IoT apps, chances are that we also need to retrieve the stored data and show it to the user.

Important: In order to follow this tutorial, it’s favorable that you have completed all steps listed in How to make a mobile IoT app for the Facebook Parse data cloud so that you have a Parse account, and already have seen basic incoming data gathered coming from your sensor device or mock-up pseudo device.

Introducing Evothings Studio and the Google Charts Library

Evothings Studio is an development environment for creating mobile apps for IoT. There is a Workbench application for your computer, and clients available on the public app stores. The Evothings Client runs on your phone or tablet, is a hybrid application in both iOS and Android flavors, you program it using HTML5/Javascript, and since it uses web technologies for coding you can render the common modern client-side JavaScript libraries. This provides you as a developer an easy way to rapidly develop and prototype your mobile IoT app for both Android and iOS in one go.

Google Charts is one of the most widely used real-time data visualization libraries, it’s fairly easy to use, has a wide variety of ready-to-use charts and widgets for you to embed in your HTML code. You can also customize the chosen charts using a range of parameters provided by the library to adapt to the look-n-feel you want.

For the purpose of this tutorial, we are going to use an analog-style “Gauge Chart” as it has an old-school touch to it, and relevant to temperature data visualization.

Download the example app code

To dive in quickly, get your copy of the example app code, with all the project files. Your downloaded app code can be stored anywhere you like, put to your favourite workspace folder.

Update the app code with your Parse app credentials

Open up the index.html file in your favorite text editor. In this file, you’ll find an “initializeParse()” function, update the “Parse Application ID” and “JavaScript Key” with the values you retrieved while creating your Parse cloud app in the first part of this tutorial.

Running the example

  1. Launch Evothings Workbench
  2. Drag-drop the “index.html” file into the Workbench, which will create a new project entry on top of the project list
  3. Connect to the Workbench from inside the “Evothings Client” on your phone using your WiFi IP address or Workbench discovery tool
  4. Click the “Run” button for the Parse IoT Demo with Google Charts
  5. Activate the TI SensorTag and press “Start reading SensorTag” button just as we did before (if you don’t have the sensor hardware, just use the demo method given in previous tutorial to see the output)

Now the app will start notifying you that it’s storing the data upstream to your Parse cloud app and at the same time it will start downloading the latest uploaded temperature record from Parse cloud, which in turn updates our Gauge chart in real-time!

Code explanation

Find the function drawChart() in index.html, this the main function which manages three tasks; drawing the chart, downloading the last temperature record from the Parse cloud and then updating the chart with the record retrieved.

The following code block sets the chart customization options, selects the target HTML element with the ID chart_div and draws the Gauge chart in that element:

// Initial value for the chart
   var data = google.visualization.arrayToDataTable([ 
      ['Label', 'Value'],['Temp', 20]
   ]);

// config options for the chart
   var options = { 
      width: 400, height: 120,
      redFrom: 25, redTo: 30, yellowFrom:22, yellowTo: 25,
      minorTicks: 1, max: 30
   };
   var chart = new google.visualization.Gauge(document.getElementById('chart_div'));
   chart.draw(data, options);

Once we have the chart in place, we query the Parse cloud after every 2500ms in order to download the latest record and then we redraw the chart:

setInterval(function() {
// Retrieve the last temperature entry from Parse cloud 
   var ReadingObj = Parse.Object.extend("SensorTagReading")
   var query = new Parse.Query(ReadingObj)
// Retrieve the most recent object
   query.descending("createdAt")
   query.find({
      success: function(readingObj) {
         temp = readingObj[0].get("Temperature")
      }
   });

// Pass the temperature value to the chart and redrawing it
   data.setValue(0, 1, temp)
   chart.draw(data, options)
}, 2500);

Now you have gone full circle of both storing and retrieving data from the Parse cloud, as well as how to use the Google Charts library for creating engaging User Interfaces for your IoT app. As next step, explore other examples on our website or head over to Evothings Forum to engage with the Evothings IoT community.

estimote-beacons-group-small

Eddystone is coming, opening up the beacon space

Estimote, Kontakt and Radius Networks are upping their hardware offerings, here’s some things you need to know.
Read more→

cloud_two

Evothings Studio is coming cloud-side

Going from a downloadable product into a Saas solution, brings on a wide array of new possibilities. Join the growing community and learn more about the benefits of moving from desktop onto the cloud for mobile development.
Read more and download→

appstore_whirl

Ready for app stores with Phonegap Build

A simple way to build and sign your app for publishing, is via a build service. Adobe’s Phongegap Build is one for the candidates.
Read more→