In this part, we want to add charts and dashboards to our application. Charts and dashboards help us make sense of our data. Five comes with a library of prebuilt charts, such as bar, radar, or pie charts. And they can easily be combined into sophisticated dashboards for business intelligence and analytics.<\/p>\n\n\n\n
So let’s learn how to build a chart on top of our data. <\/p>\n\n\n\n
\n\n\n\n
\r\n Ready to Convert Your Spreadsheet to a Web App?\r\n <\/h3>\r\n
\r\n Transform your Excel files into powerful, secure web applications without the coding headache. Our experts will convert your spreadsheet with:\r\n <\/p>\r\n \r\n
\r\n Free consultation & fixed-price quote\r\n <\/p>\r\n<\/div>\n\n\n\n
\n\n\n\n
Convert Your Spreadsheet Into a Beautiful Web App: Follow Our 5-Part Guide<\/h4>\n\n\n\n
This blog post is part 5 of a 5-part series on converting Excel spreadsheets to web apps. To view the other parts, follow the links here:<\/p>\n\n\n\n
- \n
- Part 1: Excel to Web App – Creating a Database and Forms<\/a><\/li>\n\n\n\n
- Part 2: Excel to Web App – Calculating a Field<\/a><\/li>\n\n\n\n
- Part 3: Excel to Web App – Adding a Theme<\/a><\/li>\n\n\n\n
- Part 4: Excel to Web App – Adding Logins to Your App<\/a><\/li>\n<\/ul>\n\n\n\n
\n\n\n\nBuilding Charts in Five<\/h2>\n\n\n\n
Step 1: Creating a Chart<\/h3>\n\n\n\n
To create a chart in your application, open Five, click on your application, and then on Manage<\/strong>.<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Manage-1-1024x646.png\")
<\/figure>\n\n\n\n
\n\n\n\nNext, click on Visual > Chart Wizard. <\/strong>Here’s what Five’s Chart Wizard looks like:<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Chart-Wizard-1024x651.png\")
<\/figure>\n\n\n\nLet’s say we want to create a chart that displays our products on the X-axis, and quantities on the Y-axis.<\/p>\n\n\n\n
- \n
- Give your chart a title, such as Inventory Chart.<\/strong><\/li>\n\n\n\n
- Pick your data source, i.e. the Inventory<\/strong> table.<\/li>\n\n\n\n
- Define your X Value Column<\/strong>, i..e Product.<\/strong><\/li>\n\n\n\n
- Define your Y Value Column<\/strong>, i.e. Quantity<\/strong><\/li>\n\n\n\n
- Give your chart area a title. Let’s go with Inventory Chart<\/strong> again. Toggle Show Chart Area Title<\/strong> on.<\/li>\n\n\n\n
- Select a Chart Type.<\/strong> We will stick with a Bar Chart.<\/strong><\/li>\n\n\n\n
- Last, save by clicking the Tick<\/strong> icon in the top right corner. <\/li>\n<\/ol>\n\n\n\n
Here’s what your chart settings should look like:<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Inventory-Chart-1024x651.png\")
<\/figure>\n\n\n\n
\n\n\n\nStep 2: Adding a Chart to Your App<\/h3>\n\n\n\n
Now let’s add the chart we have just created to our application.<\/p>\n\n\n\n
- \n
- Click on Visual > Menus.<\/strong><\/li>\n\n\n\n
- Click the yellow Plus<\/strong> icon to create a new menu item in your app.<\/li>\n\n\n\n
- For Caption<\/strong>, write Inventory Chart.<\/strong><\/li>\n\n\n\n
- For Menu Order, <\/strong>write 2<\/strong><\/li>\n\n\n\n
- In the Action dropdown<\/strong> select InventoryChart (Chart).<\/strong><\/li>\n\n\n\n
- Last, save by clicking the Tick<\/strong> icon in the top right corner. <\/li>\n<\/ol>\n\n\n\n
Here’s what your menu item should look like:<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Creating-a-Menu-Item-1024x650.png\")
<\/figure>\n\n\n\n
\n\n\n\nNow, let’s launch our application to see what we have developed. As usual, run the app by clicking the Run \u25b6\ufe0f <\/strong>button in the top right corner.<\/p>\n\n\n\n
Here’s what the chart looks like in our application.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Inventory-Chart-in-Live-App-1024x650.png\")
<\/figure>\n\n\n\n
\n\n\n\nStep 3: Building Dashboards<\/h3>\n\n\n\n
We have just successfully added a chart to our application. But let’s say we’re not quite happy with the result: a single chart occupies our entire screen, the colors seem a bit odd, and our end-users are demanding something more powerful. <\/p>\n\n\n\n
That’s where dashboards come in. By using Five’s dashboarding feature, we can create beautiful dashboards that combine charts, reports, and drill-downs all in one page. <\/p>\n\n\n\n
Here’s an example of a dashboard that combines a radar chart with a bar chart and a data report all on one page. Of course, we can also create combined charts (such as a bar chart with a line chart on top) or create drill-downs into charts where data dynamically changes.<\/p>\n\n\n\n
![\"Five.Co](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/05\/Five.Co-SQL-Dashboard.png\")
<\/figure>\n\n\n\n
\n\n\n\nTo build a dashboard, you first need more than one chart. Since we have just shown you how to create charts, we won’t go through the steps again. Simply follow the steps above.<\/p>\n\n\n\n
To create a dashboard, <\/p>\n\n\n\n
- \n
- Click on Visual > Dashboards.<\/strong><\/li>\n\n\n\n
- Click the yellow Plus<\/strong> icon to create a new dashboard.<\/li>\n\n\n\n
- Give your dashboard a Title<\/strong> such as Analytics Dashboard<\/strong>.<\/li>\n\n\n\n
- Define the number of Columns<\/strong> and Rows<\/strong> in your dashboard. Let’s go with 2 <\/strong>columns and 2 <\/strong>rows.<\/strong><\/li>\n<\/ol>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Dashboard-Step-1-1024x649.png\")
<\/figure>\n\n\n\n
\n\n\n\nNext, click on Actions<\/strong> and then on the Plus<\/strong> icon, as shown in the image below.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Dashboard-Step-2-1024x623.png\")
<\/figure>\n\n\n\n
\n\n\n\nFive will now ask you to define a Page Position<\/strong> and an Action<\/strong>. Page Position<\/strong> translates the grid you have just defined (remember our 2 rows and 2 columns?) into a user interface. Action<\/strong> lists out all your charts, forms, and other actions that you have created in Five.<\/p>\n\n\n\n
Here’s how we have defined our page positions and actions:<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Dashboard-Actions-1024x651.png\")
<\/figure>\n\n\n\n
\n\n\n\nLast, save by clicking the Tick <\/strong>icon in the top right corner.<\/p>\n\n\n\n
There’s one more step: we need to add our dashboard to our application menu. Simply follow the step 2 above to do so.<\/p>\n\n\n\n
Now, let’s run the app again to see what we have developed. Click on Run \u25b6\ufe0f<\/strong> in the top right corner to preview your app. Here’s what our dashboard looks like:<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Dashboard-in-Live-App-1024x651.png\")
<\/figure>\n\n\n\n
\n\n\n\nCharts and Dashboards: Expansions<\/h2>\n\n\n\n
We now have a working application with a form, a chart, and a dashboard. <\/p>\n\n\n\n
If you don’t like the way your dashboard looks, play around with the colors, titles, or chart types. There are plenty of customization options available to build the dashboard you need! You can also add an “export to CSV” feature to your application, for example. <\/p>\n\n\n\n
\n\n\n\n\nFinding Help in Five<\/h2>\n\n\n\n
In case you get stuck during the development process, we’re here to help! Continue developing your application by accessing these resources:<\/p>\n\n\n\n
- \n
- Five’s User Community:<\/strong> Visit https:\/\/five.org<\/a> to ask questions or get inspiration from other users.<\/li>\n\n\n\n
- Five’s Documentation:<\/strong> Visit help.five.org<\/a> to access Five’s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n
Five’s In-App Help<\/h3>\n\n\n\n
Last, find useful tips for your application development by clicking on Five’s in-app help <\/strong>available in the top right corner or on almost any field.<\/p>\n\n\n\n
![\"\"](\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png\")
<\/figure>\n\n\n\n
\n\n\n\n\nGet Your App Online For US$29.99 Per Month<\/h2>\n\n\n\n
To deploy your application, sign up for one of our paid plans, starting from US$29.99 per month and application. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.<\/p>\n\n\n\n
\n\n - Five’s Documentation:<\/strong> Visit help.five.org<\/a> to access Five’s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n
- Click the yellow Plus<\/strong> icon to create a new dashboard.<\/li>\n\n\n\n
- Click the yellow Plus<\/strong> icon to create a new menu item in your app.<\/li>\n\n\n\n
- Pick your data source, i.e. the Inventory<\/strong> table.<\/li>\n\n\n\n
- Part 2: Excel to Web App – Calculating a Field<\/a><\/li>\n\n\n\n