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>

<!-- 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 -->

JavaScript behavior

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: top bottom Default value: top
`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: `measure` - the name of a specific column of the graph. `interval_s` - period time in seconds. `value` - the label that is displayed inside the column. `data` - data is an array, the first value of which is the beginning of the period, and the second color of this period.
`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: top bottom Default value: top
`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.