Visavail Timeline
This library visualizes the availability of time-dependent data with a chart on a website.
Official documentation
For more detailed information and examples, see the official documentation: Visavail Timeline documentation.
How to use?
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/visavail-custom/css/visavail.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/visavail-custom/js/visavail.js"></script>
Copy-paste the following <script> near the end of your pages under JS Nova to enable it.
<script src="../../assets/js/components/hs.visavail-timeline.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of timeline chart
$.HSCore.components.HSVisavailTimeline.init('#chartTimeline');
});
</script>
Basic example
<!-- Visavail Timeline -->
<div id="chartTimeline" class="chart--timeline"
data-data-set='[{
"measure": "Start",
"interval_s": 86400,
"value": "0",
"data": [
["2017-01-22", "#07d7f7"],
["2017-02-11", "#07d7f7"]
]
}, {
"measure": "Soft Cap",
"interval_s": 86400,
"value": "3,050",
"data": [
["2017-02-11", "#8069f2"],
["2017-03-02", "#8069f2"],
["2017-04-22", "#8069f2"]
]
}, {
"measure": "Hard Cap",
"interval_s": 86400,
"value": "48,050",
"data": [
["2017-04-22", "#0cdcb9"],
["2017-05-08", "#0cdcb9"],
["2017-06-22", "#0cdcb9"],
["2017-07-11", "#0cdcb9"]
]
}]'
data-margins='{
"bottom": 30
}'
data-height="25"
data-line-spacing="25"
data-axis-orientation="bottom"
data-value-margin='{
"top": 17,
"left": 8
}'
data-value-font-size="14"
data-axis-font-family="Source Sans Pro, sans-serif"
data-labels-font-family="Source Sans Pro, sans-serif"
data-is-responsive="true"></div>
<!-- End Visavail Timeline -->
Config
margin: {
top: 0,
right: 40,
bottom: 0,
left: 100
},
dataHeight: 18,
lineSpacing: 14,
width: 940,
maxDisplayDatasets: 0,
valueMargin: {
top: 0,
left: 0
},
axisOrientation: 'top',
valueColor: '#ffffff',
valueFontSize: 16,
axisFontSize: 12,
axisColor: '#8b8e9f',
axisFontFamily: 'Helvetica, Arial, sans-serif',
labelsFontSize: 16,
labelsColor: '#4a4e69',
labelsFontFamily: 'Helvetica, Arial, sans-serif'
| Parameter | Description |
|---|---|
margin.top |
indent at the top of the graph from the edge of the area in which the graph is located. |
margin.right |
indent on the right of the graph from the edge of the area in which the graph is located. |
margin.bottom |
indent at the bottom of the graph from the edge of the area in which the graph is located. |
margin.left |
indent on the left of the graph from the edge of the area in which the graph is located. |
dataHeight |
Height of the columns |
lineSpacing |
sets the amount of space between the lines for the label set to value. It is recommended to give the same value as in the dataHeight, otherwise the row will be located either below or above the centre of the column. |
width |
width of the chart. |
maxDisplayDatasets |
limits the maximum number of columns shown. |
axisOrientation |
determines in which part of the chart the labels will be displayed along the X axis. Possible values:
|
valueMargin.top |
Indent from the top of the label specified in value from the edge of the column. |
valueMargin.left |
Indent to the left of the label specified in value from the edge of the column. |
valueColor |
color of the label specified in value. |
valueFontSize |
font size of the label specified in value. |
axisFontSize |
The font size of labels along the X axis. |
axisColor |
color labels on the axis X. |
axisFontFamily |
X-line label font family. |
labelsFontSize |
label font size on the Y axis. |
labelsColor |
color labels on the Y axis. |
labelsFontFamily |
label font family Y. |
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-data-set="".
| Attribute | Description |
|---|---|
data-data-set |
array of data for the graph. Where:
|
data-margins |
the indents of the graph from the edges of the area in which the graph is located. |
data-height |
Height of the columns. |
data-width |
Width of the chart. |
data-line-spacing |
sets the amount of space between the lines for the label set to value. It is recommended to give the same value as in data-height, otherwise the line will be located either below or above the center of the column. |
data-max-display-datasets |
limits the maximum number of columns shown. |
data-axis-orientation |
determines in which part of the chart the labels will be displayed along the X axis. Possible values:
|
data-value-margin |
The indents of the label specified by value at the top and left of the column edges. |
data-value-color |
color of the label specified in value. |
data-value-font-size |
font size of the label specified in value. |
data-axis-font-size |
The font size of labels along the X axis. |
data-axis-color |
color labels on the axis X. |
data-axis-font-family |
X-line label font family. |
data-labels-font-size |
label font size on the Y axis. |
data-labels-color |
color labels on the Y axis. |
data-labels-font-family |
Label font family on the Y axis. |
data-is-responsive |
determines whether the graph is adaptive. |