SYNCFUSION BLOG

How-to Sample: Creating a Simple Dashboard

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 YouTube page.

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 home screen:


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 click MERGE.


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.