Join Joseph Lowery for an in-depth discussion in this video What we're going to build, part of Creating Interactive Charts with HTML5.
In this lesson, I'm going to run through the completed interactive charts project, so you can see what we'll be building. If you're the type who likes to dive right into the code, and you've already downloaded the exercise files, you'll find the completed project in the Chapter 1 01_01 folder. So, welcome to the fictional Trans Planet Airlines website, where folks planning their trip to the moon can record their Lunar Leaping Training progress. As the instructions say, the idea is to drag the bar up to show how high you jumped in your training that day. So, if I move my mouse over the corner of day 1, a handle appears, and I can drag that bar up.
When I do, a number value appears showing the relative progress. Let's say I just made it to 4 today, whether it's inches, feet, yards or meters, that can be specified later. The relative number and its relationship to the height of the bar, is what's important. So, here's where a little bit of behind the scenes techno magic takes place. Let's say, I've close my browser, and then come back the next day after a rigorous session in the lunar leaping simulator. I want to mark my progress for day two. I'll simulate that experience by copying my URL, and then opening up a new tab, and pasting it in.
When I scroll down to see the chart, low and behold, the day one value is displayed correctly. We'll use the HTML5 technology Local Storage to achieve that effect. Okay, let's bring up the bar for Day 2. Doing better, made it to 9 this time. Again, the value is automatically stored for later. Alright, let's go for Day 3.
Woah, got up to 17, excellent work, I think I'm ready to go lunar leaping. Now, if I want to show everyone how great I did, I can click the Training Complete button, and the entire chart, bars, values, and background, is merged into a single image, which I can save locally and then share to my hearts desire. So, that's the project, and now you're ready to peek under the hood, so you can get a better understanding of the various technologies that are driving this app.
- Crafting the HTML
- Initializing the stage
- Adding a legend and labels
- Drawing the bars in the bar chart
- Adding anchors for interactivity
- Connecting the feedback
- Storing user progress