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.