This post has been adapted from “Creating a Simple Dashboard,” one of Syncfusion’s growing number of informative videos.
Creating a dashboard using Syncfusion’s Dashboard Designer, part of the Syncfusion Dashboard Platform, is a simple process. For purposes of demonstration, we will be creating a straightforward dashboard to display financial information for a restaurant regarding its online orders, including expenditures, revenue, and other details.
Our End Goal
The first step is to add a data source. This can be managed from the Data Source subwindow on the right side of the main Dashboard Designer screen. Once the data source is selected, you will be taken to the data source management screen. Here, the data source can be given a custom name for ease of use while we create our dashboard. For this dashboard, we will name our data source “OrderDetails.”
The Data Source Subwindow (Highlighted)
Now that a data source has been selected and named, it is time to pull information from it to construct our dashboard. On the left side of the data source management screen, we can see a selection of menus. The Tables menu displays the categories of information pulled from the data source. This information can be added to the dashboard by dragging the desired categories from the left pane into the stage. For our purposes, we will select Orders, Restaurant, Bill, and Expense.
Pulling Information from the Data Source
Once the data source is set, we can return to the main Dashboard Designer screen. From here, we can begin customizing our cards. Cards are the primary means of displaying information in a dashboard, and are critical for displaying information in an effective and pleasing way. When creating cards, we will click and drag in the main window to position and size them. For our first card, we want to show total revenue. However, we don’t have a revenue field in our data source. To create one, we must add an expression column. In our data source, we have two relevant fields: amount and delivery charge. By multiplying the delivery charge by the amount, we can get the total revenue. We can customize expression columns however we’d like, which gives us the flexibility to transform our raw data into exactly the information we want to display.
The Card Button (Highlighted) along with Selecting the Size and Position of a Card (Highlighted)
With the expression column correctly formatted, we can drag and drop it into place in the Actual Value subwindow. This will cause it to display in the card, and we can customize it so that it displays as we see fit. In this case, we will customize it to display as a currency.
The Card Edit Screen
We can repeat this process for as many cards as we like. For our purposes, we will create cards for Total Expenses, Total Orders, Return Rate, Website Bounce Rate, and Mobile App Download Rate using the basic process outlined above. Things are a little different if we want to visualize information on a card through the use of a graph or chart. Rather than selecting the Card option, we will select the desired Comparison Chart option from the left side of the main Dashboard Designer screen. From here, the process is essentially identical to what we did before, but we will have to select the data values for each component of the chart. We will do this to create a bar chart for Total Orders by City, a circular gauge for Order Accuracy, a line graph for Mobile App vs. Website Orders Per Month, a line-and-bar graph for Order Delivery Time vs. Customer Rating, a donut chart for Customer Feedback, and a line chart for Orders by Day of the Week. The properties of each of these visualizations can be modified to create the exact visual appearance we want.
With all of our widgets in place, we can save and preview the dashboard. If everything looks good, we can proceed to publish it on the Dashboard Server by using the Publish option under the Save submenu. And with that, we have successfully created and published a dashboard in just fifteen minutes!
What dashboards do you want to make? Download the Syncfusion Dashboard Platform today and show us what you make on Facebook and Twitter.