Vis.js timeline with polymer error : Something is wrong with the Timeline scale

Question

I want to create timeline web component using polymer and vis.js timeline.

polymer element code

<template>
    <div id="visualization" style="height: 100%;width: 100%;border: 1px solid black"></div>
</template>
<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.js"></script>
<script>
    // register an element
    MyElement = Polymer({

        is: 'legacy-element',

        ready: function () {
            const container = this.$.visualization;

            const items = new vis.DataSet({
                type: {start: 'ISODate', end: 'ISODate'}
            });

            items.add([
                {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
                {id: 2, content: 'item 2', start: '2014-01-18'},
                {id: 3, content: 'item 3', start: '2014-01-21'},
                {id: 4, content: 'item 4', start: '2014-01-19', end: '2014-01-24'},
                {id: 5, content: 'item 5', start: '2014-01-28', type: 'point'},
                {id: 6, content: 'item 6', start: '2014-01-26'}
            ]);

            const options = {
                width: '500px',
                height: '300px',
            };

            this.timeline = new vis.Timeline(container, items, options);

        }
    });
</script>

When I try to use it.

<legacy-element></legacy-element>

It gives me following error.

Something is wrong with the Timeline scale. Limited drawing of grid lines to 1000 lines.

I have tried possibly all solution which provided in vis's github issues

However, no success! Required help.

Answer 1

You need to put your link for loading external stylesheet inside <template>.

<dom-module id="legacy-element">

  <template>

    <link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css">

    <div id="visualization" style="height: 100%;width: 100%;border: 1px solid black"></div>
  </template>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.0/vis.js"></script>

  <script>
    // register an element
    MyElement = Polymer({

      is: 'legacy-element',

      ready: function() {
        const container = this.$.visualization;

        const items = new vis.DataSet({
          type: {
            start: 'ISODate',
            end: 'ISODate'
          }
        });

        items.add([{
          id: 1,
          content: 'item 1<br>start',
          start: '2014-01-23'
        }, {
          id: 2,
          content: 'item 2',
          start: '2014-01-18'
        }, {
          id: 3,
          content: 'item 3',
          start: '2014-01-21'
        }, {
          id: 4,
          content: 'item 4',
          start: '2014-01-19',
          end: '2014-01-24'
        }, {
          id: 5,
          content: 'item 5',
          start: '2014-01-28',
          type: 'point'
        }, {
          id: 6,
          content: 'item 6',
          start: '2014-01-26'
        }]);

        const options = {
          width: '500px',
          height: '300px',
        };

        this.timeline = new vis.Timeline(container, items, options);

      }
    });
  </script>
</dom-module>

Note: Loading external stylesheets is now deprecated in favor of style modules. It is still supported, but support will be removed in the future.

Or, you can do:

<link rel="import" type="css" href="http://visjs.org/dist/vis.css">

instead of

<link href="http://visjs.org/dist/vis.css" rel="stylesheet" type="text/css">

outside <template>.

Demo