Views

This documentation covers the basic charts used in data visualisation. Before you begin, prepare the datasets and subsets (if any) using the Datasets module. Next, understand your datasets and differentiate the difference between dimension and measure. Dimensions are qualitative and did not total a sum. In other words, dimensions are categorical values such as sale regions, locations, or dates. Measures are numerical values that mathematical functions work on it. For example, a sales revenue field that you can calculate the average or total sales.

It is not all numerical data that are considered measures. A service rating, for example, makes more sense as a dimension. For example, your model has a column that contains service ratings out of 5-points. Showing a service received a total number of stars is not useful.
However, knowing which service received the most 5-point ratings is useful.

Color Formatting, Legend, Margin and Axis Properties

View Properties provides you with full control of how your dashboard appears. You can change the color of the charts, legend orientation, margin, and change how you want to present the X-axis and Y-axis.

You can change color schema by selecting the color from the dropdown selection. It is advisable to keep the color scheme consistent throughout the entire dashboard pages.

You can choose the chart legend visibility in the Legend properties as well as how you want to display the legend. The legend orientation displays either in vertical or horizontal order.

The X-Axis and Y-Axis properties edit the setting such as title, show grid, and tick format. Lastly, edit the bar chart canvas margin and padding by navigating and expanding the Margin properties.

How to Build A Chart

In the Dashboard Designer mode, add a new view into the dashboard page by clicking the “Add View” button and select a chart from the View Type dropdown. You can create and change different types of charts from the View Type.

Bar Chart

A bar chart displays categorical data with horizontal or vertical bars, with heights or lengths proportionate to the values that it describes. A bar chart suitable for comparing data values across categories, for example, fruit sales.

Below is an example of the Total Sales By Fruit Type.

Chart

Create a Bar Chart

Select a Bar Chart, and choose the FruitsDemo dataset from the Dataset dropdown. Set the X-Axis and Y-Axis values. In this example, the bar chart uses the sum in the Aggregation field to calculate the total sales of each fruit. Lastly, add a title to complete the bar chart.

Chart

After saving the dashboard page, it shows the below chart.

Chart

Formatting

You can choose a different color schema (which is optional). To exclude the legend from the bar chart, expand the Legend properties and untick Show Legend option. Next, expand the X-Axis properties and untick the Show Grid option to remove the vertical grid line on the chart. In Y-Axis properties, add the Title and change the tick format to #,##0. Lastly, edit the left, right, top, and bottom margin to 50 in the Margin properties to give space between the content and canvas edge.

Chart

Sample 1: Residents by Age Group in the Past 5 Years

The bar chart shows the number of residents in each age range in the past five years.

Chart

To build this bar chart, use the Residents Age dataset from the Dataset dropdown. Set the X-Axis and Y-Axis values. Next, set the chart to group by the year field in Group dropdown, and applies the sum aggregation.

There are 22 different age range in the bar charts and cause some reading difficulty on the dashboard. The bar chart space uses the “Flip Axes” option, to transpose the X-Axis. Hence, the age range places on the left side of the chart. Tick the Maximise option so that it expands and fills the browser page for a bigger view. You can adjust the margin too.

Chart

You can use the “Toggle Spike Line” icon to find the number of youths aged 15 to 35 years old in the past 5 years. In the Dashboard Viewer mode, click on the “Toggle Spike Line” icon and highlight the area between age 15 and 35 years old in the chart.

Chart

Click on the “Reset” icon or double click on the chart area to reset the chart to its original.

Sample 2: Using the stack bar mode

The bar chart shows the number of residents by race in the past five years. The bar chart applies the Stack option in the Bar Mode dropdown.

Chart

Based on the bar chart above, you can find out the total number of residents by race and gender as well as the breakdown by years. To view data between the year in 2016 and 2018, click on the year 2014 and 2015 in the legend to exclude the data series. Example below.

Chart

However, this action applies to this chart only. If you want to apply the year filtering to all the charts on the dashboard page, uses the Dashboard Control function.

Sample 3: Using Controls in the Dashboard Page

Assumed, you have created a filter control in the Filter Panel called “Year Control”. In the View Properties of a selected chart, go to the “Controlled By” properties and click on the “+” sign. Select the control that you want to set to the chart, in this example is the “Year Control” and save the setting.

Chart

Expand the Filter Panel on the left side and tick on the year 2017 and 2018. The chart changes according to the selection made in the “Year Control”.

Chart

Pie Chart

A pie chart is a circular statistical graphic which is divided into slices to illustrate numerical proportion. A pie chart is usually more effective than a bar chart when comparing a category with the total in a single chart.

Below is an example of the Sales By Fruit.

Chart

Create a Pie Chart

Select a Pie Chart; choose the FruitsDemo dataset from the Dataset dropdown. Next, set the Key and Value with the Fruit and Quantity columns respectively. In this example, the pie chart uses the sum in the Aggregation field to calculate the total sales of each fruit. Lastly, add a title to complete the pie chart.

You can choose a different color schema (optional).

Chart

After saving the dashboard page, it shows the below chart.

Chart

A pie chart does not have axes therefore, the View Properties shows different fields. You can exclude the legend from the chart. Expand the Legend properties and untick Show Legend option. Also, you can edit the margin by changing the values to 50 in the Margin properties.

Chart

The example demonstrates how the same dataset plots in multiple ways. In this case, a pie chart is as good as a bar chart and pie chart able to provide values in a percentage format.

More examples as below.

Sample 1: Legend get cut-off by canvas edge

In some conditions, the canvas size of a view is small; and the legend on the pie chart gets cut-off as below. For example, using the Cars dataset and create a pie chart.

Chart

You can adjust the top and bottom margin values to fix the issue. Also, tick the Maximise option so that the chart will maximise the view to fill the browser in the dashboard viewer.

Chart

The example below shows the legend fits within the content area and canvas edges.

Chart

Line Chart

A line chart displays information as a series of data points called “markers” connected by straight lines. A line chart suitable for displaying and comparing trends over time because it shows correlations between category and time values, for example, the number of residents over the 18 years by gender.

Below is an example of the Residents by Gender.

Chart

Create a Line Chart

Select a Line Chart, and choose the Residents Gender dataset from the Dataset dropdown. Then, set the X-Axis and Y-Axis values; and the group by gender. The above example uses the sum in the Aggregation field. Complete the line chart with a title and save the page.

Chart

Formatting

You can change the legend orientation to place it on top or below the line chart in the Legend properties. The orientation sets to horizontal; and to move the legend above the chart, edit the position of the X and Y Positions.

Sample 1: Using Click to Page option to link the Dashboard Page

Based on the Residents by Gender chart, create another Dashboard Page to add new views. You can set a chart to link up with another Dashboard Page by using the Click to Page option in the View Properties box. Select the page that you want to link from the dropdown list and save the setting. In the Dashboard Viewer mode, click on the chart, and it redirects to the selected Dashboard Page.

Sample 2: Using the Timeseries and Fill Area

A timeseries graph is a line graph of repeated measurements recorded over regular time intervals. In other words, a timeseries graph displays the change of values of a variable as time progresses. It uses to show trends and patterns over some time.

For example, the Cars dataset used in the timeseries graph below showed the car trade-in sales data between 1984 to 2008. From the timeseries graph, in the year 2000, all regions decreased in sales. Similarly, you can use the “Resident Gender” dataset to create a timeseries graph. Both genders show the same graph movement over the years.

Using the Cars dataset, follow the above steps of creating a Line Chart. Set the X-Axis and Y-Axis values with trade-in-year and invoice_id fields respectively and group the data by Region field. You need to set the Aggregation to use sum.

Tick the Timeseries option and save the setting. You notice the main difference between the line chart and timeseries is the tick marks. For timeseries, it sets the scale range.

Chart

At first glance, the line and fill area charts look similar. The fill area chart fills the area below the plotted line with color. However, they organize; and present data differently, highlighting distinct aspects and providing different information. Fill area charts represent cumulated totals using numbers or percentages. It is better to use the fill area chart when you want to show a relationship along with the trend.

Using the same view created above, tick the Fill Area option in the View Properties.

Chart

Sample 3: Using the Range Slider

Add range slider to the X-Axis

Using the same chart above, tick the Range Slider option in the View Properties to add range slider to the X-Axis. The range slider works similarly to the Toggle Spike Line icon in the view. The different is range slider gives the visual aid of the X-Axis right below the chart.

Chart

Dual-Axis Chart

A dual-axis chart creates two independent axes that you can plot two separate measures on the same chart. It is easy to illustrate the relationship between two variables with different scale of measurement. When you have two data series with different magnitudes, for example, one axis measures in billions and the other side measures in trillions, then it displays a combination of different tick markers on both Y-Axis of the view. Otherwise, you can hide one side of the Y-Axis.

The below chart shows the monthly average shipping sales and the total amount of shipping transactions made. The chart uses a combination of a bar chart and a line chart, that tells in March the average sales amount for the Technology category increases by 50% because of the number of shipping transactions doubled.

Chart

Sometimes, a dual-axis chart can potentially be misleading for the viewers. Alternatively, create two charts side by side. If the page has limited space and you want to easily illustrate the relationship between two variables, the dual-axis chart best fits.

Create a Dual Axis Chart

Select a Dual Axis Chart from the View Type dropdown and use the Shipping dataset from the Dataset dropdown. Set the X-Axis value as the shipdate_month field. Next, expand the Chart 1 and Chart 2 properties, as well as Y-Axis 1 and Y-Axis 2 properties and configure the two types of charts in this view.

Chart

Formatting

The magnitude of Y-Axis on both sides is similar; untick the Visible option in the Y-Axis 1 properties to hide the Y-Axis.

Chart

Download a Plot

You can download each graph as .png files by using the “Download plot as a png” button on the top right of the view.

Toggle Spike Lines

The Toggle Spike Lines is a feature that displays lines on the graph indicating the exact X-Axis, in this example, the Year, and the Y-Axis, the Number for a particular category. To use this feature, click the “Toggle Spike Lines” icon then hover your mouse over the area of interest to view the toggle spike lines.

The blue dash lines in the screenshot above are the toggle spike lines. To turn this feature off, click the icon again. This feature is available in selected chart types; however, this feature does not work when a view has set another dashboard page in the “Click to Page” option.

Chart

Pan, Zoom and Reset Axes

These icons allow you to zoom in and pan across the view after you have zoomed in. To reset the view after zooming, click on the “Reset axes” or double clicks on the graph. This feature is available in the selected chart types.

The example below uses the Zoom feature to select an area of interest in the view.

Chart

As a result, the view zooms into the selected area.

Chart

Use the Pan icon to drag along the axes. From the view below, you notice that the graph has moved to the center.

Chart