Database Reference
In-Depth Information
feasible. These interfaces are in any number of server-monitoring solutions,
suchasGraphite, whichrender static images ontheserver sideand transmit
them to the client every so often.
This approach is not real time, nor does it offer any interactivity. It is also
a heavy approach because it requires retransmitting an entire image to
accommodate potential small changes in the data. To overcome this, Flash-
or Java-based plug-ins were often used to allow incremental data updates.
Both of these options are still used when it is necessary to support older
(or simply inferior) browsers. Modern browsers can make use of HTML
CanvasandInlineSVGtosupportrich,plug-in-freevisualization techniques
directly in the browser.
HTML5 Canvas and Inline SVG
The HTML5 Canvas element and Inline SVG provide rich rendering
interfaces within an HTML document without the use of plug-ins. As the
names suggest, the Canvas element offers a pixel-based interface similar
to rendering surfaces used in native desktop or mobile applications. Inline
SVG, on the other hand, uses the DOM to construct a graphical
representation that is then rendered along with the rest of the document.
There are tradeoffs to both approaches. The Canvas interface is typically
faster to render, but it has far less native support for complicated rendering.
Inline SVG has built-in support for layering and grouping as well as
supporting CSS styling in many browsers, but it can be much slower to
render large scenes due to the need to maintain the scene graph. Rendering
performance typically dictates the choice of technique; so using Inline SVG
until performance becomes an issue is the most common approach.
Using the HTML5 Canvas
The HTML5 Canvas element is a resolution-dependent rendering surface
supported in every modern browser, including Internet Explorer. (Versions
7and 8require anexternal library. Versions 9and newer support thecanvas
element natively.)
To use a Canvas, an element needs to be added to the page. Modifying the
metric mixin slightlyputsacanvaselementbehindeachmetriconthepage,
appropriately marked with a data element for later updating. This mixin is
Search WWH ::




Custom Search