Feel free to check the live version<\/u><\/a><\/strong><\/em>. Our interactive infographic is a single page application (SPA). I built it without using any framework so that the code would be easy to deconstruct.<\/p>\n Remark<\/b> I\u2019ll walk through the architecture first; then I will explain the code.<\/p>\n Basically, the project is to combine a static and dynamic data set in order to create a more engaging infographic. The data are:<\/p>\n The key numbers are stored within the project files, whereas the quiz results are saved into a database (MongoDB) then read via a server to be visualized. The quiz results are saved in MongoDB. There are two quizzes in this application:<\/p>\n Remark<\/b> Here is the structure of the data saved in the database: 2.Second quiz<\/b><\/p>\n The user interface is pretty simple and straightforward; it has 13 pages (or screens, as it is a single page application). Each page displays either:<\/p>\n All the pages have two buttons to go to the next or previous page.<\/p>\n The pages are under this folder To better organize the pages and to make the maintenance in the future easier, each page has its own folder, where one file has the data and the content of the visualization, and the other file has the HTML code.<\/p>\n For example, the host page folder has the following files:<\/p>\n I use jQuery to perform an Ajax request to the server. Nevertheless, any other library or framework will work fine as well. The files related to managing the requests are under the folder utils.<\/p>\n There are two requests The ajax method is in the The main tasks of the server are to save the quiz data and to retrieve them from the database. Remark<\/b> The server offers four routes:<\/p>\n Once all the components of the application are created, all you have to do is to find a web service to host the application. I use the online cloud web service AmazonAWS, but any other service can do the job. Notice the file Well, that\u2019s it, it is that easy. Now you know how to build a responsive interactive infographic with the library Highcharts, and all that without a framework.<\/p>\n Feel free to share your experience with infographics and Highcharts, and let me know if you have any questions or remarks using the comments section below.<\/p>\n","protected":false},"excerpt":{"rendered":" Step by step tutorial to build an interactive infographic with Highcharts as a single page application.<\/p>\n","protected":false},"author":32,"featured_media":19376,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[1094,876],"coauthors":[699],"class_list":["post-19336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-highcharts-core","tag-highcharts-maps"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=19336"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19336\/revisions"}],"predecessor-version":[{"id":29228,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/19336\/revisions\/29228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/19376"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=19336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=19336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=19336"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=19336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/03\/16103053\/infographic-live-demo.jpg\")
<\/a><\/p>\n
\nBasic knowledge of Javascript, Node.js, expressJS, and MongoDB is highly recommended to understand the application code.<\/i><\/p>\nThe architecture<\/h2>\n
\n
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/03\/13140717\/image2-1.jpg\")
\nLet\u2019s examine each part of the architecture.<\/p>\nDatabase<\/h2>\n
\n
\nMongoDB is easy to use when building JavaScript apps, as it stores JSON natively. You are, of course, free to use any other database or service that suits you.<\/i><\/p>\n
\n1.First quiz<\/b><\/p>\n{\r\n \"name\": \"hostPolls\",\r\n \"answers\": [\r\n 96,\r\n 44,\r\n 49,\r\n 49\r\n ]\r\n}<\/pre>\n{\r\n \"name\": \"playerPolls\",\r\n \"answers\": [\r\n 32,\r\n 9,\r\n 2,\r\n 27,\r\n 6,\r\n 9\r\n ]\r\n}<\/pre>\nUser interface<\/h2>\n
\n
\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/03\/13141252\/image1-1.jpg\")
<\/p>\n\n
\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/03\/13141315\/image4.jpg\")
<\/p>\n\n
\n
![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/03\/13141334\/image6.jpg\")
<\/p>\nsrc\/pages<\/code>:
\n![\"\"](\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/03\/13141550\/image3.jpg\")
<\/p>\n\n
host.js<\/code> has both event\u2019s maps where all the tournaments accrued.<\/li>\nhostPage.js<\/code> has the HTML code to render the page.<\/li>\n<\/ul>\npostPoll<\/code> and getPoll<\/code>:<\/p>\nimport ajax from '.\/ajax.js';\r\nexport function postPoll(route, answers) {\r\n return ajax('POST', route, JSON.stringify(answers));\r\n}\r\nexport function getPoll(route) {\r\n return ajax('GET', route);\r\n}<\/pre>\najax.js<\/code> file:<\/p>\n$.ajax({\r\n type: type,\r\n url: url + route,\r\n dataType: 'json',\r\n data: data,\r\n contentType: 'application\/json',\r\n success: function(result) {\r\n resolve(result);\r\n },\r\n error: function(error) {\r\n reject(error);\r\n }\r\n });<\/pre>\nServer<\/h2>\n
\nI built the server using Node.js, with the following modules :<\/p>\n\n
\nBe sure to protect your credentials by using a config.json<\/code> file<\/i><\/p>\n{\r\n \"dbCredentials\":{\r\n \"DBlogin\" : \"myLogin\",\r\n \"DBpwd\" : \"letMeIn\" \r\n },\r\n \"BLink\" : \"myLinkTo\/infographic\" \r\n}<\/pre>\n\n
postHostData<\/code> to save the host quiz answers into the database.<\/li>\ngetHostData<\/code> to read the host quiz result from the database.<\/li>\npostPlayerData<\/code> to save the player quiz answers into the database.<\/li>\ngetPlayerData<\/code> to read the player quiz result from the database.<\/li>\n<\/ul>\nlambda.js<\/code> to run the application on AWS lambda.
\nThe code of this file is very basic:<\/p>\nconst awsServerlessExpress = require('aws-serverless-express');\r\nconst app = require('.\/lib\/app');\r\nconst server = awsServerlessExpress.createServer(app);\r\nexports.handler = (event, context) => {\r\n return awsServerlessExpress.proxy(server, event, context);\r\n};<\/pre>\n