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

Mashing up Freshdesk with KooKoo for customer support ticket management

Sorry for the delay in writing a blog post. I have been caught up in too many things since last month(we are growing, so its all good :)) Anyway, this week I thought I will look at how we can use the latest rockstar startup from India, Freshdesk . Freshdesk, as most of you know is one of the best "Social Helpdesk" systems out there. I am sure most of you are already using Freshdesk to support your customers. In this blogpost I will explain how you can add telephony to the mixture. In particular I will show some code which you can use to : Welcome the caller by name Ask him to enter his ticket id Play out the ticket status Connect the caller to the correct agent handling the ticket. Luckily for us, Freshdesk has a very well defined API and it was a pleasure to work with it. The engineers were also very supportive and answered all my queries quickly. So lets get into the code directly. 1. First we need to get the caller information. For this we need to a