@@ -16,6 +16,9 @@ let data = { | |||||
end: endDate | end: endDate | ||||
} | } | ||||
``` | ``` | ||||
(We are working on making the start date and end date implicit and optional). | |||||
The chart is rendered by the type `heatmap`: | |||||
```js | ```js | ||||
let chart = new Chart("#heatmap", { | let chart = new Chart("#heatmap", { | ||||
@@ -29,6 +32,13 @@ let chart = new Chart("#heatmap", { | |||||
}"> | }"> | ||||
</project-demo> | </project-demo> | ||||
Setting `discreteDomains` to `0` allows for a continous distribution of heat squares (as on GitHub), rather than showing the month-wise separation. A different set of colors can also be specified. | |||||
```js | |||||
discreteDomains: 0, // default 1 | |||||
colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'], | |||||
``` | |||||
<project-demo data="heatmap-data" v-bind:config="{ | <project-demo data="heatmap-data" v-bind:config="{ | ||||
title: 'Monthly Distribution', | title: 'Monthly Distribution', | ||||
type: 'heatmap', | type: 'heatmap', | ||||
@@ -57,11 +67,4 @@ let chart = new Chart("#heatmap", { | |||||
} | } | ||||
]"> | ]"> | ||||
</project-demo> | </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 | |||||
``` | |||||
@@ -133,13 +133,13 @@ Set the height of the chart in pixels. | |||||
- Values: `span | tick` | - Values: `span | tick` | ||||
- Default: `span` | - Default: `span` | ||||
Foo | |||||
Display axis points as short ticks or long spanning lines. | |||||
#### xIsSeries | #### xIsSeries | ||||
- Type: `Boolean` | - Type: `Boolean` | ||||
- Default: `0` | - Default: `0` | ||||
Foo | |||||
The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by setting `xIsSeries` to `1` and allowing only a few periodic ones. | |||||
--- | --- | ||||
@@ -147,14 +147,19 @@ Foo | |||||
- Type: `Object` | - Type: `Object` | ||||
- Default: `{}` | - Default: `{}` | ||||
Customizing options for the format of the label and value displayed on hover tooltips. | |||||
#### | #### | ||||
- Type: `function` | |||||
- Default: `{}` | |||||
--- | --- | ||||
### barOptions | ### barOptions | ||||
- Type: `Object` | - Type: `Object` | ||||
- Default: `{}` | - Default: `{}` | ||||
This option controls how width of each `column` is calculated in the chart. | |||||
Can be used to set various properties on bar plots. | |||||
#### spaceRatio | #### spaceRatio | ||||
- Type: `Number` | - Type: `Number` | ||||
@@ -162,17 +167,21 @@ This option controls how width of each `column` is calculated in the chart. | |||||
- Max: `2` | - Max: `2` | ||||
- Default: `0.5` | - Default: `0.5` | ||||
In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container. | |||||
#### stacked | #### stacked | ||||
- Type: `Boolean` | - Type: `Boolean` | ||||
- Default: `0` | - Default: `0` | ||||
Renders multiple bar datasets in a stacked configuration, rather than the default adjacent. | |||||
--- | --- | ||||
### lineOptions | ### lineOptions | ||||
- Type: `Object` | - Type: `Object` | ||||
- Default: `{}` | - Default: `{}` | ||||
Foo | |||||
Can be used to set various properties on line plots, turn them into Area Charts and so on. Explore in details on the [Trends]() page. | |||||
--- | --- | ||||
@@ -180,20 +189,12 @@ Foo | |||||
- Type: `Boolean` | - Type: `Boolean` | ||||
- Default: `0` | - Default: `0` | ||||
Foo | |||||
Example | |||||
Makes the chart interactive with arrow keys and highlights the current active data point. | |||||
```javascript | |||||
{ | |||||
dropdownButton: '<span class="fa fa-chevron-down"></span>' | |||||
} | |||||
``` | |||||
--- | |||||
### valuesOverPoints | ### valuesOverPoints | ||||
- Type: `Boolean` | - Type: `Boolean` | ||||
- Default: `0` | - Default: `0` | ||||
Foo | |||||
### | |||||
To display data values over bars or dots in an axis graph. |
@@ -1,23 +1,27 @@ | |||||
# Navigation | # Navigation | ||||
In order to analyse a data individually, it helps if the chart can activate a given point on the plot. This is where `isNavigable` comes in handy, which makes the chart interactive with arrow keys and highlights the current active data point. | |||||
```js | |||||
isNavigable: true // default: false | |||||
``` | |||||
Try and traverse this chart with arrow-keys. | |||||
<project-demo data="2" v-bind:config="{ | <project-demo data="2" v-bind:config="{ | ||||
type: 'bar', | type: 'bar', | ||||
height: 140, | height: 140, | ||||
isNavigable: 1, | isNavigable: 1, | ||||
colors: ['orange'], | |||||
colors: ['light-blue'], | |||||
axisOptions: { xAxisMode: 'tick' }, | axisOptions: { xAxisMode: 'tick' }, | ||||
barOptions: { spaceRatio: 0.2 }, | barOptions: { spaceRatio: 0.2 }, | ||||
}"> | }"> | ||||
</project-demo> | </project-demo> | ||||
Each time a data point is activated, a new `data-select` event is triggered that contains all the label and value information specific to the point This can then be used to reflect in other parts of the webpage. | |||||
<project-demo data="2" sideContent="2" | |||||
v-bind:config="{ | |||||
type: 'bar', | |||||
height: 140, | |||||
isNavigable: 1, | |||||
colors: ['grey'], | |||||
axisOptions: { xAxisMode: 'tick' }, | |||||
barOptions: { spaceRatio: 0.2 }, | |||||
}"> | |||||
</project-demo> | |||||
```js | |||||
chart.parent.addEventListener('data-select', (e) => { | |||||
update_moon_data(e.index); // e contains index and value of current datapoint | |||||
}); | |||||
``` |