Join Joseph Lowery for an in-depth discussion in this video Storing the user's progress, part of Creating Interactive Charts with HTML5.
In the last chapter, the bar chart went interactive. …Users can now drag the daily bars to indicate their progress, and see the …related numeric value. But since the app is intended to be used …over a period of days, the only way to retain their progress would be to keep …the browser window open and avoid moving the bars. …In this lesson, we're going to use a very handy HTML5 technology called local …storage to automatically record the height of the bar every time it moves.…
And then, display that same height whenever the user revisits the page in …the same browser. Cool, eh? …Let's go do it. First, let's set it up so our app …automatically stores the height values. Because we want this value stored every …time the height of the bar is changed, we'll add our code to the height change …routines we previously inserted. These routines are the second to last …code chunks in the init stage function right above Stage Draw.…
So let's head on down to around line 184. There's the first of our three routines, …
Released
5/23/2013- 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
Share this video
Embed this video
Video: Storing the user's progress