How To Build a Data Analytics Dashboard
Tags: database, learning, datascience, sql
Published: 2024-05-26 22:28:25

<!-- wp:paragraph -->
<p>Building a data analytics dashboard can be a daunting task, especially when you need to manage data from multiple sources and present it in a user-friendly manner. Fortunately, Five offers a powerful and rapid development environment that simplifies this process. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>In this step-by-step guide, we'll walk you through building a responsive data analytics dashboard that connects to a REST API, visualizes the data, and provides interactive features for end-users.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">What Is a Data Analytics Dashboard?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A data analytics dashboard is a visual representation of key performance indicators (KPIs), metrics, and data points relevant to an organization, department, specific process or business. It consolidates and presents critical information in an easy-to-understand format, such as charts, graphs, tables, and gauges, enabling users to monitor, analyze, and derive insights from their data in real-time.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Who Is This Article For?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This article is great for business analysts, data analysts, managers, executives, IT professionals, entrepreneurs, consultants, and marketers. Those individuals who often work with data and need to communicate insights effectively to drive informed decision-making. Learning how to create visually appealing and interactive dashboards enables you to monitor key performance indicators, identify trends, and optimize strategies based on real-time data. Students and researchers in fields such as business, economics, and data science may also find the article useful for presenting their findings.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:essential-blocks/table-of-contents {"blockId":"eb-toc-fd7th","blockMeta":{"desktop":".eb-toc-fd7th.eb-toc-container { max-width:610px; background-color:var(\u002d\u002deb-global-background-color); padding:30px; border-radius:4px; transition:all 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s }.eb-toc-fd7th.eb-toc-container .eb-toc-title { text-align:center; cursor:default; color:rgba(255,255,255,1); background-color:rgba(69,136,216,1); font-size:22px; font-weight:normal }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper { background-color:rgba(241,235,218,1); text-align:left }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li { color:rgba(0,21,36,1); font-size:14px; line-height:1.4em; font-weight:normal }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li:hover,.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a { color:var(\u002d\u002deb-global-link-color) }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li a { color:inherit }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li svg path { stroke:rgba(0,21,36,1) }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li:hover svg path { stroke:var(\u002d\u002deb-global-link-color) }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li a,.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li a:focus { text-decoration:none; background:none }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li { padding-top:4px }.eb-toc-fd7th.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) { padding-bottom:4px }.eb-toc-fd7th.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list { background:#fff; border-radius:4px }","tab":"","mobile":"","editorDesktop":"\n\t\t  \n\t\t  \n\n\t\t  .eb-toc-fd7th.eb-toc-container{\n\t\t\t  max-width:610px;\n\n\t\t\t  background-color:var(\u002d\u002deb-global-background-color);\n\n\t\t\t  \n             \n\n            \n\t\t\t  \n            padding: 30px;\n\n            \n\t\t\t  \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n\t\t\t  transition:all 0.5s, \n  border 0.5s, border-radius 0.5s, box-shadow 0.5s\n  ;\n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n\n        \n\n    \n          \n                 \n\n            \n          \n\n     \n\n    \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-title{\n\t\t\t  text-align: center;\n\t\t\t  cursor:default;\n\t\t\t  color: rgba(255,255,255,1);\n\t\t\t  background-color:rgba(69,136,216,1);\n\t\t\t  \n\t\t\t  \n             \n\n            \n\t\t\t  \n               \n              font-size: 22px;\n               \n              font-weight: normal;\n               \n               \n               \n               \n          \n\n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper{\n\t\t\t  background-color:rgba(241,235,218,1);\n\t\t\t  text-align: left;\n\t\t\t  \n             \n\n            \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper ul,\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper ol\n\t\t  {\n\t\t\t  \n\t\t\t  \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li {\n\t\t\t  color:rgba(0,21,36,1);\n\t\t\t  \n               \n              font-size: 14px;\n              line-height: 1.4em;\n              font-weight: normal;\n               \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li:hover,\n          .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li.eb-toc-active \u003e a{\n\t\t\t  color:var(\u002d\u002deb-global-link-color);\n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li a {\n\t\t\t  color:inherit;\n\t\t  }\n\n          .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li svg path{\n            stroke:rgba(0,21,36,1);\n          }\n          .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li:hover svg path{\n            stroke:var(\u002d\u002deb-global-link-color);\n          }\n\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li a,\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li a:focus{\n\t\t\t  text-decoration:none;\n\t\t\t  background:none;\n\t\t  }\n\n\t\t  \n\n        .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li {\n            padding-top: 4px;\n        }\n\n        .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) {\n            padding-bottom: 4px;\n        }\n\n        \n        .eb-toc-fd7th.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            background: #fff;\n            \n      \n           \n          \n\n      \n          \n                border-radius: 4px;\n\n            \n          \n\n       \n\n\n    \n        }\n\n\n\t  \n\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper{\n\t\t\t  display:block;\n\t\t  }\n\t\t  ","editorTab":"\n\t\t  \n\t\t  .eb-toc-fd7th.eb-toc-container{\n\t\t\t  \n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n\t\t  }\n\t\t  .eb-toc-fd7th.eb-toc-container:hover{\n\t\t\t  \n    \n         \n        \n    \n              \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-fd7th.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n\n    \n        }\n\n\t  \n\t\t  ","editorMobile":"\n\t\t  \n\t\t  .eb-toc-fd7th.eb-toc-container{\n\t\t\t  \n\n\n\t\t\t  \n                 \n\n            \n\t\t\t  \n                 \n\n            \n\t\t\t  \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container:hover{\n\t\t\t  \n    \n         \n\n        \n    \n              \n                 \n\n            \n          \n\n    \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-title{\n\t\t\t  \n                 \n\n            \n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper{\n\t\t\t  \n                 \n\n            \n\t\t  }\n\n\t\t  .eb-toc-fd7th.eb-toc-container .eb-toc-wrapper li{\n\t\t\t  \n               \n               \n               \n          \n\t\t  }\n\n          .eb-toc-fd7th.eb-toc-container.style-1 .eb-toc__list-wrap \u003e .eb-toc__list li .eb-toc__list{\n            \n    \n         \n\n        \n\n    \n          \n                 \n\n            \n          \n    \n        }\n\n\t  \n\t  "},"headers":[{"level":2,"content":"What Is a Data Analytics Dashboard?","text":"What Is a Data Analytics Dashboard?","link":"what-is-a-data-analytics-dashboard"},{"level":2,"content":"Who Is This Article For?","text":"Who Is This Article For?","link":"who-is-this-article-for"},{"level":2,"content":"Why Build a Data Analytics Dashboard?","text":"Why Build a Data Analytics Dashboard?","link":"why-build-a-data-analytics-dashboard"},{"level":2,"content":"Goals and Objectives","text":"Goals and Objectives","link":"goals-and-objectives"},{"level":2,"content":"Step-by-Step Guide","text":"Step-by-Step Guide","link":"step-by-step-guide"},{"level":3,"content":"Step 1: Creating a New Application","text":"Step 1: Creating a New Application","link":"step-1-creating-a-new-application"},{"level":2,"content":"Side Note: Resources and Downloads","text":"Side Note: Resources and Downloads","link":"side-note-resources-and-downloads"},{"level":3,"content":"Preview The Application Online","text":"Preview The Application Online","link":"preview-the-application-online"},{"level":3,"content":"Download the Finished Application","text":"Download the Finished Application","link":"download-the-finished-application"},{"level":3,"content":"Step 2: Running Your Application","text":"Step 2: Running Your Application","link":"step-2-running-your-application"},{"level":3,"content":"Step 3: Adding an API as a Data Source","text":"Step 3: Adding an API as a Data Source","link":"step-3-adding-an-api-as-a-data-source"},{"level":3,"content":"Step 4: Creating a Form on the API","text":"Step 4: Creating a Form on the API","link":"step-4-creating-a-form-on-the-api"},{"level":2,"content":"First Checkpoint: Run Your Application","text":"First Checkpoint: Run Your Application","link":"first-checkpoint-run-your-application"},{"level":3,"content":"Step 5: Visualizing the Data from the API","text":"Step 5: Visualizing the Data from the API","link":"step-5-visualizing-the-data-from-the-api"},{"level":3,"content":"Step 6: Combining Multiple Charts in a Dashboard","text":"Step 6: Combining Multiple Charts in a Dashboard","link":"step-6-combining-multiple-charts-in-a-dashboard"},{"level":3,"content":"Step 7: Adding Menu Items to Your App","text":"Step 7: Adding Menu Items to Your App","link":"step-7-adding-menu-items-to-your-app"},{"level":2,"content":"Second Checkpoint: Run Your Application","text":"Second Checkpoint: Run Your Application","link":"second-checkpoint-run-your-application"},{"level":3,"content":"Finding Help in Five","text":"Finding Help in Five","link":"finding-help-in-five"}],"deleteHeaderList":[{"label":"What Is a Data Analytics Dashboard?","value":"what-is-a-data-analytics-dashboard","isDelete":false},{"label":"Who Is This Article For?","value":"who-is-this-article-for","isDelete":false},{"label":"Why Build a Data Analytics Dashboard?","value":"why-build-a-data-analytics-dashboard","isDelete":false},{"label":"Goals and Objectives","value":"goals-and-objectives","isDelete":false},{"label":"Step-by-Step Guide","value":"step-by-step-guide","isDelete":false},{"label":"Step 1: Creating a New Application","value":"step-1-creating-a-new-application","isDelete":false},{"label":"Side Note: Resources and Downloads","value":"side-note-resources-and-downloads","isDelete":false},{"label":"Preview The Application Online","value":"preview-the-application-online","isDelete":false},{"label":"Download the Finished Application","value":"download-the-finished-application","isDelete":false},{"label":"Step 2: Running Your Application","value":"step-2-running-your-application","isDelete":false},{"label":"Step 3: Adding an API as a Data Source","value":"step-3-adding-an-api-as-a-data-source","isDelete":false},{"label":"Step 4: Creating a Form on the API","value":"step-4-creating-a-form-on-the-api","isDelete":false},{"label":"First Checkpoint: Run Your Application","value":"first-checkpoint-run-your-application","isDelete":false},{"label":"Step 5: Visualizing the Data from the API","value":"step-5-visualizing-the-data-from-the-api","isDelete":false},{"label":"Step 6: Combining Multiple Charts in a Dashboard","value":"step-6-combining-multiple-charts-in-a-dashboard","isDelete":false},{"label":"Step 7: Adding Menu Items to Your App","value":"step-7-adding-menu-items-to-your-app","isDelete":false},{"label":"Second Checkpoint: Run Your Application","value":"second-checkpoint-run-your-application","isDelete":false},{"label":"Finding Help in Five","value":"finding-help-in-five","isDelete":false}],"isMigrated":true,"titleBg":"rgba(69,136,216,1)","titleColor":"rgba(255,255,255,1)","contentBg":"rgba(241,235,218,1)","contentColor":"rgba(0,21,36,1)","contentGap":8,"titleAlign":"center","titleFontSize":22,"titleFontWeight":"normal","titleLineHeightUnit":"px","contentFontWeight":"normal","contentLineHeight":1.4,"ttlP_isLinked":true,"commonStyles":{"desktop":".wp-admin .eb-parent-eb-toc-fd7th { display:block }.wp-admin .eb-parent-eb-toc-fd7th { filter:unset }.wp-admin .eb-parent-eb-toc-fd7th::before { content:none }.eb-parent-eb-toc-fd7th { display:block }.root-eb-toc-fd7th { position:relative }","tab":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-fd7th { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-fd7th { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-fd7th::before { content:none }.eb-parent-eb-toc-fd7th { display:block }","mobile":".editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-fd7th { display:block }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-fd7th { filter:none }.editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-fd7th::before { content:none }.eb-parent-eb-toc-fd7th { display:block }"}} /-->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Why Build a Data Analytics Dashboard?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you build a data analytics dashboard using an application builder like Five, the end result is a fully functional web application that goes beyond the capabilities of a simple Excel spreadsheet. This web app offers a range of advantages and features that make it a more powerful and effective tool for data analysis and visualization.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A web app also provides a more user-friendly and interactive experience compared to an Excel dashboard. With features like drill-down capabilities, filters, and interactive charts and graphs, users can easily explore and analyze data at various levels of detail. This interactivity encourages users to engage with the data and uncover valuable insights that might be hidden in static Excel reports.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Furthermore, a data analytics dashboard web app built with Five is highly customizable and can be tailored to match your organization's branding and specific requirements. You can create a visually appealing and professional-looking dashboard that aligns with your company's style and color scheme, making it more engaging and intuitive for users. This level of customization is difficult to achieve with Excel's limited formatting options.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Another advantage of having a proper web app is that it can handle large amounts of data from multiple sources. Five allows you to connect to various databases, APIs and be cloud hosted, enabling you to consolidate and analyze data from different systems in a single dashboard. This data integration ensures that your dashboard provides a comprehensive view of your organization's performance, rather than relying on data from a single source, as is often the case with Excel dashboards.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Goals and Objectives</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By the end of this guide, you'll have developed a responsive data analytics dashboard connected to the DummyJSON API. The API's JSON payload will be converted into relational data, displayed on a form, and visualized in a dashboard with multiple charts. Users will be able to interact with the data through the application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Note: If your data isn't stored using a REST API with Five you can also build your data analytics dashboard using <a href="https://five.co/blog/how-to-create-a-front-end-for-a-mysql-database/">MySQL</a>, SQL Server, SQLite, or import from <a href="https://five.co/blog/excel-to-web-app/">Excel/Google Sheets.</a></p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Step-by-Step Guide</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 1: Creating a New Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><a href="https://five.co/get-started/"><strong>Sign Up for Free Access</strong> to the Five development environment.</a></p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Applications" in the top navigation bar.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2938,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-7-1024x694-1.png" alt="" class="wp-image-2938"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on the yellow Plus icon.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2939,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649-1.png" alt="" class="wp-image-2939"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Name your application "Data Dashboard".</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Save it by clicking the tick mark.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2940,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-12-1024x619-1.png" alt="" class="wp-image-2940"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Side Note: Resources and Downloads</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Preview The Application Online</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To preview the application we are developing online, <a href="https://default-tryfive.5au.co/">click here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Download the Finished Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the finished application as a Five Definition File (FDF) and <a href="https://www.youtube.com/watch?v=tq7ULfWFfu0">import it into Five</a>. Once imported, run the application by clicking the "Deploy to Development" button, located in the top-right corner of Five.</p>
<!-- /wp:paragraph -->

<!-- wp:file {"id":2609,"href":"https://five.co/wp-content/uploads/2024/03/RESTAPIDashboard.fdf"} -->
<div class="wp-block-file"><a id="wp-block-file--media-85dee8d3-0eb1-44af-88e5-289338a70c71" href="https://five.co/wp-content/uploads/2024/03/RESTAPIDashboard.fdf">RESTAPIDashboard</a><a href="https://five.co/wp-content/uploads/2024/03/RESTAPIDashboard.fdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-85dee8d3-0eb1-44af-88e5-289338a70c71">Download</a></div>
<!-- /wp:file -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 2: Running Your Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Deploy Your Application</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on the "Deploy to Development" button.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Five will create a cloud-hosted instance, including a database server and unique URL for your app.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Once deployed, the button will change to "Run". Click "Run" to preview your application.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2942,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Run-Your-Application-1024x576.png" alt="" class="wp-image-2942"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 3: Adding an API as a Data Source</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Use the Connection Wizard</strong> to connect Five to an external API:</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on the <strong>blue</strong> manage button</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2943,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2024/05/Screenshot-2024-05-22-at-4.07.53-pm-1024x520.png" alt="" class="wp-image-2943"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Data" &gt; "Connection Wizard".</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2944,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-65-1024x190-1.png" alt="" class="wp-image-2944"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Read List Mapping".</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Use the DummyJSON API: <code>https://dummyjson.com/products</code></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click "Send" to see the API response.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2945,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-66-1024x651-1.png" alt="" class="wp-image-2945"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Go to "Field Mapping" and set the display type for "description" to <code>_Memo</code>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Ensure "id" is selected as the Primary Key.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2946,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Connection-Wizard-Field-Mapping-1024x646-1.png" alt="" class="wp-image-2946"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Read Single Mapping" and paste <code>https://dummyjson.com/products/:id</code>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>In "General", create a new WebService with ID "DummyJSON" and Name "ProductAPI".</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Save your API connection. Here's what it should look like so far.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2948,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-67-1024x649-1.png" alt="" class="wp-image-2948"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 4: Creating a Form on the API</h3>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Use the Form Wizard</strong> to create a form:</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2949,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Form-Wizard-1024x650-1.png" alt="" class="wp-image-2949"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Visual" &gt; "Form Wizard".</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Select "ProductsAPI" as the Main Data Source.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Name the form "Product Form".</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Save the form.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">First Checkpoint: Run Your Application</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Preview Your Application</strong> by clicking the "Run" button.<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Check that the "Product Form" menu item is available.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Ensure the form displays the API data correctly.</li>
<!-- /wp:list-item --></ul>

<!-- wp:paragraph -->
<p>Here’s what your app should look like. On the left, you should now see a new menu item called&nbsp;<strong>Product Form</strong>&nbsp;(your app will have different colors, because we haven’t themed it yet).</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By clicking on&nbsp;<strong>Product Form</strong>, users can see all of the API’s data in a form created by Five.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Currently, the API returns a total of 30 rows of data. When you click on any of the products sent by the API, you can see its details. Because the API doesn’t let us update or delete products, the forms is read-only. If we had an API endpoint for each HTML method (GET, PATCH/PUT, POST, DELETE), our form could be configured with full create, read, update, and delete permissions.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2950,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-5-1024x650-1.png" alt="" class="wp-image-2950"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 5: Visualizing the Data from the API</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We will now add two charts to our application: a bar chart and a line chart that visualize data received from the API.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Create Charts</strong> using the Chart Wizard:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Visual" &gt; "Chart Wizard".</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2951,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Excel-to-Web-App-Chart-Wizard-1024x651-1.png" alt="" class="wp-image-2951"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Create a bar chart for stock data:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Title: Stock On Hand</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Data Source: ProductAPI</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>X Value Column: title</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Y Value Column: stock</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area ID: StockChart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area Title: Stock Chart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Type: Bar</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Save the chart (click tick)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Create a line chart for price data:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Title: Product Prices</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Data Source: ProductAPI</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>X Value Column: title</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Y Value Column: price</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area ID: PriceChart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area Title: Price Chart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Type: Line</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Save the chart (click tick)</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 6: Combining Multiple Charts in a Dashboard</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Navigate to Dashboards</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Go to "Visual" &gt; "Dashboards".</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on the yellow Plus icon to create a new dashboard.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Configure the Dashboard</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Fill in the fields as follows:<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Title: <code>API Dashboard</code></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Columns: <code>2</code></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Rows: <code>2</code></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>This setup creates a 2×2 grid to arrange your charts on the dashboard.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2953,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Dashboard-API-Dashboard-1024x651-1.png" alt="" class="wp-image-2953"/></figure>
<!-- /wp:image -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td><strong>Title</strong></td><td>API Dashboard</td></tr><tr><td><strong>Columns</strong></td><td>2</td></tr><tr><td><strong>Rows</strong></td><td>2</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p><strong>Add Actions to the Dashboard</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Click on "Actions".</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>In the Actions section, click the Plus icon to add new actions.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p><strong>Set Chart Positions</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2954,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Dashboard-Adding-Actions-1024x651-1.png" alt="" class="wp-image-2954"/></figure>
<!-- /wp:image -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>For Page Position <code>A1</code>, select <code>StockChart</code> (Chart) as the Action. Save it by clicking the Tick icon.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>For Page Position <code>B1</code>, select <code>PriceChart</code> (Chart) as the Action. Save it by clicking the Tick icon.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>For Page Position <code>A2</code>, select <code>ProductAPI</code> (Form) as the Action. Save it by clicking the Tick icon.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2955,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-6-1024x315-1.png" alt="" class="wp-image-2955"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Save the Dashboard</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Finally, save your configured dashboard by clicking the Tick icon.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 7: Adding Menu Items to Your App</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Add a Menu Item for the Dashboard</strong>:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Go to<strong>&nbsp;Visual &gt; Menus</strong>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on the yellow&nbsp;<strong>Plus&nbsp;</strong>icon<strong>.</strong></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Type&nbsp;<strong>Dashboard</strong>&nbsp;into Caption.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Type&nbsp;<strong>2&nbsp;</strong>into&nbsp;<strong>Menu Order.</strong></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>In the&nbsp;<strong>Action</strong>&nbsp;drop-down select&nbsp;<strong>API Dashboard (Dashboard)</strong>&nbsp;as the action.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on the&nbsp;<strong>Tick&nbsp;</strong>icon to save your new menu item.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Second Checkpoint: Run Your Application</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Preview Your Application</strong> by clicking the "Run" button.<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Check that the dashboard menu item works and displays the charts correctly.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>It’s time to run the application again. Here’s what it should look like (again, your app will have different colors, because it doesn’t have a theme).</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2956,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/image-7-1024x651-1.png" alt="Build a data analytics dashboard" class="wp-image-2956"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>To deploy your data analysis dashboard to the web, <a href="https://five.co/order-payment/">sign up for one of our paid plans, starting from US$29.99 per month and application</a>. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Finding Help in Five</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>If you need assistance:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>User Community</strong>: Visit <a href="https://five.org/">Five’s User Community</a>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Documentation</strong>: Visit <a href="https://help.five.org/">Five’s Documentation</a>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>In-App Help</strong>: Use Five’s in-app help available in the top right corner.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:image {"id":2957,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2024/05/Five.Co-Finding-Help-1024x649-1.png" alt="" class="wp-image-2957"/></figure>
<!-- /wp:image -->