Skip to main content

Integrating Arborjs with Angular to create a live calls dashboard

By C Chaitanya
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

Code:
https://github.com/kookoolib/arbor_angular


Popular posts from this blog

Cloud Telephony-History and state of the art

By C Chaitanya
Well, its been 11 years since Twilio launched their voice API in November 2008. I would say that was a major turning point in the cloud telephony industry. Before that, for people to build telephony applications, you either had to depend on proprietary platforms like Avaya dialog designer or build on arcane technologies like VXML which again was supported at varying degrees by the incumbents. Enter Twilio with their voice API and the industry changed for the better. Since it's been almost 11 years now I thought now might be a good time to do a comprehensive review of the cloud telephony industry as a whole in general and in India in particular. The Beginning Twilio was undoubtedly the startup which ushered in the era of cloud telephony. They started in November 2008. At that time in India, we at Ozonetel had launched a hosted VXML platform. There were no takers. After all who coded in VXML :) So when Twilio launched and we saw them take off, we immediately realized tha...
Read more

Google business messages and chat agents-A match made in heaven

By C Chaitanya
Google has launched Google business messages without much fanfare. It's just a small button that pops up when someone searches for your business on Google. But from the conversation industry perspective this is HUGE .   Do you know that the small call button drives millions of calls i n a year for pizza joints and other retailers in the US. Businesses spend more than a trillion dollars supporting billions of customer service calls each year. Now imagine how many chat conversations the "Message" button can drive.  Think of how customers interact with business. 1. Search on Google. 2. Click on web site link. 3. Web site shows chat pop up and tries to force the user to chat.(Annoying. I know :)) 4. User clicks on chat and starts conversing with a bot or an agent. This flow can now be completely changed. The new flow can be: 1. Search on Google. 2. User clicks on Message and starts conversing with a bot or an agent. What if you could design a customer experience that helps...
Read more

Telugu ASR speech data collection

By C Chaitanya
Image Source: IIIT-H Developing an indigenous ASR for Indian languages has been a goal for us since a long time. In that regard we have been experimenting a lot, trying out various neural network architectures.  While doing these experiments we found that there was no good dataset for Indian languages. While discussing with IIIT professors we got to know that the government of India was also exploring options to generate a good dataset. We immediately offered our help and our platform for this endeavor. So, as a starting step we have come up with a few campaigns to encourage users to donate speech data. We wanted to make it fun, so our first few campaigns are along the lines of JAMs(Just a Minute speech topics) etc. A topic will be provided and you need to speak for a minute on that topic. We have started this campaign for college students to start with. Of course anyone can participate and contribute their data. The more the merrier :) We will adding a lot more innovative ways ut...
Read more