Tracking financial data is just one of the many sets of data we can collect, stream, and visualize. In this blog post, we’re going to take profit earned by drivers, then chart that data on a real-time, NVD3 visualization with AngularJS.
Take this PubNub application for example.
Over time, the bullet charts fill-in when each driver completes a route. The shaded areas can represent the minimum amount a driver has ever made, the average amount, and the maximum amount over a period of one-day. The pointer on the graph can represent a milestone.In this case it means the minimum amount necessary to meet the costs of the driver.
The setup for the index.haml is short. HAML is a pre-compiled version of HTML. It can be easier to read and write. First take a look at the dependencies:
- d3 allows you to draw graphs.
- NVD3 makes those graphs pretty.
- angular is used for it’s powerful views and controllers.
- pubnub.min.js supports pubnub-angular.
- pubnub-angular.js is used for real-time communication for Angular.
- nv.d3.min.css provides styles for the graph.
pubnub-angular.js is in the directory. You can get this file by using Bower and typing
bower install pubnub-angular. This will put the file in a bower_components package. Just take the file out of there. Next set-up the Angular app.
Make sure to include the
driver.js file into the html.
In the first line you declare the Angular app.
Then without a semi-colon, use dot notation to instantiate the controller.
In this example the array syntax for injecting services was used. This style is useful for production minification. This is a lot. You should run the app thus far to make sure there are no errors.
Set up a basic structure for the drivers. In this case there are 4 drivers. The requirements are shown here in the JSON. Put these objects side-by-side in an array.
Cutting back to the JavaScropt, use the $http service to pull in the static JSON data.
Notice that it passes the data to the
main() method. As with other asynchronous calls, you need to use some sort of callback. That’s what
main() is for. Name the data as $scope.drivers. And pass those drivers onto a graph.
In the graphs function use the forEach method on the JSON array.
In this function you declare a bulletChart, the style of chart for this app. D3 selects the id of the appropriate SVG, more on that later. D3 takes an object for its configuration, in this case you use the
processChart() method. The transition describes animations for the chart.
Note that you declared $scope.drivers earlier. This means you can use this data with Angular. Back in
This is the magic of Angular. It allows you to repeat the number of objects in the array. With each object you give an svg the ID of “chart<driver’s id number>”. For example “chart 1” for the first driver. This allows you to show 4 charts with two lines of code.
Listening with PubNub
Now set the graphs to listen for messages. Earlier you injected the PubNub service in the controller. Now you will use it.
pubNubInit() is called from the main method.
To get your unique pub/sub keys, you’ll first need to sign up for a PubNub account. Once you sign up, you can get your unique PubNub keys in the PubNub Developer Dashboard. Our free Sandbox tier should give you all the bandwidth you need to build and test your messaging app with the web messaging API.
Subscribe to the channel.
Then use $rootScope to be able to manually drive the rest of the app on a message event.
With each message get the driver position and tally-up the fare they just acquired.
With that information, add it to that driver’s chart.
Now that you’re listening with PubNub, it’s time to send some messages!
Sending with PubNub
In the code example there is a file
Go here if you need to install these and follow the tutorial. With node use
npm install pubnub. Then type
node spoof.js. That’s it! You’ll see your messages start sending.
Help Running the Graph
Now that you’re sending messages you want the graph to be able to populate based on the data. Use
python -m SimpleHTTPServer or simple open the index.html in your web-browser. You should see the graph populate as you send messages!