\n
Interactive Charts and Graphs #64: Challenge | Recap
\n
I recently began reading The Wall Street Journal Guide to Information Graphics. It’s been on my reading list for over a year, but I never took the time to go through it. Until this week.
\n
\n
That’s because a blog reader emailed me looking for examples of charts and graphs in e-learning courses. I’ve collected some examples from the news sites, but nothing really focused around online training courses.
\n
Knowing how important information graphics are in the community, I thought this would make a great e-learning challenge!
\n
Interactive Bar Charts
\n
Articulate community member Michael Hinze shared a creative solution for animating bar charts using Storyline 1. Using button sets and custom states, the bar graph updates based on the options selected by the user.
\n
\n
View demo | Download
\n
Interactive Graphs with Sliders
\n
One of my favorite examples is this interactive graph from community member Joanna Kurpiewska. Shared in a recent e-learning sliders challenge, this example makes use of Storyline 2's sliders to adjust the market price and quantities of goods.
\n
View the interactive graph
\n
Interactive Charts
\n
Here's another example from Articulate Super Hero Phil Mayor. Learners are asked to add numeric data to compare their data with the chart's built-in data.
\n
\n
View demo
\n
Challenge of the week
\n
This week your challenge is to show how interactive charts and graphs can be used in online training.
\n
You can share a static example of charts and graphs or you can create something more interactive to show and compare data.
\n
Resources
\n
It always helps to build templates and demos when you have real content. Here are a few resources that can help. If you have another source for data, please share it in the comments.
\n
\n
Share your e-learning work
\n
\n- Comments: Use the comments section below to share a link to your published example and blog post.
\n- Forums: Start your own thread and share a link to your published example..
\n- Personal blog: If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
\n- Twitter: If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
\n- Facebook: Share your work on our Facebook page by replying to this Facebook post with a link to your example.
\n
\n
Last week’s e-learning challenge:
\n
\n
E-Learning Recap #63: Challenge | Recap
\n
\n
Wishing you a chart-tastic week, E-Learning Heroes!
\n
New to the e-learning challenges?
\n
The weekly challenges are ongoing opportunities to learn, share, and build your e-learning portfolios. You can jump into any or all of the previous challenges anytime you want. I’ll update the recap posts to include your demos.
\n
If you have a blog, please consider writing about your challenges. We’ll link back to your posts so the great work you’re sharing gets even more exposure.
\n
If you share your demos on Twitter, try using #ELHChallenge so your tweeps can track your e-learning coolness.
\n
","kudosSumWeight":0,"postTime":"2014-12-19T07:41:55.000-08:00","images":{"__typename":"AssociatedImageConnection","edges":[{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDE","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTkwMDEzaTRDRUYzMkIwNUYwMzBBNkE?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDI","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTY1MDY4aUFBREVENzUzREJGOEUzQjM?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDM","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTQwNjFpQUI1NzFDNzA0RjZCMDY4Ng?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDQ","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTI5MzFpNzE4Mjk5NzYxRDNGQUIyMQ?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDU","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTI5NTgyaTZDQUZFNkQwRURBMTExOEY?revision=1\"}"}},{"__typename":"AssociatedImageEdge","cursor":"MjUuMnwyLjF8b3wyNXxfTlZffDY","node":{"__ref":"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTQzMjEwaTlGMzc5OTNDODZCMUJDNkM?revision=1\"}"}}],"totalCount":6,"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"attachments":{"__typename":"AttachmentConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[]},"tags":{"__typename":"TagConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[{"__typename":"TagEdge","cursor":"MjUuMnwyLjF8b3wxMHxfTlZffDE","node":{"__typename":"Tag","id":"tag:E-Learning Challenge","text":"E-Learning Challenge","time":"2015-11-11T20:02:32.000-08:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}},{"__typename":"TagEdge","cursor":"MjUuMnwyLjF8b3wxMHxfTlZffDI","node":{"__typename":"Tag","id":"tag:Template","text":"Template","time":"2014-12-19T07:41:55.000-08:00","lastActivityTime":null,"messagesCount":null,"followersCount":null}}]},"timeToRead":3,"rawTeaser":"","introduction":"","coverImage":null,"coverImageProperties":{"__typename":"CoverImageProperties","style":"STANDARD","titlePosition":"BOTTOM","altText":""},"currentRevision":{"__ref":"Revision:revision:1073609_1"},"latestVersion":{"__typename":"FriendlyVersion","major":"1","minor":"0"},"metrics":{"__typename":"MessageMetrics","views":181},"visibilityScope":"PUBLIC","canonicalUrl":null,"seoTitle":null,"seoDescription":null,"placeholder":false,"originalMessageForPlaceholder":null,"contributors":{"__typename":"UserConnection","edges":[]},"nonCoAuthorContributors":{"__typename":"UserConnection","edges":[]},"coAuthors":{"__typename":"UserConnection","edges":[]},"blogMessagePolicies":{"__typename":"BlogMessagePolicies","canDoAuthoringActionsOnBlog":{"__typename":"PolicyResult","failureReason":{"__typename":"FailureReason","message":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","key":"error.lithium.policies.blog.action_can_do_authoring_action.accessDenied","args":[]}}},"archivalData":null,"customFields":[],"revisions({\"constraints\":{\"isPublished\":{\"eq\":true}},\"first\":1})":{"__typename":"RevisionConnection","totalCount":1}},"Conversation:conversation:1073609":{"__typename":"Conversation","id":"conversation:1073609","solved":false,"topic":{"__ref":"BlogTopicMessage:message:1073609"},"lastPostingActivityTime":"2017-06-10T02:56:12.000-07:00","lastPostTime":"2017-06-10T02:56:12.000-07:00","unreadReplyCount":99,"isSubscribed":false},"ModerationData:moderation_data:1073609":{"__typename":"ModerationData","id":"moderation_data:1073609","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTkwMDEzaTRDRUYzMkIwNUYwMzBBNkE?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTkwMDEzaTRDRUYzMkIwNUYwMzBBNkE?revision=1","title":"uploads_rte_cxumdyga_ElearningChallenge#70.png","associationType":"BODY","width":760,"height":380,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTY1MDY4aUFBREVENzUzREJGOEUzQjM?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTY1MDY4aUFBREVENzUzREJGOEUzQjM?revision=1","title":"uploads_rte_dmcpnrig_Wall-Street-Journal-Guide-to-Information-Graphics.jpg","associationType":"BODY","width":760,"height":346,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTQwNjFpQUI1NzFDNzA0RjZCMDY4Ng?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTQwNjFpQUI1NzFDNzA0RjZCMDY4Ng?revision=1","title":"uploads_rte_vuyzelbw_MichaelHinze-interactive-charts.jpg","associationType":"BODY","width":738,"height":445,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTI5MzFpNzE4Mjk5NzYxRDNGQUIyMQ?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTI5MzFpNzE4Mjk5NzYxRDNGQUIyMQ?revision=1","title":"uploads_rte_foubygra_elearning-cookies-Joanna-Kurpiewska.jpg","associationType":"BODY","width":720,"height":360,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTI5NTgyaTZDQUZFNkQwRURBMTExOEY?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTI5NTgyaTZDQUZFNkQwRURBMTExOEY?revision=1","title":"uploads_rte_vtorwpxl_interactive-charts-phil-mayor.jpg","associationType":"BODY","width":760,"height":427,"altText":null},"AssociatedImage:{\"url\":\"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTQzMjEwaTlGMzc5OTNDODZCMUJDNkM?revision=1\"}":{"__typename":"AssociatedImage","url":"https://community.articulate.com/t5/s/rwgqn69235/images/bS0xMDczNjA5LTQzMjEwaTlGMzc5OTNDODZCMUJDNkM?revision=1","title":"uploads_rte_ntrzoxbi_Pantone-Color-of-the-Year_RECAP.jpg","associationType":"BODY","width":760,"height":380,"altText":null},"Revision:revision:1073609_1":{"__typename":"Revision","id":"revision:1073609_1","lastEditTime":"2014-12-19T07:41:55.000-08:00"},"BlogReplyMessage:message:1073645":{"__typename":"BlogReplyMessage","id":"message:1073645","conversation":{"__ref":"Conversation:conversation:1073609"},"author":{"__ref":"User:user:969278"},"revisionNum":1,"uid":1073645,"depth":2,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"subject":"Re: Present Data Using Interactive Charts and Graphs #64","readOnly":true,"editFrozen":false,"moderationData":{"__ref":"ModerationData:moderation_data:1073645"},"parent":{"__ref":"BlogReplyMessage:message:1073636"},"body":"A break from work means that can have some fun in the challenges :-)
Here is my submission:
http://www.gerardfriel.com/portfolio/uploads/graphs/story.html ","body@stringLength":"346","rawBody":"A break from work means that can have some fun in the challenges :-)
Here is my submission:
http://www.gerardfriel.com/portfolio/uploads/graphs/story.html ","author":{"__ref":"User:user:969278"},"postTime":"2014-12-22T14:19:27.000-08:00","customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}},"repliesCount":2},"Revision:revision:1073645_1":{"__typename":"Revision","id":"revision:1073645_1","lastEditTime":"2014-12-22T20:33:55.000-08:00"},"QueryVariables:ReplyList:message:1073645:1":{"__typename":"QueryVariables","id":"ReplyList:message:1073645:1","value":{"id":"message:1073645","first":10,"sorts":{"postTime":{"direction":"ASC"}},"repliesFirst":3,"repliesFirstDepthThree":1,"repliesSorts":{"postTime":{"direction":"ASC"}},"useAvatar":true,"useAuthorLogin":true,"useAuthorRank":true,"useBody":true,"useKudosCount":true,"useTimeToRead":false,"useMedia":false,"useReadOnlyIcon":false,"useRepliesCount":true,"useSearchSnippet":false,"useAcceptedSolutionButton":false,"useSolvedBadge":false,"useAttachments":false,"attachmentsFirst":5,"useTags":false,"useNodeAncestors":false,"useUserHoverCard":false,"useNodeHoverCard":false,"useModerationStatus":true,"usePreviewSubjectModal":false,"useMessageStatus":true}},"ROOT_MUTATION":{"__typename":"Mutation"},"CachedAsset:text:en_US-shared/client/components/users/UserAvatar-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/users/UserAvatar-1743191525365","value":{"altText":"{login}'s avatar","altTextGeneric":"User's avatar"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/ranks/UserRankLabel-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/ranks/UserRankLabel-1743191525365","value":{"altTitle":"Icon for {rankName} rank"},"localOverride":false},"CachedAsset:text:en_US-components/users/UserRegistrationDate-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-components/users/UserRegistrationDate-1743191525365","value":{"noPrefix":"{date}","withPrefix":"Joined {date}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeAvatar-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeAvatar-1743191525365","value":{"altTitle":"Node avatar for {nodeTitle}"},"localOverride":false},"CachedAsset:text:en_US-shared/client/components/nodes/NodeDescription-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-shared/client/components/nodes/NodeDescription-1743191525365","value":{"description":"{description}"},"localOverride":false},"CachedAsset:text:en_US-components/messages/ThreadedReplyList-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-components/messages/ThreadedReplyList-1743191525365","value":{"title":"{count, plural, one{# Reply} other{# Replies}}","title@board:BLOG":"{count, plural, one{# Comment} other{# Comments}}","title@board:TKB":"{count, plural, one{# Comment} other{# Comments}}","title@board:IDEA":"{count, plural, one{# Comment} other{# Comments}}","title@board:OCCASION":"{count, plural, one{# Comment} other{# Comments}}","noRepliesTitle":"No Replies","noRepliesTitle@board:BLOG":"No Comments","noRepliesTitle@board:TKB":"No Comments","noRepliesTitle@board:IDEA":"No Comments","noRepliesTitle@board:OCCASION":"No Comments","noRepliesDescription":"Be the first to reply","noRepliesDescription@board:BLOG":"Be the first to comment","noRepliesDescription@board:TKB":"Be the first to comment","noRepliesDescription@board:IDEA":"Be the first to comment","noRepliesDescription@board:OCCASION":"Be the first to comment","messageReadOnlyAlert:BLOG":"Comments have been turned off for this post","messageReadOnlyAlert:TKB":"Comments have been turned off for this article","messageReadOnlyAlert:IDEA":"Comments have been turned off for this idea","messageReadOnlyAlert:FORUM":"Replies have been turned off for this discussion","messageReadOnlyAlert:OCCASION":"Comments have been turned off for this event"},"localOverride":false},"User:user:266384":{"__typename":"User","id":"user:266384","uid":266384,"login":"RichCordrey","biography":null,"registrationData":{"__typename":"RegistrationData","status":null,"registrationTime":"2014-10-23T00:20:35.000-07:00"},"deleted":false,"email":"","avatar":{"__typename":"UserAvatar","url":"https://api.articulate.com/id/v1/avatars/auth0|316557a0-2197-0132-1cb3-22000b2f96a1"},"rank":{"__ref":"Rank:rank:6"},"entityType":"USER","eventPath":"community:rwgqn69235/user:266384"},"ModerationData:moderation_data:1073650":{"__typename":"ModerationData","id":"moderation_data:1073650","status":"APPROVED","rejectReason":null,"isReportedAbuse":false,"rejectUser":null,"rejectTime":null,"rejectActorType":null},"BlogReplyMessage:message:1073650":{"__typename":"BlogReplyMessage","author":{"__ref":"User:user:266384"},"id":"message:1073650","revisionNum":1,"uid":1073650,"depth":3,"hasGivenKudo":false,"subscribed":false,"board":{"__ref":"Blog:board:e-learning-challenges"},"parent":{"__ref":"BlogReplyMessage:message:1073645"},"conversation":{"__ref":"Conversation:conversation:1073609"},"subject":"Re: Present Data Using Interactive Charts and Graphs #64","moderationData":{"__ref":"ModerationData:moderation_data:1073650"},"body":"Now can you add some sort of hypnosis that will \"help\" administrators understand it?
Great interaction idea, and i like the personalization!
","body@stripHtml({\"removeProcessingText\":false,\"removeSpoilerMarkup\":false,\"removeTocMarkup\":false,\"truncateLength\":200})@stringLength":"145","kudosSumWeight":0,"repliesCount":0,"postTime":"2014-12-23T04:44:15.000-08:00","lastPublishTime":"2014-12-23T04:44:15.000-08:00","metrics":{"__typename":"MessageMetrics","views":2},"visibilityScope":"PUBLIC","placeholder":false,"originalMessageForPlaceholder":null,"entityType":"BLOG_REPLY","eventPath":"category:e-learning-challenges-and-recaps/category:learn/community:rwgqn69235board:e-learning-challenges/message:1073609/message:1073650","replies":{"__typename":"MessageConnection","pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null},"edges":[]},"customFields":[],"attachments":{"__typename":"AttachmentConnection","edges":[],"pageInfo":{"__typename":"PageInfo","hasNextPage":false,"endCursor":null,"hasPreviousPage":false,"startCursor":null}}},"CachedAsset:text:en_US-components/tags/TagView/TagViewChip-1743191525365":{"__typename":"CachedAsset","id":"text:en_US-components/tags/TagView/TagViewChip-1743191525365","value":{"tagLabelName":"Tag name {tagName}"},"localOverride":false}}}},"page":"/blogs/BlogMessagePage/BlogMessagePage","query":{"boardId":"e-learning-challenges","messageSubject":"present-data-using-interactive-charts-and-graphs-64","messageId":"1073609","replyId":"1073645"},"buildId":"Btkyb7T6TeYM9D2gUmiOv","runtimeConfig":{"buildInformationVisible":false,"logLevelApp":"info","logLevelMetrics":"info","openTelemetryClientEnabled":false,"openTelemetryConfigName":"articulate","openTelemetryServiceVersion":"25.2.0","openTelemetryUniverse":"prod","openTelemetryCollector":"http://localhost:4318","openTelemetryRouteChangeAllowedTime":"5000","apolloDevToolsEnabled":false,"inboxMuteWipFeatureEnabled":false},"isFallback":false,"isExperimentalCompile":false,"dynamicIds":["./components/customComponent/CustomComponent/CustomComponent.tsx","./components/community/Navbar/NavbarWidget.tsx","./components/community/Breadcrumb/BreadcrumbWidget.tsx","./components/blogs/BlogArticleWidget/BlogArticleWidget.tsx","./components/messages/MessageView/MessageViewStandard/MessageViewStandard.tsx","./components/customComponent/CustomComponentContent/TemplateContent.tsx","../shared/client/components/common/List/UnwrappedList/UnwrappedList.tsx","./components/tags/TagView/TagView.tsx","./components/tags/TagView/TagViewChip/TagViewChip.tsx","../shared/client/components/common/List/UnstyledList/UnstyledList.tsx","./components/messages/MessageView/MessageView.tsx"],"appGip":true,"scriptLoader":[]}