68 lines
1.5 KiB
Markdown
68 lines
1.5 KiB
Markdown
## Day-based Month-wise data
|
|
|
|
The heatmap is a representation of day-wise data (similar to [the GitHub Contribution Graph]()). It spaces out data values linearly, across 5 levels (zero data kept exclusive).
|
|
|
|
In this case, the data has three parts,
|
|
|
|
```js
|
|
let data = {
|
|
dataPoints: {
|
|
"1426744959": 20,
|
|
"1463673055": 113,
|
|
"1476892421": 57,
|
|
// ...
|
|
},
|
|
start: startDate, // a JS date object
|
|
end: endDate
|
|
}
|
|
```
|
|
|
|
```js
|
|
let chart = new Chart("#heatmap", {
|
|
type: 'heatmap',
|
|
data: data,
|
|
})
|
|
```
|
|
<project-demo data="heatmap-data" v-bind:config="{
|
|
title: 'Monthly Distribution',
|
|
type: 'heatmap',
|
|
}">
|
|
</project-demo>
|
|
|
|
<project-demo data="heatmap-data" v-bind:config="{
|
|
title: 'Monthly Distribution',
|
|
type: 'heatmap',
|
|
height: 200,
|
|
discreteDomains: 1,
|
|
countLabel: 'Level',
|
|
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
|
}"
|
|
v-bind:options="[
|
|
{
|
|
name: 'Discrete domains',
|
|
path: ['discreteDomains'],
|
|
type: 'Boolean',
|
|
// boolNames: ['Continuous', 'Discrete'],
|
|
states: { 'Discrete': 1, 'Continuous': 0 }
|
|
},
|
|
{
|
|
name: 'Colors',
|
|
path: ['colors'],
|
|
type: 'Array',
|
|
states: {
|
|
'Green (Default)': [],
|
|
'Blue': ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
|
|
'Halloween': ['#ebedf0', '#fdf436', '#ffc700', '#ff9100', '#06001c']
|
|
}
|
|
}
|
|
]">
|
|
</project-demo>
|
|
(We are working on making the start date and end date implicit and optional). [tip]
|
|
|
|
The chart is rendered by the type `heatmap`:
|
|
|
|
```js
|
|
|
|
```
|
|
|