Bar Graph
📊 Visualize data using bars for easy comparison and insights.
A Bar Graph represents data that uses rectangular bars to show the magnitude of different categories or values.
1. Widget Aggregation
This part defines how data is aggregated for the Bar Graph. It specifies the columns to group by, functions to apply, and sorting order.
groupBy: Indicates that the specified column should group data within a specified date format.functions: Specifies functions to be applied to columns. For example: Calculate the sum of values in the column.sort: Specifies sorting based on the column in ascending order.
{
"groupBy": [
{
"column": "idr-submission-date",
"fn": "DATE_FORMAT",
"config": {
"type": "M"
}
}
],
"functions": [
{
"column": "commission-gst",
"fn": "SUM",
"alias": "commissiongst"
},
{
"column": "idr-submission-date",
"fn": "DATE_FORMAT",
"config": {
"type": "M"
},
"alias": "month"
}
],
"sort": {
"sortBy": "idr-submission-date",
"order": "asc"
}
}2. Widget Configuration
This section configures the appearance and labelling of the Bar Graph.
type: Specifies that the widget is a Bar Graph.settings: Defines various settings for the Bar Graph.title: Sets the title of the graph.x-axis: Configures the X-axis (horizontal axis) of the graph.accessor: Specifies where the data for the X-axis comes from.label: Provides a label for the X-axis, which is "Month" in this case.y-axis: Configures the Y-axis (vertical axis) of the graph.accessor: Specifies where the data for the Y-axis comes from.label: Provides a label for the Y-axis.fill: Sets the fill colour of the bars.
{
"type": "bar-graph",
"settings": {
"title": "Commission + GST Each Month",
"x-axis": {
"accessor": "month",
"label": "Month"
},
"y-axis": {
"accessor": "commissiongst",
"label": "Commission + GST"
},
"fill": "#8884d8"
}
}The example configuration above is shown as:
📌 Need Help?
Updated 8 months ago