The chart component

Example 1

An area chart representing a time series, using the top-level property time. Ticks on the x axis are adjusted automatically, and ISO datetimes are parsed and displayed in a readable format.

select 
    'chart'             as component,
    'Quarterly Revenue' as title,
    'area'              as type,
    'indigo'            as color,
    5                   as marker,
    TRUE                as time;
select 
    '2022-01-01T00:00:00Z' as x,
    15                     as y;
select 
    '2022-04-01T00:00:00Z' as x,
    46                     as y;
select 
    '2022-07-01T00:00:00Z' as x,
    23                     as y;
select 
    '2022-10-01T00:00:00Z' as x,
    70                     as y;
select 
    '2023-01-01T00:00:00Z' as x,
    35                     as y;
select 
    '2023-04-01T00:00:00Z' as x,
    106                    as y;
select 
    '2023-07-01T00:00:00Z' as x,
    53                     as y;

Example 2

A pie chart.

select 
    'chart'   as component,
    'Answers' as title,
    'pie'     as type,
    TRUE      as labels;
select 
    'Yes' as label,
    65    as value;
select 
    'No' as label,
    35   as value;

Example 3

A basic bar chart

select 
    'chart'             as component,
    'bar'               as type,
    'Quarterly Results' as title,
    TRUE                as horizontal,
    TRUE                as labels;
select 
    'Tom' as label,
    35    as value;
select 
    'Olive' as label,
    15      as value;

Example 4

A TreeMap Chart allows you to display hierarchical data in a nested layout. This is useful for visualizing the proportion of each part to the whole.

select 
    'chart'   as component,
    'treemap' as type,
    'Quarterly Results By Region (in k$)' as title,
    TRUE      as labels;
select 
    'North America' as series,
    'United States' as label,
    35              as value;
select 
    'North America' as series,
    'Canada'        as label,
    15              as value;
select 
    'Europe' as series,
    'France' as label,
    30       as value;
select 
    'Europe'  as series,
    'Germany' as label,
    55        as value;
select 
    'Asia'  as series,
    'China' as label,
    20      as value;
select 
    'Asia'  as series,
    'Japan' as label,
    10      as value;

Example 5

A bar chart with multiple series.

select 
    'chart'    as component,
    'Expenses' as title,
    'bar'      as type,
    TRUE       as stacked,
    TRUE       as toolbar,
    10         as ystep;
select 
    'Marketing' as series,
    2021        as x,
    35          as value;
select 
    'Marketing' as series,
    2022        as x,
    15          as value;
select 
    'Human resources' as series,
    2021              as x,
    30                as value;
select 
    'Human resources' as series,
    2022              as x,
    55                as value;

Example 6

A line chart with multiple series. One of the most common types of charts, often used to show trends over time. Also demonstrates the use of the toolbar attribute to allow the user to download the graph as an image or the data as a CSV file.

select 
    'chart'   as component,
    'Revenue' as title,
    0         as ymin,
    TRUE      as toolbar;
select 
    'Chicago Store' as series,
    2021            as x,
    35              as value;
select 
    'Chicago Store' as series,
    2022            as x,
    15              as value;
select 
    'Chicago Store' as series,
    2023            as x,
    45              as value;
select 
    'New York Store' as series,
    2021             as x,
    30               as value;
select 
    'New York Store' as series,
    2022             as x,
    55               as value;
select 
    'New York Store' as series,
    2023             as x,
    19               as value;

Example 7

A scatter plot with multiple custom options.

select 
    'chart'               as component,
    'Gross domestic product and its growth' as title,
    'scatter'             as type,
    'Growth Rate'         as xtitle,
    'GDP (Trillions USD)' as ytitle,
    500                   as height,
    8                     as marker,
    0                     as xmin,
    10                    as xmax,
    0                     as ymin,
    25                    as ymax,
    5                     as yticks;
select 
    'Brazil' as series,
    2.5      as x,
    2        as y;
select 
    'China' as series,
    6.5     as x,
    14      as y;
select 
    'United States' as series,
    2.3             as x,
    21              as y;
select 
    'France' as series,
    1.5      as x,
    3        as y;
select 
    'South Africa' as series,
    0.9            as x,
    0.3            as y;

Example 8

Heatmaps

You can build heatmaps using the heatmap top-level property.

The data format follows the apexcharts heatmap format, where each series is represented as a line in the chart:

• The x property of each item will be used as the x-axis value.
• The series property of each item will be used as the y-axis value.
• The y property of each item will be used as the value to display in the heatmap

The color property sets the color of each series separately, in order.

select 
    'chart'                     as component,
    'Survey Results'            as title,
    'heatmap'                   as type,
    'Database managemet system' as ytitle,
    'Year'                      as xtitle,
    'purple'                    as color,
    'purple'                    as color,
    'purple'                    as color;
select 
    'PostgreSQL' as series,
    '2000'       as x,
    48           as y;
select 
    'SQLite' as series,
    '2000'   as x,
    44       as y;
select 
    'MySQL' as series,
    '2000'  as x,
    78      as y;
select 
    'PostgreSQL' as series,
    '2010'       as x,
    65           as y;
select 
    'SQLite' as series,
    '2010'   as x,
    62       as y;
select 
    'MySQL' as series,
    '2010'  as x,
    83      as y;
select 
    'PostgreSQL' as series,
    '2020'       as x,
    73           as y;
select 
    'SQLite' as series,
    '2020'   as x,
    38       as y;
select 
    'MySQL' as series,
    '2020'  as x,
    87      as y;

Example 9

A timeline displaying events with a start and an end date

select 
    'chart'            as component,
    'Project Timeline' as title,
    'rangeBar'         as type,
    TRUE               as time,
    'teal'             as color,
    'cyan'             as color,
    TRUE               as labels;
select 
    'Phase 1'    as series,
    'Operations' as label,
    '2021-12-29' as value,
    '2022-01-02' as value;
select 
    'Phase 2'    as series,
    'Operations' as label,
    '2022-01-03' as value,
    '2022-01-04' as value;
select 
    'Yearly maintenance' as series,
    'Maintenance'        as label,
    '2022-01-01'         as value,
    '2022-01-03'         as value;

Example 10

Multiple charts on the same line

You can create information-dense dashboards by using the card component to put multiple charts on the same line.

For this, create one sql file per visualization you want to show, and set the embed attribute of the card component to the path of the file you want to include, followed by ?_sqlpage_embed.

select 
    'card' as component,
    'A dashboard with multiple graphs on the same line' as title,
    2      as columns;
select 
    '/examples/chart.sql?color=green&n=42&_sqlpage_embed' as embed,
    'You can find the sql file that generates the chart [here](https://github.com/lovasoa/SQLpage/tree/main/examples/official-site/examples/chart.sql)' as footer_md;
select 
    '/examples/chart.sql?_sqlpage_embed' as embed;