• Votes for this article 5 people voted for this
  • Dashboard Insight Newsletter Sign Up

Creating Interactive Digital Dashboards From Scratch
Using AnyChart Software to Build a Dashboard from the Ground Up.

by Tim Loginov, AnyChartFriday, November 9, 2007

Table of Contents:

  • Overview
  • Step 1 - Choose Data to be Displayed
  • Step 2 - Choose Layout
  • Step 3 - Convert Data
  • Step 4 - Convert Layout
  • Step 5 - Put Data and Layout Together
    Intermediate result - Presentation Dashboard is Ready
  • Step 6 - Concept Plan of Interactivity
  • Step 7 - Data for Interactive Dashboard
    Note: Using AnyChart "Chart Templates" for easier chart configuration
  • Step 8 - Interactive Dashboard Implementation
  • Step 9 - Enjoying the Result - Interactive Flash Dashboard Concluding Remarks


Like the instrument panel in a car, the computer version-dashboard displays critical info in easy-to-read graphics, assembled from data pulled in real time from corporate software programs. Dashboards deliver the detailed information needed by everyone for day-to-day decision-making. Simple yet powerful analysis allows any user to discover vital trends in business performance and continuously monitor the performance of your organization at all levels and in real time.

Dashboards provide your business with real-time business intelligence across all areas of your company – from accounting and sales, to fulfillment and support. The Dashboard offers instant snapshots of your designated key performance indicators (KPIs), and provides real-time trend graphs and ad hoc reports appropriate for each role in your business. With direct drill-down capability, you can move from a summary level directly to greater detail, and you can see real-time information to proactively manage for better results.

While most enterprise dashboards in production are probably still custom built, we provide you a new way of dashboard creation - using AnyChart Flash Component Dashboard mode.

Since all charts created by AnyChart Flash Chart Component are rendered using a single swf file it is very easy to place such a file to your web-site and provide it with an XML configuration file that configures a dashboard.

In this tutorial we will create step-by-step a sample dashboard. At first we will make a static one that can be used for presentation purposes, and then we will add interactivity, which makes a dashboard a really useful and modern tool of business data analytics.

Step 1 - Choose Data to be Displayed

Let's say, for example, that you are the CEO of "Duff Pubs" Chain which has five pubs - in Georgia, Washington, Florida, Texas and Nevada.

There are three major types of products sold in pubs: Beverages, Alcohol and Food.

You've completed research and collected reports and sales data per product type, and chain profitability data for all four quarters for previous year. Also you have information about revenue of each pub in that year. And the last, but not the least important data, we have the beer brands popularity chart all over the chain in that year.

In order to give shareholders the report at the annual meeting you want to put this all together on the single dashboard representing all data obtained.

Here are the data tables you have collected:

Step 2 - Choose Layout

Usually to choose the best layout for dashboard you should simply draw it by hand - to do a "paper design", in our case we took the sticky note and drew, first, a profitability chart:

Digital Dashboard Paper Planning

To demonstrate the changes of profitability by time we will use a line chart. We will not show an actual profit, but percentages of each quarter to the year profit.

To see the changes of product sales we will use a column chart in its stacked variation to demonstrate how different products contribute to the sales total.

Paper planning Bar Graph

Since the profitability chart and sales chart have the same argument - we will draw them on the same plot to save space on our dashboard and see how the changes in product sales affect the profit.

Digital Dashboard Paper Planning plot

To demonstrate the proportion of revenue of all pubs in the chain it is better to use a pie chart, or even doughnut - just for attractive appearance.

Digital Dashboard Paper Planning Pie Chart

To show the brands' popularity chart we will use a bar chart, as it is not effective to place a large number of labels on the column chart's X-Axis (it is possible with rotated labels, but it is not easy to read the rotated text).

Dashboard Paper Planning Horizontal Bar Graph

Now, when you have chosen the charts, you should arrange them somehow on the dashboard - and you can do that in a way you like, but keep in mind what you want to accentuate:

Digital Dashboard Paper Planning

Tweet article    Stumble article    Digg article    Buzz article    Delicious bookmark      Dashboard Insight RSS Feed
 Next Page
1 2 3 4
Other articles by this author


No comments have been posted yet.

Site Map | Contribute | Privacy Policy | Contact Us | Dashboard Insight © 2018