Packt+ | Advance your knowledge in tech

You're reading from HTML5 Graphing and Data Visualization Cookbook Get a complete grounding in the exciting visual world of Canvas and HTML5 using this recipe-packed cookbook. Learn to create charts and graphs, draw complex shapes, add interactivity, work with Google maps, and much more.

Product type Paperback

Published in Nov 2012

Publisher Packt

ISBN-13 9781849693707

Length 344 pages

Edition 1st Edition

Languages

JavaScript

Tools

Concepts

Data Visualization

Author (1):

Ben Fhala

View More author details

Table of Contents (17) Chapters

HTML5 Graphing and Data Visualization Cookbook

Credits

About the Author

About the Reviewer

www.PacktPub.com

Preface

1. Drawing Shapes in Canvas

2. Advanced Drawing in Canvas FREE CHAPTER

3. Creating Cartesian-based Graphs

4. Let's Curve Things Up

5. Getting Out of the Box

6. Bringing Static Things to Life

7. Depending on the Open Source Sphere

8. Playing with Google Charts

9. Using Google Maps

10. Maps in Action

Index

Creating an animated 3D chart (canvas3DGraph)

This recipe is real fun. It's based on the source files of Dragan Bajcic. It's not a full library of charts, but it's a great inspirational chart that can be modified and used to create your own 3D data visualizations.

Although our source files in our attached sample are modified from the original source (mainly canvas3DGraph.js), to get the original source for the open source projects used in this book, please visit our centralized list at http://blog.everythingfla.com/?p=339.

Getting ready

If you want to follow our updates, download the original source files from the provided link or review the changes that we make to Dragan's source files.

How to do it...

Let's jump right in as we have a lot of work to do:

Create the HTML file:

<!DOCTYPE html>
<html>
  <head>
    <title>canvas3DGraph.js</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="./external/dragan/canvas3DGraph.css">
    <script...