/\  Semaphor

Charts

Bar / Line / Area Chart

Learn how to create a bar/line/area chart in Semaphor

Overview

Semaphor uses the open-source ChartJS 4 specification for its visuals. You can access the full ChartJS API to customize the look and feel of your charts. Here are some examples of how to quickly create common charts using simple SQL queries.

Simple Bar / Line / Area Charts

You can create bar, line, or area charts by structuring your query as shown below.

  • The first column (categorical or time-based) is mapped to the x-axis.
  • The second column (numerical values) is mapped to the y-axis.
Card SQL
SELECT sub_category, -- x-axis
COUNT(*) -- y-axis (number)
FROM sales_data
GROUP BY sub_category
ORDER BY sub_category DESC LIMIT 100
Results
| sub_category | count |
| ------------ | ----- |
| Tables       | 319   |
| Supplies     | 190   |
| Storage      | 846   |
| Phones       | 889   |
| Paper        | 1370  |
| Machines     | 115   |
| Labels       | 364   |

Bar Chart

To create an area chart, add the type: line and fill: origin properties to the chart configuration. For more detailed customization, refer to the Chartjs docs.

Chart Config
"datasets": [
   {
    "type": "line",
    "fill": "origin", // fill the area under the line
    "label": "Count",
    "data": [],
    "backgroundColor": "#3b82f6",
    "borderColor": "#3b82f6"
   },
   {
    "type": "line",
    "fill": "origin", // fill the area under the line
    "label": "Avg_sales",
    "data": [],
    "backgroundColor": "#14b8a6",
    "borderColor": "#14b8a6"
   }
  ]

Chart

Multivariate Chart

To create a multivariate bar chart, you could add another aggregate metric, such as Avg_Sales, to the above query. You can add as many metrics you would like.

Card SQL
SELECT sub_category, -- x-axis
COUNT(*), -- y-axis-1
AVG(sales) as AVG_sales -- y
FROM sales_data
GROUP BY sub_category
ORDER BY sub_category DESC LIMIT 100
Results
| Sub Category | Count | Avg_Sales |
| ------------ | ----- | --------- |
| Tables       | 319   | 648.80    |
| Supplies     | 190   | 245.65    |
| Storage      | 846   | 264.59    |
| Phones       | 889   | 371.21    |
| Paper        | 1370  | 57.28     |
| Machines     | 115   | 1645.55   |
| Labels       | 364   | 34.30     |
| Furnishings  | 957   | 95.83     |

Chart

Combo Chart

You can also change any of the dataset in the chart config to a line type to create a combo chart.

Chart Config
"datasets": [
   {
    "label": "Count",
    "data": [],
    "backgroundColor": "#3b82f6",
    "borderColor": "#3b82f6"
   },
   {
    "type": "line", // change to line type
    "label": "Avg_sales",
    "data": [],
    "backgroundColor": "#14b8a6",
    "borderColor": "#14b8a6"
   }
  ]

Chart

Usage Tips

  • Ensure that the the values in the first column are categorical or time-based.
  • Apply sorting ORDER BY to improve readability.
  • Use LIMIT to control the number of data points for performance and clarity.

Previous

Quick Start

Next

Stacked Chart

On this page