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

KooKoo Contact Center integration with WhatsApp

WhatsApp announced the launch of their business API yesterday. This is a big deal. A lot of businesses have been asking for WhatsApp integration and now its a possibility. Twilio has already launched an integration . Won't be long before we see a lot more integrations pop up. The most obvious use case is for support chat bots, alerts and reminders. But we at Ozonetel believe one other use case will become the dominant use case, WhatsApp as a support channel with human agents. We believe WhatsApp will become a dominant channel in contact centers world wide. There are multiple reasons for this: WhatsApp is ubiquitous. Everyone has the app. WhatsApp interface is well known to all customers. It is feature rich. You can share audio, video, location etc in the app itself. You can integrate bots for repetitive tasks. Being the leaders in cloud contact center solutions, we at Ozonetel knew that we had to integrate with the WhatsApp channel as early as possible.