How To Master Dashboard Creation In 6 Simple Steps
Business dashboards help businesses make critical strategic decisions by tracking different metrics and performance indicators, such as sales and conversion rate.
You can also use dashboards to analyze and understand current trends and make future strategies accordingly. Business dashboards essentially consist of different data visualizations, such as charts, graphs, and maps.
You can choose the type of charts and graphs for your dashboard depending on the data you want to visualize or the performance metrics you want to track.
For example, a line graph is great for depicting continuous data over time, whereas when you want to show the percentages of a whole, you can use a pie or donut chart.
Dashboard creation may seem a time-consuming and complex process. This article will show you how to master dashboard creation quickly and easily.
- Which metrics should you include in your dashboard, and where should you place them?
- What charts and graphs should you use for your dashboard?
- How do I style my dashboard?
- How do I prepare data for the charts I want to incorporate into my dashboard?
- How do I specify the chart configurations for dashboard creation?
- Can I create drill-down charts for my dashboard?
1. Which metrics should you include in your dashboard creation, and where should you place them?
The first and primary step for dashboard creation is to decide which metrics and key performance indicators (KPIs) you want to include in your dashboard. This depends on the type of dashboard you’re creating.
You can add essential metrics and KPIs if you’re building a sales dashboard, such as lead conversion ratio, sales target, sales opportunity score, and sales growth. Similarly, if you’re building a web analytics dashboard, you can include metrics like website visitors, page view, and bounce rate.
Once you’ve decided which metrics to include in your dashboard, you need to determine where you should place them. A good practice is identifying the key performance indicators in the top section (above the fold) and keeping all related metrics close.
Depending on your dashboard's total number of visualizations, you also need to decide how many charts you should place per column.
2. What charts and graphs should you use for your dashboard?
To choose the right charts and graphs for your dashboard, you need to understand which charts are excellent for which type of data. Different types of charts and graphs represent different types of data.
When you want to compare different variables, you can use column charts, while line charts are suitable for analyzing trends over some time.
Charts libraries offer interactive charts and graphs options, including area, pie, donut, line, and bar charts. They also have domain-specific charts, such as Heatmaps, Treemaps, Gantt Charts, Gauges, and Spider Charts.
3. How do I style my dashboard?
Styling your dashboard is an essential step, as it gives your dashboard a look required for modern business usage. A properly designed and styled dashboard isn’t just appealing to the eye, but it also makes your data easy to understand and interpret.
When creating your dashboard with a library like FusionCharts, you can style it with CSS. You can write inline CSS into the HTML file or create a separate CSS file and associate it with the HTML file or template. With CSS, you can set the dimensions of your dashboard, add a heading or title, etc.
Below is the sample CSS code for styling a dashboard (you can add more styling depending on your requirements).
body {
margin: 0;
padding: 0;
width: 100%;
background-color: #00406A;
font-family: Tahoma, Helvetica, Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
padding: 0;
font-weight: bold;
}
.chartCont {
padding: 0px 12px;
}
4. How do I prepare data for the charts I want to incorporate into my dashboard?
Many chart libraries use the JSON (JavaScript Object Notation) format for data, so we need to represent the data for every chart in JSON format.
JSON is super lightweight and human-readable (easy to read, write, and understand). Hence, preparing the data in JSON is super quick and easy.
Below is a sample JSON code for preparing the data for the chart above. You need to prepare the data for each visualization in your dashboard in a separate JSON file.
{
label: “14 May”,
value: “267111”
},
{
label: “15 May”,
value: “217207”
},
{
label: “16 May”,
value: “185836”
},
{
label: “17 May”,
value: “251074”
},
{
label: “18 May”,
value: “273374”
},
{
label: “19 May”,
value: “215724”
},
{
label: “20 May”,
value: “227219”
},
{
label: “21 May”,
value: “268160”
},
{
label: “22 May”,
value: “239446”
},
{
label: “23 May”,
value: “297084”
},
{
label: “24 May”,
value: “204399”
},
{
label: “25 May”,
value: “236195”
},
{
label: “26 May”,
value: “302120”
},
{
label: “27 May”,
value: “282909”
},
{
label: “28 May”,
value: “272096”
},
{
label: “29 May”,
value: “241639”
},
{
label: “30 May”,
value: “189526”
},
{
label: “31 May”,
value: “248034”
},
{
label: “1 Jun”,
value: “266247”
},
{
label: “2 Jun”,
value: “212719”
},
{
label: “Yesterday”,
value: “264416”
}
]
}
You need to create a separate container element for each chart or graph in your dashboard (<div>). Remember to add all the charts to your dashboard page and link to their container element and data.
5. How do I specify the chart configurations for dashboard creation?
Before you specify the chart configurations, you need to add core library and theme library using the code below:
<script
type=”text/javascript”
src=”https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js”
></script>
<script
type=”text/javascript”
src=”https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js”
></script>
You need to specify each chart in your dashboard. Below is a sample code for specifying a chart configuration:
<script type=”text/javascript”>
FusionCharts.ready(function() {
var salesRevChart = new FusionCharts({
type: “column2d”,
renderAt: “sales-chart-container”,
width: “500”,
height: “300”,
dataFormat: “json”,
dataSource: {
chart: {
caption: “Daily Revenue”,
subcaption: “Last 3 weeks”,
xaxisname: “Date”,
yaxisname: “Revenue (In USD)”,
numberprefix: “$”,
showvalues: “0”,
theme: “fusion”
}
data:
}
});
You can find the complete HTML code for building a dashboard with four charts (two per column).
6. Can I create drill-down charts for my dashboard?
You can create any drill-down chart with chart suites, such as pie, area, line, bar, etc. Drill-down allows you to navigate from top-level data to line-item data. Suites let you create endless levels of drill-down with a single data source, depending on your requirements.
The main chart or the parent chart consists of all the data. This includes the data for the parent chart itself and the data for other descendant charts. To create a drill-down chart, you need to define the links to the descendant charts in the parent chart.
When you create a drill-down chart, users can access the descendant charts by clicking the parent chart's data plot items.
You can open a descendant chart in a new window or frame, or it can replace the parent chart in the same window. You also have the option to drill up to the parent chart.
