bespoke-vis
Use [visjs][visjs] to include timelines (in the future, also charts and graphs) in your bespoke.js presentation. See our demo.
How to use
Only the HTML elements with the data-vis="timeline"
attribute will be
turned into visjs elements. For example, to generate a timeline, the
following code
...will render like:
It is also possible to render visjs elements by providing data as JSON content inside the element markup, like so:
{ "groups": [ { "id": 1, "content": "Group 1" }, { "id": 2, "content": "Group 2" } ], "items": [ { "group": 1, "content": "Item G1.1", "start": "2020-01-01", "type": "point" }, { "group": 1, "content": "Item G1.2", "start": "2021-01-01", "type": "point" }, { "group": 2, "content": "Item G2.1", "start": "2022-01-01", "type": "point" } ], "options": { "width": "100%", "height": "250px", "min": "2019-01-01", "max": "2023-01-01", "zoomMin": 2592000000, "zoomMax": 788400000000 } }
Either the JSON file or the content inside the element must have an object with the following properties:
options
: [optional] a set of configurations that will be directly provided to visjs. See visjs' documentation for what is supported.groups
: [optional] an array of objects indicating groups that will be used by the respective visualization to group the data items.items
: [mandatory] an array with timed events to display.
Download
Download the production version or the development version, or use a package manager.
Usage
This plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.
For example, when using CommonJS modules:
vaconst bespoke = vis = ; bespoke;
When using browser globals:
bespoke;
Inclusion of visjs' CSS/Font files
Vis.js is composed of javascript and CSS files.
This plugin, when a visjs element ([data-vis]
) is found on the bespoke deck,
injects the CSS file into de document head (by
using browserify-css).
Package managers
npm
$ npm install bespoke-vis
Credits
This plugin was built with generator-bespokeplugin.