Web-Based Dashboards and Reports

Traditional reports are often pre-generated, and usually non-interactive.

ARDI allows you to use Javascript to create dynamic and interactive web-based visualisations that use live, historical, event and hybrid data.

There are a couple of benefits to Infographics over reports.

* Infographics are generated on the client machine rather than the server, which reduces server load and improves response time.

* Infographics are usually interactive, allowing users to explore data with the mouse-cursor and see details in tooltips.

* Infographics can provide up-to-the-moment information, including live data.

* Infographics can take advantage of web technologies, such as video, audio and 3D graphics.

* Infographics can use 3rd party libraries and external data, such as allowing you to view live or historical data on 3D maps.

* Infographics can be animated, providing a much more visually interesting and modern experience to the user

* Infographics can contain links to other content, allowing users to 'deep dive' into content they find interesting

* Infographic can be embedded in other web-based products, allowing you to include live data displays in what would normally be static applications.

* A text editor, and
* A basic knowledge of Javascript

Some example infographics that you can download to get you started.

In the report we made previously, we showed the turbine vibration across a 24 hour period.

This time, we're going to focus on the live vibration from our turbines. We will create a simple bar-chart that updates to show new incoming information.

Our example is going to be based on the d3.js library, which is used to make data driven displays.

For those who aren't familiar with it, D3 can be a little odd.

If you're building a bar-chart in a traditional program, you…

• Figure out how to map your units to pixels on the screen,
• Draw your chart axes,
• Loop through each of the data points one-by-one,
• And for each point, draw a new box

D3.js handles the first two steps in a very simple way - there are dedicated scale objects that help build and draw your chart axes.

When it comes to drawing your boxes, things are a little bit different.

First, you build an array of objects that contain the data you want to display. In a bar chart for example, you'll need…

* The name of the series/data point, and
* The value of the point

Then, you select all of the existing boxes in your scene (originally, there won't be any) and you join them to the array. This join lets you specify functions that are run when new elements are created, updated and removed from your array.

This initially can seem quite complex, but it allows for very dynamic displays that animate smoothly between states and cope well when the amount of data changes - something ideal for ARDI applications that are designed to adapt to site changes.

You can go through how to build the Infographic, or skip onwards to Alerts.