Skip to main content

Integrating Arborjs with Angular to create a live calls dashboard

Arborjs is a cool graph visualization library. Angular is one of the best JavaScript frameworks and we have been using Angular in a lot of our front end development.

When you handle millions of calls, proper visualization becomes very important. Without proper visualization, you can get lost in the mountains of data. So we spend a lot of time to come up with good visualizations to represent the data.

Since we loved the cool way in which Arbor represented graph data, we could not wait to hook it up with Angular. Because of Angular's two way data binding, when you hook up Angularjs with Arbor.js you can get a dynamically updated visualization of graph data with cool animations. To give back to the community, we have put up the code online at Github. Basically we have created an Angularjs directive for Arborjs. Please feel free to fork the code and add extensions and use it for your own visualizations.

The code is self explanatory with comments inline. Best way to get started is to follow these steps:

1. Pull the code from the repository
2. Edit data/data.json to add nodes and edges to the graph. Follow the naming convention of the nodes. If you change the naming convention, we will have to update in many places.
3. Create a server side code which will spit out JSON data in the format as mentioned in data/data.json
4. Update the server side URL in js/services.js

If you want to update the display and show images etc, you can modify the renderer.js file in lib/renderer.js

Features to be added:
Currently, the renderer is a standalone file and included directly. This should be made into an Angular service so that we can access the scope variables and make the graph display more dynamic. Then there won't be any limitations on node names etc.

Demo :
Arborjs+AngularJs Demo Dashboard


Popular posts from this blog

First Post

In this blog, I will be talking about my experiences in trying to build a cloud telephony platform , KooKoo . Along the way I will also be talking about different design choices I made, good programming practices and the IVR domain in general. For technoratti: NNFJW8EW86C3

Google's approach to business communication

 Google has been making silent moves in the business communication space. Google has mostly lost the instant messaging wars. But it does not want to lose the business communication war. WhatsApp, Instagram, Twitter and Facebook have been making their own moves to enable businesses to reach their customers through their channels. Its all about who has control over the communication channels. Especially communication which leads to business. That's where the money is. Currently, Google is the king of search and most online transactions start with a Google search. FB, Amazon, Apple and others want to change that. They want the search to start on their properties. And they have started making the moves. WhatsApp business allows small businesses to conduct their transactions on WhatsApp. FB and Instagram have long supported small businesses to manage their business on their channels. Apple has also made some nice moves with Apple business chat. They have integrated a whole shopping expe