Calendar chart Since 0.7.0
Show activity over the course of a long span of time, such as months or years.
Usage
To use this component in a Nunjucks template you would add the following (assumes you've loaded OI Lume Viz into componentNamespace: 'oi'
):
{% comp 'oi.chart.calendar', { "config": config } %}{% endcomp %}
where config
is replaced by an object that contains some or all of these variables:
data
- Either a reference to a CSV file in the Lume site or an array of rows with named attributescolumns
- As with many of the visualisation types you can optionally add virtual columns.colours
- Define some visualisation-specific named colours.value
- The title of the column that will be used to set the colour of the day. This can be a hex code or a number if used withscale
.key
- The title of the column that contains the dates. These should be formatted in ISO8601 format e.g. "2024-02-06"scale
- A colour scale to use to colour the days based on thevalue
.min
- Used withscale
andmax
to define the colour scale.max
- Used withscale
andmin
to define the colour scale.tooltip
- This is to add tooltips to days. Either provide the name of an existing/virtual column in the data or construct one using string templates.order
- Set the order of the years to eitherchronological
(earliest year first) orreverse
(latest year first).startofweek
- Set the first day of the week. Use0
for Sunday,1
for Monday etc.attribution
- Add a line of attribution text under the visualisation.
Examples
- Basic calendar chart
- Colour using a defined scale
- Add a tooltip
- Reverse the order of the years
- Set the first day of the week
- Add a legend
- Limit rows used
1. Basic calendar chartยง
This is a basic calendar chart showing a dataset with daily data.
This example was made with config
:
data:
- date: '2021-10-04'
colour: '#FF6700'
- date: '2021-10-06'
colour: '#FF6700'
- date: '2021-10-18'
colour: '#FF6700'
- date: '2021-10-19'
colour: '#FF6700'
- date: '2021-10-20'
colour: '#FF6700'
- date: '2021-11-04'
colour: '#FF6700'
- date: '2021-11-22'
colour: '#FF6700'
- date: '2021-12-22'
colour: '#FF6700'
- date: '2022-01-04'
colour: '#FF6700'
- date: '2022-01-05'
colour: '#FF6700'
- date: '2022-01-18'
colour: '#FF6700'
- date: '2022-01-20'
colour: '#FF6700'
- date: '2022-01-23'
colour: '#FF6700'
- date: '2022-01-24'
colour: '#FF6700'
- date: '2022-01-26'
colour: '#FF6700'
- date: '2022-02-03'
colour: '#FF6700'
- date: '2022-02-16'
colour: '#FF6700'
- date: '2022-02-21'
colour: '#FF6700'
- date: '2022-02-28'
colour: '#FF6700'
- date: '2022-03-02'
colour: '#FF6700'
- date: '2022-03-07'
colour: '#FF6700'
- date: '2022-03-09'
colour: '#FF6700'
- date: '2022-03-10'
colour: '#FF6700'
- date: '2022-03-11'
colour: '#FF6700'
- date: '2022-03-15'
colour: '#FF6700'
- date: '2022-03-16'
colour: '#FF6700'
- date: '2022-03-17'
colour: '#FF6700'
- date: '2022-03-24'
colour: '#FF6700'
- date: '2022-03-28'
colour: '#FF6700'
- date: '2022-03-31'
colour: '#FF6700'
- date: '2022-04-05'
colour: '#FF6700'
- date: '2022-04-06'
colour: '#FF6700'
- date: '2022-04-12'
colour: '#FF6700'
- date: '2022-05-04'
colour: '#FF6700'
- date: '2022-05-05'
colour: '#FF6700'
- date: '2022-05-11'
colour: '#FF6700'
- date: '2022-05-18'
colour: '#FF6700'
- date: '2022-06-04'
colour: '#FF6700'
- date: '2022-06-07'
colour: '#FF6700'
- date: '2022-06-15'
colour: '#FF6700'
- date: '2022-06-20'
colour: '#FF6700'
- date: '2022-06-28'
colour: '#FF6700'
value: colour
key: date
{
"data": [{
"date": "2021-10-04",
"colour": "#FF6700"
},{
"date": "2021-10-06",
"colour": "#FF6700"
},{
"date": "2021-10-18",
"colour": "#FF6700"
},{
"date": "2021-10-19",
"colour": "#FF6700"
},{
"date": "2021-10-20",
"colour": "#FF6700"
},{
"date": "2021-11-04",
"colour": "#FF6700"
},{
"date": "2021-11-22",
"colour": "#FF6700"
},{
"date": "2021-12-22",
"colour": "#FF6700"
},{
"date": "2022-01-04",
"colour": "#FF6700"
},{
"date": "2022-01-05",
"colour": "#FF6700"
},{
"date": "2022-01-18",
"colour": "#FF6700"
},{
"date": "2022-01-20",
"colour": "#FF6700"
},{
"date": "2022-01-23",
"colour": "#FF6700"
},{
"date": "2022-01-24",
"colour": "#FF6700"
},{
"date": "2022-01-26",
"colour": "#FF6700"
},{
"date": "2022-02-03",
"colour": "#FF6700"
},{
"date": "2022-02-16",
"colour": "#FF6700"
},{
"date": "2022-02-21",
"colour": "#FF6700"
},{
"date": "2022-02-28",
"colour": "#FF6700"
},{
"date": "2022-03-02",
"colour": "#FF6700"
},{
"date": "2022-03-07",
"colour": "#FF6700"
},{
"date": "2022-03-09",
"colour": "#FF6700"
},{
"date": "2022-03-10",
"colour": "#FF6700"
},{
"date": "2022-03-11",
"colour": "#FF6700"
},{
"date": "2022-03-15",
"colour": "#FF6700"
},{
"date": "2022-03-16",
"colour": "#FF6700"
},{
"date": "2022-03-17",
"colour": "#FF6700"
},{
"date": "2022-03-24",
"colour": "#FF6700"
},{
"date": "2022-03-28",
"colour": "#FF6700"
},{
"date": "2022-03-31",
"colour": "#FF6700"
},{
"date": "2022-04-05",
"colour": "#FF6700"
},{
"date": "2022-04-06",
"colour": "#FF6700"
},{
"date": "2022-04-12",
"colour": "#FF6700"
},{
"date": "2022-05-04",
"colour": "#FF6700"
},{
"date": "2022-05-05",
"colour": "#FF6700"
},{
"date": "2022-05-11",
"colour": "#FF6700"
},{
"date": "2022-05-18",
"colour": "#FF6700"
},{
"date": "2022-06-04",
"colour": "#FF6700"
},{
"date": "2022-06-07",
"colour": "#FF6700"
},{
"date": "2022-06-15",
"colour": "#FF6700"
},{
"date": "2022-06-20",
"colour": "#FF6700"
},{
"date": "2022-06-28",
"colour": "#FF6700"
}],
"value": "colour",
"key": "date"
}
2. Colour using a defined scaleยง
In this example we've processed a dataset from Data Mill North to find the total daily counts for the St Peters Street (Lane 1) cycle counter in Leeds. We set the value
of each day to the Counts
field in the data and then colour each day using a defined colour scale
(Viridis
). If min
and max
are not set, the scale will use the range in the data.
This example was made with config
:
attribution: >
Data: <a
href="https://open-innovations.github.io/traffic-growth/data/leeds/cycle-100642-1.csv">processed</a>
(Open Innovations); <a
href="https://datamillnorth.org/dataset/leeds-annual-cycle-growth-">source</a>
(Leeds City Council)
data: test.data.cycle-100643-1
value: Counts
key: Date
scale: Viridis
{
"attribution": "Data: <a href=\"https://open-innovations.github.io/traffic-growth/data/leeds/cycle-100642-1.csv\">processed</a> (Open Innovations); <a href=\"https://datamillnorth.org/dataset/leeds-annual-cycle-growth-\">source</a> (Leeds City Council)\n",
"data": "test.data.cycle-100643-1",
"value": "Counts",
"key": "Date",
"scale": "Viridis"
}
3. Add a tooltipยง
A tooltip
can be set as either the name of a column/virtual column in the data or be a string template. The string template can contain replacement values and other content. For instance, we've included a bicycle icon (from Bootstrap Icons) and formated the Date
value using {{ Date | strftime("%e %B %Y") }}
.