Welcome to part 5 of our five-part Excel to Web App guide.
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.
So let’s learn how to build a chart on top of our data.
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:
This beginner’s guide on converting an Excel spreadsheet to a web app does not require a background in coding. Only make sure to have Five installed. Sign up for a free download here!
To create a chart in your application, open Five, click on your application, and then on Manage.
Next, click on Visual > Chart Wizard. Here’s what Five’s Chart Wizard looks like:
Let’s say we want to create a chart that displays our products on the X-axis, and quantities on the Y-axis.
Here’s what your chart settings should look like:
Now let’s add the chart we have just created to our application.
Here’s what your menu item should look like:
Now, let’s launch our application to see what we have developed. As usual, run the app by clicking the Run ▶️ button in the top right corner.
Here’s what the chart looks like in our application.
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.
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.
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.
To 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.
To create a dashboard,
Next, click on Actions and then on the Plus icon, as shown in the image below.
Five will now ask you to define a Page Position and an Action. Page Position translates the grid you have just defined (remember our 2 rows and 2 columns?) into a user interface. Action lists out all your charts, forms, and other actions that you have created in Five.
Here’s how we have defined our page positions and actions:
Last, save by clicking the Tick icon in the top right corner.
There’s one more step: we need to add our dashboard to our application menu. Simply follow the step 2 above to do so.
Now, let’s run the app again to see what we have developed. Click on Run ▶️ in the top right corner to preview your app. Here’s what our dashboard looks like:
We now have a working application with a form, a chart, and a dashboard.
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.
Five lets you develop your application locally free of charge. Simply use our free download and build your application until it’s ready to be given to your end-users.
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.