Custom Code - Visual Intelligence - page 149

In the visualization world, HTML5 is thus the best approach to creating a
visualization. Visualizations that you create using HTML5 can easily work on
multiple platforms. In addition, as you create a visualization, it's essential that
you consider the tablet form factor and the user's ability to consume and
interact with a visualization on the go, such as in a board meeting. One of the
limitations is that tablets are not useful for authoring content, and advanced BI
customizations, including self-service BI, simply don't work as well on a tablet.

hTml5 And AssoCIATed TeChnologIes

When you read “HTML5,” it is not just HTML5 that is being discussed. The
term is used broadly to include a number of technologies, such as CSS 3
(Cascading Style Sheets) and JavaScript.

What is so special about HTML5 over HTML 4 that makes it so much better for
visualization? Aside from anything else that it provides, the canvas element is
the key: The canvas element allows for the direct manipulation of graphical
elements such as arcs and lines. However, just using the canvas, you would
still need to write an extensive amount of code to generate stunning visualiza-
tions, so you will want to use some of the existing libraries. There are several
libraries that are worth looking at:

uu Flotr2: http://www.humblesoftware.com/flotr2/index
uu Raphael: http://raphaeljs.com/ (technically SVG rather than HTML5)
uu D3 (used to be Protovis): http://d3js.org/ and http://nvd3.org/
uu JavaScript InfoVis Toolkit: http://philogb.github.com/jit/

You can find more examples at http://socialcompare.com/en/comparison/
javascript-graphs-and-charts-libraries .

These libraries each have different capabilities and intents. Flotr2 is a generic
HTML5 charting library; Raphael and D3 are aimed at aiding graphical manipu-
lation on a webpage; and InfoVis provides a diverse set of visualizations. As
the goal is to create visualizations that are not present in the Microsoft toolkit,
rather than design interactive websites, this topic uses InfoVis for most custom
visualizations. A selection of the visualizations available is shown in Figure 9-2.

The other great aspect of using HTML5/JavaScript is that Excel 2013 can natively
embed this code to run in the client. You can read more on doing this at
http://msdn.microsoft.com/en-us/library/office/apps/jj220038 .