Intro -- HTML5 Graphing and Data Visualization Cookbook -- Table of Contents -- HTML5 Graphing and Data Visualization Cookbook -- Credits -- About the Author -- About the Reviewer -- www.PacktPub.com -- Support files, eBooks, discount offers and more -- Why Subscribe? -- Free Access for Packt account holders -- Preface -- What this book covers -- What you need for this book -- Who this book is for -- Conventions -- Reader feedback -- Customer support -- Downloading the example code -- Errata -- Piracy -- Questions -- 1. Drawing Shapes in Canvas -- Introduction -- Graphics with 2D canvas -- How to do it... -- How it works... -- There's more... -- See also -- Starting from basic shapes -- Getting ready -- How to do it... -- How it works... -- Layering rectangles to create the flag of Greece -- Getting ready -- How to do it... -- How it works... -- There's more... -- BeginPath method and closePath method -- Creating shapes using paths -- Getting ready -- How to do it... -- How it works... -- There's more... -- Creating complex shapes -- Getting ready -- How to do it... -- How it works... -- There's more... -- Adding more vertices -- Getting ready -- How to do it... -- How it works... -- Overlapping shapes to create other shapes -- Getting ready -- How to do it... -- How it works... -- 2. Advanced Drawing in Canvas -- Introduction -- Drawing arcs -- Getting ready -- How to do it... -- How to do it... -- Drawing curves with a control point -- Getting ready -- How to do it... -- How it works... -- Creating a Bezier curve -- Getting ready -- How to do it... -- How it works... -- Integrating images into our art -- Getting ready -- How to do it... -- How it works... -- There's more... -- Scaling images -- Adding even more control -- Using images as a fill -- Drawing with text -- Getting ready -- How to do it... -- How it works... -- There's more...

Using gradients in your text -- Adding shadows and glows -- Understanding pixel manipulation -- Getting ready -- How to do it... -- How it works... -- Making an image grayscale -- Pixel reversing -- 3. Creating Cartesian-based Graphs -- Introduction -- Building a bar chart from scratch -- Getting ready -- How to do it... -- How it works... -- There's more... -- Revisiting the code -- Using the fillChart function -- Using the createBars function -- Spreading data in a scatter chart -- Getting ready -- How to do it... -- How it works... -- Building line charts -- Getting ready -- How to do it... -- How it works... -- There's more... -- Enabling switching mode between dots and lines -- Creating fill shapes -- Creating the flying brick chart (waterfall chart) -- Getting ready -- How to do it... -- How it works... -- There's more... -- Cleaning the format of numbers -- Other tasks I've left open -- Building a candlestick chart (stock chart) -- Getting ready -- How to do it... -- How it works... -- There's more... -- Adding other render options to our stock chart -- 4. Let's Curve Things Up -- Introduction -- Building a bubble chart -- Getting ready -- How to do it... -- How it works... -- Creating a pie chart -- Getting ready -- How to do it... -- How it works... -- There's more... -- Revisiting Math.cos() and Math.sin() -- Improving our bubbles' text format -- Using a doughnut chart to show relationships -- Getting ready -- How to do it... -- How it works... -- There's more... -- Adding an outline -- Creating a legend -- See also -- Leveraging a radar -- Getting ready -- How to do it... -- How it works... -- There's more... -- Adding a rotated legend -- Structuring a tree chart -- Getting ready -- How to do it... -- How it works... -- There's more... -- 5. Getting Out of the Box -- Introduction -- Going through a funnel (a pyramid chart) -- Getting ready.

How to do it... -- How it works... -- There's more... -- Making findLine smarter -- Changing the logic in init to create shapes -- Adding text into our graph -- Revisiting lines: making the line chart interactive -- Getting ready -- How to do it... -- How it works... -- There's more... -- Breaking down the logic of onChangedRadio -- See also -- Tree mapping and recursiveness -- Getting ready -- How to do it... -- How it works... -- There's more... -- Updating the init function - recalculating the total -- Turning drawTreeMap into a recursive function -- Turning the data and total to recursive data -- See also -- Adding user interaction into tree mapping -- Getting ready -- How to do it... -- How it works... -- There's more... -- Going back to the main treemap -- Making an interactive click meter -- How to do it... -- How it works... -- 6. Bringing Static Things to Life -- Introduction -- Stacking graphical layers -- Getting ready -- How to do it... -- How it works... -- There's more... -- Optimizing the drawChart function -- Further streamlining our code -- Creating the radio buttons dynamically -- Moving to an OOP perspective -- Getting ready -- How to do it... -- How it works... -- There's more... -- Moving our base canvas element into our constructor -- Creating all the HTML components dynamically -- Removing the lose ends -- Testing our work by creating two charts -- Animating independent layers -- Getting ready -- How to do it... -- How it works... -- Adding an interactive legend -- Getting ready -- How to do it... -- How it works... -- There's more... -- Creating a context-aware legend -- Getting ready -- How to do it... -- How it works... -- 7. Depending on the Open Source Sphere -- Introduction -- Animating a gauge meter (jqPlot) -- Getting ready -- How to do it... -- How it works... -- There's more... -- Creating the updateMeter function.

Creating an animated 3D chart (canvas3DGraph) -- Getting ready -- How to do it... -- How it works... -- There's more... -- The logic behind plotBar -- The logic behind styleFormatter -- Charting over time (flotJS) -- Getting ready -- How to do it... -- How it works... -- There's more... -- The GetData function -- The UpdateChart function -- Building a clock with RaphaelJS -- Getting ready -- How to do it... -- How it works... -- There's more... -- Animating paths -- Making a sunburst chart with InfoVis -- Getting ready -- How to do it... -- How it works... -- There's more... -- Where is the copy? -- 8. Playing with Google Charts -- Introduction -- Getting started with a pie chart -- Getting ready -- How to do it... -- How it works... -- There's more... -- Changing the chart type -- Creating charts using the ChartWrapper -- Getting ready -- How to do it... -- How it works... -- There's more... -- Changing a chart in one line -- Changing data source to Google Spreadsheet -- Getting ready -- How to do it... -- How it works... -- There's more... -- Customizing the chart properties with an options object -- Getting ready -- How to do it... -- How it works... -- There's more... -- Adding a dashboard to charts -- Getting ready -- How to do it... -- How it works... -- 9. Using Google Maps -- Introduction -- Creating a geographic chart with Google Visualization API -- Getting ready -- How to do it... -- How it works... -- There's more... -- Making smaller areas more visible -- Obtaining a Google API key -- Getting ready -- How to do it... -- How it works... -- Building a Google map -- Getting ready -- How to do it... -- How it works... -- There's more... -- Working with latitude and longitude -- Map types -- Adding markers and events -- Getting ready -- How to do it... -- How it works... -- There's more... -- Customizing controls and overlapping maps.

Getting ready -- How to do it... -- How it works... -- There's more... -- Redesigning maps using styles -- Getting ready -- How to do it... -- How it works... -- There's more... -- 10. Maps in Action -- Introduction -- Connecting a Twitter feed to a Google map -- Getting ready -- How to do it... -- How it works... -- Building an advanced interactive marker -- Getting ready -- How to do it... -- How it works... -- Adding multiple tweets into an InfoWindow bubble -- Getting ready -- How to do it... -- How it works... -- Customizing the look and feel of markers -- Getting ready -- How to do it... -- How it works... -- Final project: building a live itinerary -- Getting ready -- How to do it... -- How it works... -- There's more... -- Understanding the Traveler marker -- Updating the Animator object -- Index.

This cookbook is organized in a linear, progressive way allowing it to be read from start to finish, as well as to be used as a useful resource for specific tasks. The HTML5 examples and recipes will have you making dynamic, interactive, and animated charts and graphs in no time. You don't need to have a background in HTML5 or Canvas but you do need to have a basic understanding of how HTML works and know how to code in any language (preferably in JavaScript). In this book we will not explain how to learn to code but how to create projects and how to plan and execute them in the process.

Description based on publisher supplied metadata and other sources.

Electronic reproduction. Ann Arbor, Michigan : ProQuest Ebook Central, 2018. Available via World Wide Web. Access may be limited to ProQuest Ebook Central affiliated libraries.