Add a dynamic Google Gauge to your web page

Learn how IBM Bluemix and the Cloudant NoSQL DB service make this addition a snap

18 July 2014
PDF (552 KB)
David Krier

David Krier

Software Client Architect

Follow me on Twitter, LinkedIn, and Google+

Add a Google Gauge, which sources data from a Cloudant NoSQL DB using IBM® Bluemix™, to your website.

Image shows dial with needle set at 550

To create the dynamic Google Gauge, I build and deploy a new PHP application that runs on Bluemix, connects to a Cloudant database, reads a JSON document, and populates the value for the Google Gauge.

This new Bluemix application relies on a publicly available buildpack from GitHub because the application is built using PHP, which is not currently available in Bluemix. This article covers the following basic steps, which you can use to build a similar application:

  • Create a new Cloudant database.
  • Populate the database with a JSON document.
  • Set up a PHP application to connect to the database and read the document to populate the value for the Google Gauge.

What you'll need for your application

  • A Bluemix account — Register with your IBM user ID and password.
  • Familiarity with IBM DevOps Services (formerly known as JazzHub), the IBM cloud-based tools to develop and deploy applications in the web — Use these tools to create and deploy application code to Bluemix.
  • Familiarity with Cloudant, the IBM NoSQL JSON database in the cloud — The app stores and retrieves data (stored as documents in JSON format) from this database.

Tip: Open simultaneous browser tabs for easy reference: Bluemix, DevOps Services, and Cloudant.

Step 1. Create your own instance of the application


To create a copy of the code for your own use:

  1. Click Get the code (above). This action opens the project in DevOps Services.
  2. If prompted, sign in to DevOps Services.
  3. Click Edit Code. Image shows edit code tab in project

    Click to see larger image

  4. If you want to create your own project and follow along, you'll need to fork the code, so click Fork. Image shows Fork in project

    This action creates a new project in your DevOps Services environment. The application doesn't need any modifications to run, but you do need to create the database and add a document to the database before it can run successfully. Perform the following steps before you try to run the application.

  5. Click Deploy to create a new application within your Bluemix dashboard. Allow time for it to deploy. Image shows Deploy menu button

    At this point, your application is being uploaded to Bluemix, and your environment is being staged. For this particular application, you are using a PHP runtime environment to display the web page, which is being sourced from GitHub. At the root, this is an IBM WebSphere® Liberty Server that is enhanced to include the Zend PHP runtime engine.

  6. Log in to Bluemix and find your newly deployed application. After the deployment is finished, you should see that your application is up and running. Image shows application running in Bluemix dashboard
  7. Click the application icon to see more details about your application.

Step 2. Add a Cloudant service to your new application

  1. Click Add a service to add a Cloudant service to the application. This application expects a Cloudant service to be associated with it. Image shows adding a service to an existing application
  2. Select the Cloudant service from the list of available services in the catalog. Image shows selecting Cloudant icon
  3. Click Create.

    Note: The values for the app name and the instance name are automatically populated. Clicking Create creates a new instance within the shared environment hosted by IBM.

    Image shows Create button

    Restart the application when prompted to enable the changes to take effect.

  4. Look at the VCAP_SERVICES variable. In the Bluemix dashboard for your application, you can see that you have a Cloudant database service associated with your application.

    Click the Runtime tab to see the VCAP_SERVICES environment variable associated with your application. This variable is read into your application to populate the connection information so you can access the Cloudant database. Notice that this is a JSON data object.

    Note: The VCAP_SERVICES variable enables you to use sensitive data in the application without exposing it in the application code.

    Image shows VCAP_SERVICES variable in Runtime tab

    Click to see larger image

Step 3. Create a new Cloudant database and add a document

  1. To launch the Cloudant management console, click the Cloudant NoSQL DB service tab on the left side of your Bluemix dashboard and click Launch. Image shows Cloudant NoSQL DB tab

    From this console, you can create and manage databases. The next step is to create a new database and a new document within your database.

  2. From the Cloudant management console, click Add New Database. Image shows adding new database
  3. Name your database gauge.
  4. Add a document to the gauge database. Image shows adding new document
  5. Add the following JSON data to the new document and click Save.
     		   "_id": "Gauge-Data",
     		   "id": "Gauge-Data",
     		   "GaugeValue": "550"

    Note: After you save the JSON data, a new field, _rev, is automatically added, as shown in the following code listing. This is a unique value added to all documents by Cloudant. It is necessary, but can safely be ignored.

    		   "_id": "Gauge-Data",
    		   "_rev": "8-6513e30087b34680b45739ca720d8a25",
    		   "id": "Gauge-Data",
    		   "GaugeValue": "550"

Step 4. Test your Bluemix application

  1. Open the Bluemix dashboard and find your application.
  2. Click on the URL associated with your application. Image shows application running in Bluemix dashbord: Showing Route Link
  3. You should see a page with the Google Gauge. The value is now being sourced from your Cloudant database. Image shows dial with needle set at 550
  4. Modify the value in the Cloudant database and see how it changes the gauge.
  5. From the dashboard, select the gauge database.
  6. To edit the Cloudant document, click Edit doc. Image shows click Edit doc
  7. Modify the value to 300.
    		   "_id": "Gauge-Data",
    		   "_rev": "9-f4b99af836a3a7f0a1436c585b418cfd",
    		   "id": "Gauge-Data",
    		   "GaugeValue": "300"
  8. Refresh the page showing your gauge. Notice the change in the Google Gauge. Image shows dial with needle at 300

Congratulations! You now have a running application in Bluemix.

Step 5. Look at the PHP code


Now that you have a working example, look at the PHP code that connects to the Cloudant database and retrieves the data for the Google Gauge:

  1. Open a browser and log in to DevOps Services.
  2. Select the DynamicGoogleGauge-dw-demo project.
  3. Within the project, find the index.php file, which contains the PHP logic that connects to the database and retrieves data.

In the index.php file, you see both PHP and HTML tags. Operations inside PHP tags are run on the server.

The purpose of the first line of code in the index.php file is to source the SAG PHP library. The SAG master library is in the sag-master directory in the project.


Now that you have access to the SAG library, use the code in the index.php file to connect to the database and retrieve the data.

As shown below, the next bit of PHP code reads the VCAP_SERVICES environment variable and extracts the user ID and password. This variable is located only on the server; therefore, you can use it to store sensitive data that is required within your code. Keep in mind that your code is visible to anyone with access to your DevOps Services project.

	// vcap_services Extraction
	   $services_json = json_decode(getenv('VCAP_SERVICES'),true);
	   $VcapSvs = $services_json["user-provided"][0]["credentials"];
	// Extract the VCAP_SERVICES variables for Cloudant connection.
	    $myUsername = $VcapSvs["username"];
	    $myPassword = $VcapSvs["password"];

    // Create the URL for the SAG PHP utility.
    $myUrl = ($myUsername . "");

The following code makes the connection to Cloudant:

	   $sag = new Sag($myUrl);
	   $sag->login($myUsername, $myPassword);

Next, point the connection to the gauge database.


The next step is to request data from the Gauge-Data document, which is stored within the gauge database. The result is stored in the $resp object. You will use this value later within JavaScript.

	   $resp = $sag->get('Gauge-Data')->body->GaugeValue;

The final step is to populate the value of the Google Gauge (the dial within the gauge) with the data returned from the database.

Note: The following JavaScript is run on the client side within the browser. The PHP code in the listing is run on the server side, and the result of the echo statement is embedded into the HTML before it gets sent to the client. If you view the HTML source on the client, you will not see any PHP code. You see only the value returned from the database.

	var gaugeData = google.visualization.arrayToDataTable([
	    ['Label', 'Value'],
	    ['Value', <?php echo $resp; ?>]



The IBM Cloudant service is an easy-to-use distributed NoSQL database as a service. With the power of the cloud, you can focus on building and improving your application, instead of worrying about scaling and managing databases on your own. Bluemix, coupled with DevOps Services, provides all the tools necessary to develop and deploy sophisticated applications that can take advantage of services such as Cloudant, among many others.



Thanks to Mark Frederick for all of his help with this article.

BLUEMIX SERVICE USED IN THIS TUTORIAL:Cloudant NoSQL DB provides access to a fully managed NoSQL JSON data layer that's always on. This service is compatible with CouchDB, and accessible through a simple to use HTTP interface for mobile and web application models.

RELATED TOPICS:CloudantJavaScript

Add a comment

Note: HTML elements are not supported within comments.

1000 characters left

developerWorks: Sign in

Required fields are indicated with an asterisk (*).

Need an IBM ID?
Forgot your IBM ID?

Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name

The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.


All information submitted is secure.

Zone=Cloud computing, Web development
ArticleTitle=Add a dynamic Google Gauge to your web page