Bar Chart / Bar Percent Chart
A bar chart is a chart that presents categorical data with rectangular bars with heights or lengths proportional to the values that they represent.
The following is a list of the fields in the View Properties box in the dashboard designer. There are some required fields to be set for each created view.
Basic Properties
The View Properties fields vary in different charts. Below are the basic properties in the View Properties box.
Field | Description | Mandatory |
---|---|---|
View Type | Type of chart, table or view. | Yes |
Title | Name of the view. | No |
Dataset | The data used for the chart, table or view. | Yes |
Subset | Partial data from a dataset used for the chart, table or view. | Yes |
X and Y Values, Key and Value | The X and Y values set on the X-Axis and Y-Axis. The Key and Value on the Pie Chart. | Yes |
Sort X | It sorts the X-Axis, for example, sorting weekdays in the chart. | No |
The dataset and subset data derive from Datasets module. Choose the right chart from the View Type and data points to build a view. Also, be consistent in using the color scheme and formatting.
Sample 1: Using the Sort X
A good scenario of using the Sort X is when you want to re-ordering the X-Axis values, for example, sorting the weekdays. In the line chart below, the X-Axis values sorted by alphabetical. However, weekdays should be sorted by Monday, Tuesday, etc.
To re-order the weekdays’ values in the X-axis, this dataset applies a field called DOWAsc in the “Sort X” option. To descending sort, use the DOWDesc field.
Save the setting and the below line chart sorts from Monday to Sunday.
Aggregation
Field | Description | Mandatory |
---|---|---|
Group | An option to arrange identical data in groups. For example, if a particular column has the same values in different rows, then it will arrange these rows in a group. | No |
Aggregation | Data aggregation refers to the accumulation of the data by count, average, or summation. | Yes |
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.
Field | Description | Mandatory |
---|---|---|
Legend | 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. | No |
Flip Axes | Transpose the X and Y axes. | No |
Color Scheme | The color scheme of a view. The default color scheme is selected. | No |
Margins | It controls the spacing between the chart and the edge of the canvas. | No |
X-Axis, Y-Axis | It controls the axis’ title, visibility, formatting, show grid or line. | Yes |
Maximisable | Put a Maximise button on the top right of the view (when not in edit mode) and this will maximize the view to fill the browser. | No |
Advanced | Add special CSS class, data script and/or layout overview to the view. | No |
Sample 2: Using the Advanced properties to add a special CSS class.
Expand the Advanced properties from the View Properties box; you see a GridBox Class, Data Script, and Layout Override fields. The GridBox class allows you to add a special CSS class to your view. For example, if you want one view to have a different background colour, you might add to ambience.css. You may locate the ambience.css file at ./web/style/folder.
.my-custom-view {
border: 3px solid blue !important;
}
Next, set the GridBox class to my-custom-view. Using the bar chart created earlier, apply the above steps. The expected output after refreshing the Dashboard Page as below.
Optional Properties
Field | Description |
---|---|
Controlled By | Add or remove the filtering controls on the view. |
Sort Group Pattern | Defines the field to sort the “Group” field. |
Extra Lines | Add an extra line into a view that takes a field from the dataset and applies the sum, average, or count operation on that field. The result of the operation displays in the view with a line that defined in the properties setting. |
Drill | Allows drilling down data on the selected group level. |
Select to Control | Allows a selection made in the view to set the value of a control. Other views which are dependent on that control will then update accordingly. |
Bar Mode | Determines the bar mode. The options are group, stack and relative. |
Bar Normalisation | Determines the bar normalisation. The options are none, percent and fraction. |
Text Position | Determines the position of the text to be shown in the view. |
Text Format | Determines the format of the text to be shown in the view. |
Fonts | Determines the size of text on the inside and outside of the bars. |
Hover Template | Customise the content shown when hovering over the view. |
Click to Page | Link a view to another dashboard page. |
Click to Page Tip | Adds a brief description of the link above. |
Config Options | Config Options consists of the following: - Scroll Zoom - allows the mouse wheel to zoom in/out of the chart - Display Modebar - controls whether the bar of icons at the top right of the chart should appear always, never or only when hovering over the chart - Hide Modebar buttons - chooses which buttons (icons) to include in the Modebar |
Sample 3: Using the Extra Lines In A Bar Chart.
Demonstration of the calculation of the average sales of the different categories of fruits by using the FruitsDemo dataset to display extra line in the view. The size represents the thickness of the line, by default, sets as 3. Give a unique name to show in the legend. Select the sales field and average operation from the dropdown list. As a result, a green line displays on the bar chart.
Sample 4: Using the Controlled By option on a view drilling down.
In the designer mode, select a view and open the “View Properties” to add a new control at the “Controlled By” option by clicking the “+” button. Save the setting.
Back in the dashboard viewer, click on the “Open Filter Panel” to show education level selection control and choose any option from the list. You will notice the view changes accordingly. If you have more than one view using the same option control, those views will change too. The “Reset” button resets the view to its original.