diff --git a/content/docs/dashboards/widgets/bar-chart.mdx b/content/docs/dashboards/widgets/bar-chart.mdx new file mode 100644 index 00000000..19ab0d6c --- /dev/null +++ b/content/docs/dashboards/widgets/bar-chart.mdx @@ -0,0 +1,68 @@ +--- +title: 'Bar Chart' +description: 'Configure bar chart widgets to compare values across categories in your dashboard' +--- + +![Bar Chart](/img/v2/dashboards/widget-bar-chart-home.png) + +The **Bar Chart** widget in NocoDB dashboards allows you to compare values across different categories. It is especially useful for highlighting trends, distributions, or comparisons between groups. + +## Title & Description +- **Title**: Enter a title for the bar chart widget. This will be displayed prominently at the top of the widget. +- **Description**: Optionally, add a description to provide context or details about the data being visualized. This will appear below the title. + +Title + + +## Data Source +- **Table**: Select the table from which you want to pull data for the bar chart. +- **Records**: Choose which records to include: + - **All Records**: Displays all records from the selected table. + - **Records from a view**: Uses records from a specific view, allowing you to apply existing filters and sorts. + - **Specific Records**: Apply custom filters to select only certain records. + +Title + +## Display + +### X-axis +- **Field**: Select the field whose values will be shown as categories along the X-axis (e.g., Product, Region, Status). +- **Sort By**: Choose the criteria to sort categories: + - **xAxis Value**: Sorts based on the label values. + - **yAxis Value**: Sorts based on the numeric values plotted. +- **Order**: Select Default, Ascending, or Descending order. +- **Include empty records**: Optionally, include categories that do not have values. +- **Include others**: Toggle to combine small or excess categories into an “Others” group for better readability. + +### Y-axis +- **Fields**: Choose the field(s) that determine the bar lengths. You can add multiple fields for comparison. +- **Field Summary**: Displays the **Sum, Average, Min, or Max** of a numeric field. +- **Start at zero**: Ensures the Y-axis always begins at zero, which improves accuracy in comparing bar heights. + +Title + +## Appearance + +Customize the look of the chart to improve readability and alignment with your dashboard: + +- **Size**: Choose the chart size (Small, Medium). +- **Show value in chart**: Displays numeric values directly on the bars. +- **Show count in legend**: Adds record counts in the legend alongside category names. + +Title \ No newline at end of file diff --git a/content/docs/dashboards/widgets/index.mdx b/content/docs/dashboards/widgets/index.mdx index 30ba07b6..0dac4e71 100644 --- a/content/docs/dashboards/widgets/index.mdx +++ b/content/docs/dashboards/widgets/index.mdx @@ -10,6 +10,8 @@ NocoDB dashboards support the following widget types: | Widget Type | Description | |----------------------------------------------------------------------|----------------------------------------| | **[Number](/docs/product-docs/dashboards/widgets/number)** | Displays KPIs and metric summaries | +| **[Bar Chart](/docs/product-docs/dashboards/widgets/bar-chart)** | Compares values across categories | +| **[Line Chart](/docs/product-docs/dashboards/widgets/line-chart)** | Shows trends over time | | **[Pie Chart](/docs/product-docs/dashboards/widgets/pie-chart)** | Visualizes parts of a whole | | **[Donut Chart](/docs/product-docs/dashboards/widgets/donut-chart)** | Pie chart variant with a hollow center | | **[Text](/docs/product-docs/dashboards/widgets/text)** | Displays static information | diff --git a/content/docs/dashboards/widgets/line-chart.mdx b/content/docs/dashboards/widgets/line-chart.mdx new file mode 100644 index 00000000..025d8527 --- /dev/null +++ b/content/docs/dashboards/widgets/line-chart.mdx @@ -0,0 +1,70 @@ +--- +title: 'Line Chart' +description: 'Configure line chart widgets to visualize trends and comparisons over time or categories in your dashboard' +--- + +![Line Chart](/img/v2/dashboards/widget-line-graph-home.png) + +The **Line Chart** widget in NocoDB dashboards allows you to visualize trends and comparisons across categories or time. It is especially useful for tracking changes, identifying patterns, and comparing multiple metrics simultaneously. + +## Title & Description +- **Title**: Enter a title for the line chart widget. This will be displayed prominently at the top of the widget. +- **Description**: Optionally, add a description to provide context or details about the data being visualized. This will appear below the title. + +Line Chart Title + +## Data Source +- **Table**: Select the table from which you want to pull data for the line chart. +- **Records**: Choose which records to include: + - **All Records**: Displays all records from the selected table. + - **Records from a view**: Uses records from a specific view, allowing you to apply filters and sorts. + - **Specific Records**: Apply custom filters to select only certain records. + +Line Chart Data Source + +## Display + +### X-axis +- **Field**: Select the field whose values will be shown along the X-axis (e.g., Date, Product, Category). +- **Sort By**: Choose how categories are sorted: + - **xAxis Value**: Sorts based on the label values. + - **yAxis Value**: Sorts based on the numeric values plotted. +- **Order**: Select Default, Ascending, or Descending. +- **Include empty records**: Optionally include categories that have no values. +- **Include others**: Toggle to group smaller categories into an “Others” bucket. + +### Y-axis +- **Fields**: Choose the field(s) to plot on the Y-axis. You can add multiple fields to display multiple lines in the chart. +- **Record Count**: Shows the number of records for each category. +- **Field Summary**: Displays the **Sum, Average, Min, or Max** of a numeric field. +- **Start at zero**: Ensures the Y-axis always begins at zero for consistency. + +Line Chart Axis Config + +## Appearance + +Customize how the chart is displayed for clarity and readability: + +- **Size**: Adjust the chart size (Small, Medium). +- **Legend Orientation**: Choose where to display the legend (Top, Bottom, Left, Right). +- **Show count in legend**: Enable to display record counts in the legend. +- **Plot data points**: Enable to highlight data points on the line. +- **Smooth lines**: Enable to display smoothed curves instead of jagged lines. + +Line Chart Appearance diff --git a/content/docs/dashboards/widgets/meta.json b/content/docs/dashboards/widgets/meta.json index 63e977cb..0628fc17 100644 --- a/content/docs/dashboards/widgets/meta.json +++ b/content/docs/dashboards/widgets/meta.json @@ -2,6 +2,8 @@ "pages": [ "number", "text", + "bar-chart", + "line-chart", "pie-chart", "donut-chart", "iframe" diff --git a/public/img/v2/dashboards/widget-bar-chart-axis.png b/public/img/v2/dashboards/widget-bar-chart-axis.png new file mode 100644 index 00000000..f2e509a1 Binary files /dev/null and b/public/img/v2/dashboards/widget-bar-chart-axis.png differ diff --git a/public/img/v2/dashboards/widget-bar-chart-home.png b/public/img/v2/dashboards/widget-bar-chart-home.png new file mode 100644 index 00000000..d71f690a Binary files /dev/null and b/public/img/v2/dashboards/widget-bar-chart-home.png differ diff --git a/public/img/v2/dashboards/widget-bar-chart-source.png b/public/img/v2/dashboards/widget-bar-chart-source.png new file mode 100644 index 00000000..b574ff62 Binary files /dev/null and b/public/img/v2/dashboards/widget-bar-chart-source.png differ diff --git a/public/img/v2/dashboards/widget-bar-chart-style.png b/public/img/v2/dashboards/widget-bar-chart-style.png new file mode 100644 index 00000000..41c5f4c9 Binary files /dev/null and b/public/img/v2/dashboards/widget-bar-chart-style.png differ diff --git a/public/img/v2/dashboards/widget-bar-chart-title.png b/public/img/v2/dashboards/widget-bar-chart-title.png new file mode 100644 index 00000000..d07c6cfb Binary files /dev/null and b/public/img/v2/dashboards/widget-bar-chart-title.png differ diff --git a/public/img/v2/dashboards/widget-line-graph-axis.png b/public/img/v2/dashboards/widget-line-graph-axis.png new file mode 100644 index 00000000..2a324e33 Binary files /dev/null and b/public/img/v2/dashboards/widget-line-graph-axis.png differ diff --git a/public/img/v2/dashboards/widget-line-graph-home.png b/public/img/v2/dashboards/widget-line-graph-home.png new file mode 100644 index 00000000..d2fdfcb9 Binary files /dev/null and b/public/img/v2/dashboards/widget-line-graph-home.png differ diff --git a/public/img/v2/dashboards/widget-line-graph-source.png b/public/img/v2/dashboards/widget-line-graph-source.png new file mode 100644 index 00000000..fec73548 Binary files /dev/null and b/public/img/v2/dashboards/widget-line-graph-source.png differ diff --git a/public/img/v2/dashboards/widget-line-graph-style.png b/public/img/v2/dashboards/widget-line-graph-style.png new file mode 100644 index 00000000..9949df8f Binary files /dev/null and b/public/img/v2/dashboards/widget-line-graph-style.png differ diff --git a/public/img/v2/dashboards/widget-line-graph-title.png b/public/img/v2/dashboards/widget-line-graph-title.png new file mode 100644 index 00000000..fab85418 Binary files /dev/null and b/public/img/v2/dashboards/widget-line-graph-title.png differ diff --git "a/public/img/v2/webhook/Screenshot 2025-08-26 at 9.28.23\342\200\257PM.png" "b/public/img/v2/webhook/Screenshot 2025-08-26 at 9.28.23\342\200\257PM.png" new file mode 100644 index 00000000..0216543a Binary files /dev/null and "b/public/img/v2/webhook/Screenshot 2025-08-26 at 9.28.23\342\200\257PM.png" differ diff --git a/public/img/v2/webhook/create-webhook-v3-1.png b/public/img/v2/webhook/create-webhook-v3-1.png index f657b9cf..4e453c24 100644 Binary files a/public/img/v2/webhook/create-webhook-v3-1.png and b/public/img/v2/webhook/create-webhook-v3-1.png differ