Build a reactive sales chart app with Meteor


Meteor is a complete real-time application stack for JavaScript developers. Its unique reactive programming model makes it possible to quickly create single-page, highly interactive web applications that are updated in real time.

My developerWorks article "Instant web applications with Meteor" explores Meteor development and the Meteor architecture in depth. One of the coding examples in that article is an interactive sales chart produced as a single-page web app. I later realized that Bluemix could give me a great way to demo and share that application in the cloud. (The code you'll work with in this article was tested on the production release of Meteor 1.0. The code in "Instant web applications with Meteor" is based on an older Meteor version.) Because Bluemix wasn't quite ready for deployment of Meteor applications, I prepared a custom buildpack to simplify the deployment of Meteor apps on Bluemix.

I'll show you how to create your own Meteor real-time sales chart application on IBM Bluemix DevOps Services and deploy it to Bluemix for global web access. Meteor uses MongoDB on the server side to store data, so you'll use the predefined MongoDB service on Bluemix to store sales data for the app. After you have your own application up, you can explore Meteor's reactive programming model by changing the code.

What you need

Run the appGet the code

I prepared a custom buildpack to make deployment of Meteor apps on Bluemix simple.

Step 1. Explore the existing app

Click this article's Run the app button and try interacting with the sales chart application:

  1. Open multiple instances of a desktop or mobile phone browser and point them all to the application URL (
  2. Select and click (or tap) any of the sales figures in the table, change the number, and click OK to update. Observe that both the tables and the pie charts in all the application instances are updated instantly.
  3. Try updating sales figures from another browser instance or mobile device.

If other readers are trying out the app when you are, you will see their updates, too.

Step 2. Fork the project code

  1. Click this article's Get the code button.
  2. In my meteorsales project page on Bluemix DevOps Services, click EDIT CODE in the upper right: Screenshot of the EDIT CODE button on the Bluemix DevOps Services project page
    Screenshot of the EDIT CODE button on the Bluemix DevOps Services project page

    Log into Bluemix DevOps Services with your IBM ID and password.
  3. Click FORK to create a new project:
    Screenshot of the FORK button in DevOps Services
    Screenshot of the FORK button in DevOps Services
    Enter a project name other than meteorsales. Your project can be either public or private.
  4. Examine your project's directory structure:
    • manifest.yml— Manifest Bluemix DevOps Services uses to deploy the application to Bluemix
    • sales.css— CSS styles for the sales chart application
    • sales.html— Meteor template file for the application
    • sales.js— Client-side and server-side JavaScript code for the application
    • client/*jQuery plugin libraries used by the application
    • client/css/*— CSS styles used by the jQuery plugin libraries

How the Meteor code works

You write client and server logic in JavaScript when working with Meteor. This app's client- and server-side code are both in sales.js. (Alternatively, client and server code can be in separate subdirectories.)

Meteor scans the client directory (and subdirectories) for CSS files to style the UI and scans for JS files, which is how it picks up jQuery plugins. For HTML files, it merges the <head> and <body> sections of the files it finds.

The UI is typically constructed using Spacebar, a Meteor-specific template system similar to Handlebars. In sales.html, the template code for the sales chart app is as follows.

<title>Sales by Region</title>

  <div id="title">
  	<h1>Global Sales 2014</h1>
  <div id="container">
  	<div id="salestable">
    	{{> salesdata}}
        {{> piechart}}

<template name="piechart">
  	<div id="chart">

<template name="salesdata">
  <div class="salesdata">
    {{#each dataset}}
      {{> datapoint}}

<template name="datapoint">
  <div class="datapoint {{selected}}">
    <span id="{{_id}}_region" class="region">{{region}}</span>
    <span id="{{_id}}_total" class="sales editable">{{total}}</span>

The table of sales figures is rendered by the salesdata template, which contains an instance of a datapoint template for each row. The chart <div> is where the jqPlot plugin renders the pie chart. An instance of the jEditable plugin is created to enable in-place editing of the sales figures.

Whenever sales figures are changed in the UI, Meteor's client-side MongoDB implementation (mini-mongo) is called to update the number. Meteor's reactive engine then synchronizes with the server-side MongoDB instance. This change is propagated to all browser or mobile instances viewing the same page, and the Meteor engine updates the local view accordingly.

The only server-side code initializes the MongoDB instance with seed data:

if (Meteor.isServer) {
  Meteor.startup(function () {
      Sales2013.insert({region:"US East", total: 2032333});
      Sales2013.insert({region:"US Central", total: 150332});
      Sales2013.insert({region:"US West", total: 1202412});
      Sales2013.insert({region:"Asia Pacific", total: 701223});

Step 3. Deploy the app to Bluemix

  1. Click DEPLOY AS and select Deploy application from Web IDE to Bluemix. If you haven't deployed to Bluemix from Bluemix DevOps Services previously, enter your Bluemix user ID and password.
  2. Select the dev space as the target Bluemix deployment space and click DEPLOY: Screenshot of the Configure Application Deployment dialog box
    Screenshot of the Configure Application Deployment dialog box
  3. Wait for deployment, watching for status messages that pop up at the top of the page.

Eventually, you'll see a failure message telling you that the Bluemix route called meteorsales is already in use by another application. The app name in the manifest — currently meteorsales — must be your own app's unique name. Also, the manifest currently points to my MongoDB service instance on Bluemix, which the meteorsales app uses for storage. Your application has no access to that instance. (You'll update the manifest in Step 5.)

Step 4. Create a Bluemix MongoDB service instance

Now create your own MongoDB service instance and bind it to your application:

  1. Log into Bluemix.
  2. Scroll down and click Add a service.
  3. Click mongodb from among the available Data Management services and click CREATE AND ADD TO APP.
  4. Select Do not associate for Add to: and give your service a name. Click Create.

A notification in the upper-right corner briefly shows the name of the new MongoDB instance. If you miss that notification, scroll through your list of service instances to find the named MongoDB instance.

Step 5. Update the deployment manifest

Open the manifest.yml file in your Bluemix DevOps Services project for editing. Right now it's the same as the manifest.yml from my project.

- services:
 - mongodb-bf
  host: meteorsales
  disk: 1024M
  name: meteorsales
  path: .
  mem: 1024M
  instances: 1

Customize the manifest for your project:

  1. Change the host: and name: settings to reflect your project's unique name.
  2. Change the service instance name to that of the MongoDB service you created in Step 4.
  3. Save your changed manifest (File > Save).

Step 6. Redeploy to Bluemix

  1. Click the DEPLOY button. After a while, you'll see a deployment status message. This time the deployment succeeds.
  2. In the Manual Deployment Information section, you can see the application name followed by a large dot. If the dot is green, your Meteor app is running on Bluemix and you can skip the rest of this step. If the dot is red, click it, then click Start application: Screenshot of the Start Application button
    The red dot eventually turns green to indicate that the app is running. You also get a URL for the app and a link to the staging and deployment logs.
  3. Click the application URL to go your own copy of the running sales chart app.

Now you can experiment by modifying the code and redeploying at will.


You no longer need a fleet of expensive development workstations and staging servers to develop highly interactive, streaming-data-update web applications that run on desktop browsers and mobile devices. With new-generation, rapid-development, full-stack platforms such as Meteor — coupled with the cloud-based developer facilities offered by Bluemix DevOps Services and Bluemix— you can realize your ideas using only a connected browser, from wherever you are.

Downloadable resources

Related topics


Sign in or register to add and subscribe to comments.

Zone=Web development, Cloud computing
ArticleTitle=Build a reactive sales chart app with Meteor