This blog post is going to demonstrate building a few pieces of a dashboard
for an online food ordering portal, step-by-step. To watch the video of
the full demonstration, please visit our
We want to show important information at the top of the dashboard
using card widgets. We’ll see how to do a couple of these. Then we’ll see how
to add a chart widget.
Adding a data source
Let’s start by adding a data source. First, this is our dashboard
On the right side of the screen is a box for data sources. When I
click +, a pop-up appears called New
Connection. The database is in the local SQL server, so we’ll choose that from
the drop-down list for Connection type, then choose the database from the drop-down
list for Database and click Connect.
We need to give the data source a name in the window that pops up.
We’ll go with "orderDetails." We don’t need to put a description.
In the left sidebar, we’ll expand the Tables tab and drag the
Orders and Restaurant tables onto the stage.
A Join Editor box pops up. The unique column is Restaurant ID, so we
Then we drag the Bill table to the main space. We’re joining the
orders table and bill table using the order ID column, so we click MERGE.
Next, we drag the Expense table to the main space. We join the
orders table and bill table by choosing Orders from the LeftTable drop-down,
OrderTime below it, and Date under RightTable. Then we click MERGE.
Now, we have the required
details in our data source.
Creating a Total Revenue widget
Now we’ll create our first widget for our dashboard. First, we go
back to the dashboard by clicking the tab at the top left called “Untitled
Dashboard.” We can give the dashboard a name later, before publishing.