sqlDashboards Example Charts Dark Theme
For each of the chart types their data format expected together with some examples are shown below
Time Series
Format
- The first date/time column found will be used for the x-axis.
- Each numerical column represents one time series line on the chart.
Day Sines
A sine/cosine wave over a period of days.
![A sine/cosine wave over a period of days.](images/time-series-day-sines-dark.png)
![A sine/cosine wave over a period of days.](images/data-table-day-sines.png)
KDB Code
Area Chart
Format
- The first string columns are used as category labels.
- Whatever numeric columns appear after the strings represents a separate series in the chart.
Multiple Series with Time X-Axis
2 series are shown, one for Sales, One for Costs. x-axis is in months.
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/area-chart-multiple-series-with-time-x-axis-dark.png)
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/data-table-multiple-series-with-time-x-axis.png)
KDB Code
Single Category
One number column generates one series.
![One number column generates one series.](images/area-chart-single-category-dark.png)
![One number column generates one series.](images/data-table-single-category.png)
KDB Code
Multiple series
Each column is a new series/colored bar.
![Each column is a new series/colored bar.](images/area-chart-multiple-series-dark.png)
![Each column is a new series/colored bar.](images/data-table-multiple-series.png)
KDB Code
Multiple series with many categories on the X-axis
Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/area-chart-multiple-series-with-many-categories-on-the-x-axis-dark.png)
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/data-table-multiple-series-with-many-categories-on-the-x-axis.png)
KDB Code
Bar Chart
Format
- The first string columns are used as category labels.
- Whatever numeric columns appear after the strings represents a separate series in the chart.
Multiple Series with Time X-Axis
2 series are shown, one for Sales, One for Costs. x-axis is in months.
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/bar-chart-multiple-series-with-time-x-axis-dark.png)
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/data-table-multiple-series-with-time-x-axis.png)
KDB Code
Single Category
One number column generates one series.
![One number column generates one series.](images/bar-chart-single-category-dark.png)
![One number column generates one series.](images/data-table-single-category.png)
KDB Code
Multiple series
Each column is a new series/colored bar.
![Each column is a new series/colored bar.](images/bar-chart-multiple-series-dark.png)
![Each column is a new series/colored bar.](images/data-table-multiple-series.png)
KDB Code
Multiple series with many categories on the X-axis
Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/bar-chart-multiple-series-with-many-categories-on-the-x-axis-dark.png)
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/data-table-multiple-series-with-many-categories-on-the-x-axis.png)
KDB Code
Bar Chart Stacked
Format
- The first string columns are used as category labels.
- Whatever numeric columns appear after the strings represents a separate series in the chart.
Multiple Series with Time X-Axis
2 series are shown, one for Sales, One for Costs. x-axis is in months.
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/bar-chart-stacked-multiple-series-with-time-x-axis-dark.png)
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/data-table-multiple-series-with-time-x-axis.png)
KDB Code
Single Category
One number column generates one series.
![One number column generates one series.](images/bar-chart-stacked-single-category-dark.png)
![One number column generates one series.](images/data-table-single-category.png)
KDB Code
Multiple series
Each column is a new series/colored bar.
![Each column is a new series/colored bar.](images/bar-chart-stacked-multiple-series-dark.png)
![Each column is a new series/colored bar.](images/data-table-multiple-series.png)
KDB Code
Multiple series with many categories on the X-axis
Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/bar-chart-stacked-multiple-series-with-many-categories-on-the-x-axis-dark.png)
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/data-table-multiple-series-with-many-categories-on-the-x-axis.png)
KDB Code
Bubble Chart
Format
- The first string columns are used as category labels.
- There must then be 3 numeric columns which are used for x-coord, y-coord, size in that order.
Single series
The three columns are used for x-axis,y-axis and size respectively. Notice the GdpPerCapita column has been divided to make it similar sized to the othercolumns so that the bubbles are a sensible size.
![The three columns are used for x-axis,y-axis and size respectively. Notice the GdpPerCapita column has been divided to make it similar sized to the othercolumns so that the bubbles are a sensible size.](images/bubble-chart-single-series-dark.png)
![The three columns are used for x-axis,y-axis and size respectively. Notice the GdpPerCapita column has been divided to make it similar sized to the othercolumns so that the bubbles are a sensible size.](images/data-table-single-series.png)
KDB Code
Candlestick
Format
- The table should contain columns labelled open/high/low/close/volume
but must atleast contain high/low to allow it to be drawn.
Only weekday values are shown.
Prices going up
A Candlestick showing price movements and fluctuating volume over a period of 6 weeks
![A Candlestick showing price movements and fluctuating volume over a period of 6 weeks](images/candlestick-prices-going-up-dark.png)
![A Candlestick showing price movements and fluctuating volume over a period of 6 weeks](images/data-table-prices-going-up.png)
KDB Code
Rising Prices, No Volume
A candlestick showing only price movements, no volume column.
![A candlestick showing only price movements, no volume column.](images/candlestick-rising-prices--no-volume-dark.png)
![A candlestick showing only price movements, no volume column.](images/data-table-rising-prices--no-volume.png)
KDB Code
Rising Prices, Only High Low Columns Shown
A candlestick showing only high low prices.
![A candlestick showing only high low prices.](images/candlestick-rising-prices--only-high-low-columns-shown-dark.png)
![A candlestick showing only high low prices.](images/data-table-rising-prices--only-high-low-columns-shown.png)
KDB Code
Data Table
Format
Any format of table is acceptable, all rows/columns will be shown as a plain table.
Many Columned Table
All rows/columns will be shown as a plain table.
![All rows/columns will be shown as a plain table.](images/data-table-many-columned-table-dark.png)
KDB Code
Heat Map
Format
A HeatMap works best with 1+ string columns.
- Starting from the left each string column is taken as one nesting level
- The first numerical column will be taken as size, the second as colour.
Country GDP's
The continent column is a top-level branch, the country column becomes leafs.The first two columns are GDP and GDP per Capita which become the size and color of the leafs respectively.
![The continent column is a top-level branch, the country column becomes leafs.The first two columns are GDP and GDP per Capita which become the size and color of the leafs respectively.](images/heat-map-country-gdp-s-dark.png)
![The continent column is a top-level branch, the country column becomes leafs.The first two columns are GDP and GDP per Capita which become the size and color of the leafs respectively.](images/data-table-country-gdp-s.png)
KDB Code
Histogram
Format
Each Numeric column represents a separate series in the histogram. The series values are placed into buckets and their frquency tallied.
Profit Distribution
Distribution of Returns and Losses
![Distribution of Returns and Losses](images/histogram-profit-distribution-dark.png)
![Distribution of Returns and Losses](images/data-table-profit-distribution.png)
KDB Code
Line Chart
Format
- The first string columns are used as category labels.
- Whatever numeric columns appear after the strings represents a separate series in the chart.
Multiple Series with Time X-Axis
2 series are shown, one for Sales, One for Costs. x-axis is in months.
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/line-chart-multiple-series-with-time-x-axis-dark.png)
![2 series are shown, one for Sales, One for Costs. x-axis is in months.](images/data-table-multiple-series-with-time-x-axis.png)
KDB Code
Single Category
One number column generates one series.
![One number column generates one series.](images/line-chart-single-category-dark.png)
![One number column generates one series.](images/data-table-single-category.png)
KDB Code
Multiple series
Each column is a new series/colored bar.
![Each column is a new series/colored bar.](images/line-chart-multiple-series-dark.png)
![Each column is a new series/colored bar.](images/data-table-multiple-series.png)
KDB Code
Multiple series with many categories on the X-axis
Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/line-chart-multiple-series-with-many-categories-on-the-x-axis-dark.png)
![Each column is a new series/colored bar. When there are a lot of categories, some labels are hidden.](images/data-table-multiple-series-with-many-categories-on-the-x-axis.png)
KDB Code
Pie Chart
Format
- Each numerical column represents a pie chart.
- The title of each pie chart will be the column title.
- Each row will be a section of the pie and will use the row title as a label.
Single Pie Chart Example
A single numerical columns gives a single pie chart for that column.
![A single numerical columns gives a single pie chart for that column.](images/pie-chart-single-pie-chart-example-dark.png)
![A single numerical columns gives a single pie chart for that column.](images/data-table-single-pie-chart-example.png)
KDB Code
Multiple Pie Chart Example
Using multiple numerical columns gives a pie chart for each column.
![Using multiple numerical columns gives a pie chart for each column.](images/pie-chart-multiple-pie-chart-example-dark.png)
![Using multiple numerical columns gives a pie chart for each column.](images/data-table-multiple-pie-chart-example.png)
KDB Code
Scatter Plot
Format
- Two or more numeric columns are required.
- The values in the first column are used for the X-axis.
- The values in following columns are used for the Y-axis.
- Each column is displayed with a separate color.
Country Population and GDP
The first column GDP is used for the x-axis. The subsequent columns are then plotted against that x axis as separate colored series.
![The first column GDP is used for the x-axis. The subsequent columns are then plotted against that x axis as separate colored series.](images/scatter-plot-country-population-and-gdp-dark.png)
![The first column GDP is used for the x-axis. The subsequent columns are then plotted against that x axis as separate colored series.](images/data-table-country-population-and-gdp.png)
KDB Code
Step Plot
Format
- The first date/time column found will be used for the x-axis.
- Each numerical column represents one time series line on the chart.
Day Sines
A sine/cosine wave over a period of days.
![A sine/cosine wave over a period of days.](images/step-plot-day-sines-dark.png)
![A sine/cosine wave over a period of days.](images/data-table-day-sines.png)
KDB Code
DOT Graph
Format
- The table can contain columns labelled from/to/label/style.
- If it does not, the first two columns are assumed to be from and to respectively.
- The dot file generated gives a directed graph from "from" nodes to "to" nodes with applicable style/labels.
- Graphviz Dot MUST be on your command line PATH for this to work.
Alphabet Spaghetti
A directed graph with 5 nodes.
![A directed graph with 5 nodes.](images/dot-graph-alphabet-spaghetti-dark.png)
![A directed graph with 5 nodes.](images/data-table-alphabet-spaghetti.png)
KDB Code