====Web-Based Dashboards and Reports====

[[creating_a_traditional_report|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.

===Why Infographics===

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. \\

===Requirements===

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

Some [[analytics example bundle|example infographics]] that you can download to get you started.

===The Task===

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.

===Discovering D3.js===

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.

^Join Function^Usage^
|Enter|Called when a new item is added to the array. Used to create an object and set up its initial appearance.|
|Update|Called when an items value(s) change so that the appearance can be updated. This can include animation and effects|
|Leave|Called when an item is removed from the array. Used to smoothly transition visual elements out of the page before they're deleted|

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.

===Continue Reading===

You can [[infographic_building|go through how to build the Infographic]], or skip onwards to [[agency|Alerts]].