HTML5 Dashboarding
Education Analytics Platform
BDI's Framework
Tower Infrastructure Management

HTML5 dashboarding Product

This document describes the high level features of HTML5 dashboarding technology developed by BDI Systems. These dashboards run on all devices and latest browsers.

BDI has been ranked in leaders quadrant amongst all analytics product companies of India, rated by NASSCOM (top IT body in India).

bdi Selected to NASSCOM


BDI's core team has more than 12 years of experience in the field of reporting and dashboarding. This team has seen the progression of various dashboarding tools and primarily of Flash based Dashboarding tools. Most of the global customers have liked the usability and UI of Flash tools and thus these tools were widely used by the industry.

These flash based tools don't support all devices in today's world. HTML5 being the open standards requires a dash boarding tool that develops dashboards in HTML5 which runs on all latest devices, browsers, and all screens whether it is 3.5 inch iPhone or 40 inch led screen.

BDI has been working on a Business Visualization product from last few years which can take structured and unstructured data. HTML5 dash boarding framework is the client version of this product that can be used to give HTML5 dashboards. This tool can be used to replace existing flash dashboards or design entirely new dashboards using a designer tool, which helps in developing dashboards by drag and drop of various charting components and passing data in a required XML structure. Along with Designer license we ship a HTML5 portal where all kinds of dashboards can be hosted which runs in all devices.

Basic Elements of our HTML5 Dashboards
›› HTML5 Widgets, Charting Components & Framework
›› HTML5 Designer
›› HTML5 Portal
Different Types of HTML5 Widgets/Components
Different Types of HTML5 Widgets/Components

  HTML5 Dashboarding Framework Features:-
›› Charts
›› Filters
›› Group Widgets
›› Export Features
›› Data Grids
›› URL Buttons
In version 1.0 we have following HTML5 chart library available for building dashboards.


Note: The chart library will be enhanced every month in monthly releases.

HTML5 Filters

While building dashboards we require different type of filters. Complex filters like Hierarchical combo box is also part of our filters library. Following filters are available in version 1.0.


HTML5 Group Widgets

Group widgets represent a set of performance metrics of monitored resources. Group widgets contain multiple widgets that represent Key Performance Indicators (KPIs) of a single resource or clustered resources.





Export Features
›› Export to Excel - Export Chart/ Data Grid data to Excel
›› Export to PPT - Export Dashboard as Image to PPT
›› Export chart to PPT - Export Dashboard/ Individual Charts/ Data Grid as Image to PPT
›› Export to PDF - Export Dashboard as image to PDF

HTML5 Data Grids
1.Simple Data Grid Simple row/column data grid.


2.Paging Data Grid Grid moves across pages.

›› View the data in tabular format.
›› Pagination for a large set of data.
›› Can filter on different columns, values.
›› The data could be shown numerically or pictorially using alerts (dots)

3.Hierarchical Data Grid Grid can open in hierarchical fashion.


URL Buttons

Provide URL Link to other website with detailed information.


HTML5 Designer
This is easy to use Business Visualization designer software, which can help anyone Design, Develop & Visualize HTML5 dashboards, which can be launched in any Portal or application. Designer provides connectivity to structured and unstructured data sources that can move metric data into dashboarding framework and get consumed in different components to visualize in a dashboard.

Following are other basic features that are desired in a Designer.

›› Connects to Structured and Unstructured Database
  • Structured Data
    • Offline - Excel/CSV/XML
    • Databases - MySQL, MsSQL, Oracle, PostgreSQL, Web Services
    • Other Sources - Google Analytics, Salesforce, Artistic Survey [] A Survey tool developed by BDI.
  • Unstructured data
    • R/Hadoop/Hive/Scala/Spark
›› Save the dashboard for later editing
  • Save in database
  • Save as XML
›› Easy and intuitive to use.
›› Supports all components listed above.
Note: Detailed description of Designer is out of the scope of this document.


Above image shows, loading of an existing dashboard in the designer by selecting the dashboard file by using the browse button. This is to visualize dashboard before launching.

Features in Action
Apart from features described above there are lot of smaller useful features that are provided by this framework. All the features are not listed here but following are the noticeable ones:

Design Features
›› Built from the ground up, BDI’s connector needs no session -ID (only user- ID & password is needed) to connect to different web services
›› Use of the XML connector with BDI’s Dashboards allows handling of millions of records vs. Xcelsius and Excel.
›› Custom components allow us to easily build even complex dashboards
›› BDI’s customers can have their data visualized in the style and format their senior executives demand
Usability Features
›› Intuitive and easy
›› Almost zero end-user training
›› Ability to maximize & minimize charts
›› Download dashboards to Excel and PowerPoint
›› Hyperlinks permit drill-downs to objects within any third party application
›› Quick Custom Development and Support
›› Web services
›› Excel / CSV / XML
›› URL / WEB Connectivity (JSP, ASP, PHP, etc...)
›› BIG DATA Connector to Hive
›› Utilities to read data from Social media like Facebook, Twitter, and Linked-in, etc..
Search and Filter Capabilities
›› Searchable, Pageable grids
›› OBS multi-level filters
›› Analysis restrictions based on user context and external parameters
›› Capability to pass drill context to external sources via URL link
Dashboards in Action
Let's take the following Portfolio Manager dashboard to explain how it works.

›› This dashboard uses multiple Filters, n Dim Hierarchy Filters, Tabs, Pie Charts, Check Box, Gauge, and Searchable Paging datagrid cum scorecard, texts, labels and all export features.
›› This dashboard gets the data from Web Services of a third party application to show top 50 projects of a large enterprise.
›› The combo filter at the top controls the data shown in the dashboard.
›› Use hierarchical combo to select the business unit.


Above image depicts paging datagrid can be expanded and its data can be Exported in a Excel file. Similarly the dashboard can be exported in PDF or PPT as a Image.

Some more dashboard images, developed entirely in HTML5 :-


Education Vertical Dashboard which is giving the details on Academic Effectiveness of an International K12 school. This dashboard is quite complex and has various combinations of Radio Button, Drop Down, Line Chart and Sliders together. It has Year as a global filter.

Resourse Manager Navigator

Resource Manager Dashboard using basic filter capabilities to find out the load of a resource on projects. This is a common dashboard requirement on top of any PPM tool. The above chart uses a Mix chart apart from other standard charts described earlier.

finance Dashbords\

Standard Finance Dashboard using Hierarchical Data Grid.
›› Select the year & month for which you want to view the data.
›› Hierarchical Data Grid groups the data under different heads.
›› The charts display the data for the row selected in the grid.
HTML5 Portal
Not only HTML5 Designer and Dashboarding framework, BDI provides HTML5 portal along with Designer licenses that helps in viewing the dashboards in all devices in our portal. See some of the following images taken of live dashboard using iOS7 in latest iPad.

The user can see that portal runs on Safari browser in iPAD/iPhone/Android Devices as well. It has many features and it is beyond the scope of this document to list all of them. Following are some key features:-

›› It connects with all major data sources like Excel, CSV, MySQL, other Structured DBs, Hive etc
›› It can be used as a Benchmarking tool b/w various similar businesses comparing against each other on some key parameters.
›› It has very strong User Management module tuned for both cloud and on-premise offerings. It can measure concurrent users.
›› It has a module to bring in data from data sources using NQuery services.
›› Right-hand menu gives ability to add, delete, and modify dashboards.
›› The portal can host HTML5 + Flash Dashboards. It can be extended to host Crystal Reports as well.
Note: This means that in any organization the top level management can monitor all business parameter through their tablets while they are on move. They don't need to login to their intranet or extranet portals. We can provide them an HTML5 portal with all dashboards running in this portal.



Please contact for more details on Product, Pricing, method of partnership etc.