eBook - ePub
HTML5 Graphing and Data Visualization Cookbook
Ben Fhala
This is a test
- 344 pages
- English
- ePUB (mobile friendly)
- Available on iOS & Android
eBook - ePub
HTML5 Graphing and Data Visualization Cookbook
Ben Fhala
Book details
Book preview
Table of contents
Citations
About This Book
In Detail
The HTML5 canvas tag makes creating any plot shape easy, all you have to do then is fill it with exciting visualizations written in JavaScript or using other visualization tools.
"HTML5 Graphing and Data Visualization Cookbook" is the perfect break into the world of Canvas, charts, and graphs in HTML5 and JavaScript. In this book we will go through a journey of getting to know the technology by creating and planning data-driven visualizations. This cookbook is organized in a linear, progressive way so it can be read from start to finish, as well as be used as a resource for specific tasks.
This book travels through the steps involved in creating a fully interactive and animated visualization in HTML5 and JavaScript. You will start from very simple "hello world" samples and quickly dive deeper into the world of graphs and charts in HTML5. Followed by learning how canvas works and carrying out a group of tasks geared at taking what we learned and implementing it in a variety of chart types. With each chapter the content becomes more complex and our creations become more engaging and interactive.
Our goal is that by the end of this book you will have a strong foundation; knowing when to create a chart on your own from scratch and when it would be a good idea to depend on other APIs.
We finish our book in our last two chapters exploring Google maps and integrating everything we learnt into a full project.
Approach
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.
Who this book is for
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.
Frequently asked questions
How do I cancel my subscription?
Can/how do I download books?
At the moment all of our mobile-responsive ePub books are available to download via the app. Most of our PDFs are also available to download and we're working on making the final remaining ones downloadable now. Learn more here.
What is the difference between the pricing plans?
Both plans give you full access to the library and all of Perlego’s features. The only differences are the price and subscription period: With the annual plan you’ll save around 30% compared to 12 months on the monthly plan.
What is Perlego?
We are an online textbook subscription service, where you can get access to an entire online library for less than the price of a single book per month. With over 1 million books across 1000+ topics, we’ve got you covered! Learn more here.
Do you support text-to-speech?
Look out for the read-aloud symbol on your next book to see if you can listen to it. The read-aloud tool reads text aloud for you, highlighting the text as it is being read. You can pause it, speed it up and slow it down. Learn more here.
Is HTML5 Graphing and Data Visualization Cookbook an online PDF/ePUB?
Yes, you can access HTML5 Graphing and Data Visualization Cookbook by Ben Fhala in PDF and/or ePUB format, as well as other popular books in Informatique & Modélisation et conception de données. We have over one million books available in our catalogue for you to explore.
Information
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...
Table of contents
Citation styles for HTML5 Graphing and Data Visualization Cookbook
APA 6 Citation
Fhala, B. (2012). HTML5 Graphing and Data Visualization Cookbook (1st ed.). Packt Publishing. Retrieved from https://www.perlego.com/book/389317/html5-graphing-and-data-visualization-cookbook-pdf (Original work published 2012)
Chicago Citation
Fhala, Ben. (2012) 2012. HTML5 Graphing and Data Visualization Cookbook. 1st ed. Packt Publishing. https://www.perlego.com/book/389317/html5-graphing-and-data-visualization-cookbook-pdf.
Harvard Citation
Fhala, B. (2012) HTML5 Graphing and Data Visualization Cookbook. 1st edn. Packt Publishing. Available at: https://www.perlego.com/book/389317/html5-graphing-and-data-visualization-cookbook-pdf (Accessed: 14 October 2022).
MLA 7 Citation
Fhala, Ben. HTML5 Graphing and Data Visualization Cookbook. 1st ed. Packt Publishing, 2012. Web. 14 Oct. 2022.