Most business applications have some kind of dashboard that gives a top-level view of various functions, but there is a problem with these dashboards. We think we have built something that can solve it.


Demo and Source Code


Understanding the Problem

When a business user finds an interesting insight or data point on a dashboard, collaboration options are very limited. Either he takes a PDF export or a snapshot of relevant chart, and sends that to his colleagues via email.

The discussion around the data point continues over email, thereby leading to ‘tribal knowledge’ known to only few. Anyone who was not a part of this email thread, or joined the team later, has no clue about the relevant discussion. Not to mention, after a few days no one remembers this discussion stored in emails, or even finding such information in email requires a lot of cognitive load.

This is because most of the dashboards do not think of collaboration at all, or have it as an afterthought with limited options for the business user. In this social world, we collaborate on statuses, pictures and what’s on Facebook, but we ignore the value of collaboration around business data.

A Possible Solution

Suppose you are looking at a sales dashboard and you notice a sudden jump in sales figures for the month of August. You want to know the story behind it. How it happened? What can you do to get more such monthly figures?

Your whole team is looking at it, but there’s just no way you can ask your questions without leaving the dashboard. You take a couple of screenshots and start drafting a mail to investigate. All fine till now. What if you have not one, but many dashboards to take care of? What happens then? Slowly it becomes a mess.

What if you don’t have to do this? What if you can ask questions at the same place that they originated from? On the dashboard itself. What if you can just click on a data-point and a familiar window pops up where you can post your comments, ask questions, provide answers and do a lot more?

Well, no more what-ifs. We have built a solution to solve this problem of collaboration. A single place where you can geek about data. You can try it here and this is how it looks:

Screenshot of collaboration dashboard

Screenshot of comment area in collaboration dashboard

Defining Requirements

When we sat out to solve this problem, we had tons of ideas. Incorporating all the suggested features would have resulted into a bloated application instead of a useful one. So we ruthlessly removed many features from our list to make it useful, light and beautiful. Here’s what our final requirements list looked like:

  • Users should be able to see existing knowledge around the data.

  • The visual interaction model for collaboration should be similar to what we all are used to (e.g., Facebook) to reduce cognitive load.

  • Users should be able to drill into data to find relevant insights.

  • If they find an insight, they should be able to easily share the insight in form of actual data or chart. Further discussion should be allowed on this to get insights from other team members.

  • All this information should be stored persistently for anyone with access to such data or dashboard, within the organization, to get a quick picture.

Did we solve all the above problems? Of course we did. Silly question. Isn’t it obvious this is the reason we are writing this post?

How We Did It?

Demo and source code:

This section is for the the curious developers out there, who are not content with just the solution but also want to know the process. So this is what went into the dashboard:

Components from FusionCharts:

Features from FusionCharts:

  • Annotations – to add custom elements in the chart.

  • Events – click, hover and keypress.

  • Themes – a separate file for applying themes.

Other features:

  • Web Storage – localStorage for storing comments in the browser. A database can be used for a full fledged application.

Following files are included in the package:

  • fusioncharts.js – FusionCharts source code. Required to render any chart built using FusionCharts.

  • data.js – Contains all the chart data including the initial set of comments.

  • fusioncharts.theme.collaboration.js – custom theme file which contains appearance settings for all the charts in the dashboard.

  • dashboard.js – contains the logic of the dashboard.

To understand the explanation below, please open ‘dashboard.js’ file and the live dashboard. We’ll be referencing to both below.

Functionality is divided into three parts.

  1. Chart Rendering

  2. Addition of Event Listeners

  3. Loading of Comments from localStorage

Chart Rendering:

When ‘dashboard.js’ file gets executed, a ‘dashboard’ object is created and ‘drawCharts()’ method is called on that object. ‘drawCharts()’ method will read the data from ‘data.js’ file and take the cosmetics settings from ‘fusioncharts.theme.collaboration.js’ (theme file) to render the chart. It will also add event listeners which is explained in the next section.

Addition of Event Listeners:

We can divide the event listeners into two categories:

  1. Events on chart elements

  2. Events on other UI elements

Following events are applied on chart elements:

  • Click on combination chart (‘Monthly Sales Analysis’): to open modal window that contains collaboration features (comments and charts).

  • Hover on combination charts: to display comment count or an annotation to add new comments (if there’s no comment).

  • Click on annotation (comment count): To display the modal window. It’s the same effect you get when you click on a data point on combination chart.

  • Hover on annotations: to show the comment count when you hover over the annotation.

  • Click on 2D column chart (‘Top 5 Categories By Sales’): to drill down on that particular category,

  • Click on the 2D column/line chart inside modal window: to show comments related to that month.

Below are the events that are applied on UI elements:

  • Keypress (‘enter’) on comment textbox (inside modal): to add a new comment on press of ‘enter’. That comment is also added to localStorage (depending on browser support).

  • Keypress (cmd/ctrl + v) on comment text box: to paste the chart recently copied. Pasting the chart involves rendering the chart with the original data.

  • Click on ‘copy chart’ link on column 2D chart: to set a flag to be used whenever a user presses ‘cmd/ctrl + v’ in the comment box.

  • Click events on top header: eg. clicking on notification icon will display latest notifications.

Loading of Comments from localStorage:

Since we built this just for demo, we used localStorage. For a full fledged application this can be achieved via storage in a database.

Before the chart is rendered, ‘dashboard.js’ will check for comments in localStorage. If there are comments from previous sessions, dashboard will be updated accordingly.

I hope you like what we’ve built. We’ll be more than happy to answer any questions.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards