Canvas Pocket Reference by Flanagan David

Author:Flanagan, David [David Flanagan]
Language: eng
Format: epub
Tags: COMPUTERS / Web / Page Design
ISBN: 9781449302788
Publisher: O'Reilly Media
Published: 2010-12-06T16:00:00+00:00

Canvas Example: Sparklines

We’ll end this chapter with a practical example for drawing sparklines. A sparkline is a small data-display graphic intended to be included within the flow of text, like this one: . The term “sparkline” was coined by author Edward Tufte, who describes them as “small, high-resolution graphics embedded in a context of words, numbers, images. Sparklines are data-intense, design-simple, word-sized graphics.” Learn more about sparklines in Tufte’s book Beautiful Evidence (Graphics Press).

Example 1-11 is a relatively simple module of unobtrusive JavaScript code for enabling sparklines in your web pages. The comments explain how it works.

Example 1-11. Sparklines with the <canvas> tag

/* * Find all elements of CSS class "sparkline", parse their * content as a series of numbers, and replace it with a * graphical representation. * * Define sparklines with markup like this: * <span class="sparkline">3 5 7 6 6 9 11 15</span> * * Style sparklines with CSS like this: * .sparkline { background-color: #ddd; color: red; } * * - Sparkline color is from the computed style of the CSS * color property. * - Sparklines are transparent, so the normal background * color shows through. * - Sparkline height is from the data-height attribute if * defined or from the computed style for the font-size * otherwise. * - Sparkline width is from the data-width attribute if it * is defined or the number of data points times data-dx * if that is defined or the number of data points times * the height divided by 6 * - The minimum and maximum values of the y axis are taken * from the data-ymin and data-ymax attributes if they * are defined, and otherwise come from the minimum and * maximum values of the data. */ // Run this code when the document first loads window.addEventListener("load", function() { // Find all elements of class "sparkline" var elts = document.getElementsByClassName("sparkline"); // Loop through those elements main: for(var e = 0; e < elts.length; e++) { var elt = elts[e]; // Get content of the element and convert to an // array of numbers. If the conversion fails, skip // this element. var content = elt.textContent || elt.innerText; // Trim leading and trailing whitespace var content = content.replace(/^\s+|\s+$/g, ""); // Remove comments var text = content.replace(/#.*$/gm, ""); // Convert newlines, etc., to spaces text = text.replace(/[\n\r\t\v\f]/g, " "); // Split numbers on commas or spaces var data = text.split(/\s+|\s*,\s*/); // For each split piece of the string for(var i = 0; i < data.length; i++) { data[i] = Number(data[i]); // Convert to number if (isNaN(data[i])) // On failure continue main; // skip this elt. } // Now compute the color, width, height, and y axis // bounds of the sparkline from the data, from data- // attributes of the element, and from the computed // style of the element var style = getComputedStyle(elt, null); var color = style.color; var height = parseInt(elt.getAttribute("data-height")) || parseInt(style.fontSize) || 20; var datadx = parseInt(elt.getAttribute("data-dx")); var width = parseInt(elt.getAttribute("data-width")) || data.length*(datadx || height/6); var ymin = parseInt(elt.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.