Start learning with our library of video tutorials taught by experts. Get started
Spice up dry data presentations with interactive and visually engaging charts. This installment of HTML5 Projects shows how to build interactive bar charts, dynamically drawn with HTML5 Canvas. The user-friendly chart elements allow visitors to record different data scenarios by dragging bars. Author Joseph Lowery also shows how to automatically save the data from day to day. Altogether, this course offers a great introduction to HTML5 form elements with Canvas, integrated drag and drop, and local storage technologies.
(music playing). Hello, thanks for checking out HTML5 Projects, Interactive Charts. I'm Joe Lowery and I'll be your guide to building an online interactive bar chart. This project is great for web apps where you want to enable the user to easily chart their own progress in a task. And then save it for a future reference, sharing, or just bragging rights. We'll put the powerhouse HTML5 Feature Canvas to work and I'll show you how to import background images, add text, draw primitive shapes, integrate anchor points for single direction dragging, display continuously updated numeric feedback and much more. You'll see how to incorporate an HTML5 Web Storage Solution to effortlessly keep track of the chart progress from day to day, as well as how to save the entire chart to admire or share.
Sound good, then let's get going with HTML5 Projects, Interactive Charts.
There are currently no FAQs about HTML5 Projects: Interactive Charts.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.