Line Graph
📉 Illustrate trends and patterns through interconnected data points.
A Line Graph is a graphical representation of data that uses points connected by straight lines to show trends or patterns over time or continuous data points.
1. Widget Aggregation
This part defines how data is aggregated for the Line 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.sort: Specifies sorting based on the specified column in ascending order.
{
"groupBy": [
{
"column": "assigned-date",
"fn": "DATE_FORMAT",
"config": {
"type": "M"
}
}
],
"functions": [
{
"column": "title",
"fn": "COUNT",
"alias": "tasks"
},
{
"column": "assigned-date",
"fn": "DATE_FORMAT",
"config": {
"type": "M"
},
"alias": "month"
}
],
"sort": {
"sortBy": "assigned-date",
"order": "asc"
}
}2. Widget Configuration
This section configures the appearance and labelling of the Line Graph.
type: Specifies that the widget is a Line Graph.isGroupedData: Specifies whether the data is grouped. Iffalse, meaning each data point represents a distinct value.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.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 data points.
{
"type": "line-graph",
"settings": {
"isGroupedData": false,
"title": "Monthly Tasks",
"x-axis": {
"accessor": "month",
"label": "Month"
},
"y-axis": {
"accessor": "tasks",
"label": "Tasks"
},
"fill": "#8884d8"
}
}The example configuration above is shown as:
📌 Need Help?
Updated 8 months ago