How to draw line graph on timeline using visjs?

Question

Is it possible to draw line graph on timeline, using visjs?

I want to get something like here http://almende.github.io/chap-links-library/js/timeline/examples/example19_

Answer 1

With the help of the demo of syncing to timelines here and some experimenting of my own, the following seems to do something similar. You could probably tweak it a bit more to get what you want.

The console warnings of "WARNING: infinite loop in redraw?" when zooming on the graph2d part appear to be a bug in vis.js in this scenario, as it doesn't occur when zooming on the timeline - in any case, it doesn't affect the functionality

// create a couple of HTML items in various ways

        var item1 = document.createElement('div');
        item1.appendChild(document.createTextNode('item 1'));

        var item2 = document.createElement('div');
        item2.innerHTML = 'item 2';

        var item3 = document.createElement('div');
        var span3 = document.createElement('span');
        span3.className = 'large';
        span3.appendChild(document.createTextNode('item 3'));
        item3.appendChild(span3);

        var item4 = 'item 4';

        var item5 = document.createElement('div');
        item5.appendChild(document.createTextNode('item 5'));
        item5.appendChild(document.createElement('br'));
        var img5 = document.createElement('img');
        img5.src = 'https://d30y9cdsu7xlg0.cloudfront.net/png/511-200.png';
        img5.style.width = '48px';
        img5.style.height = '48px';
        item5.appendChild(img5);

        var item6 = 'item6
';

        var item7 = 'item7
click here';

        // create data and a Timeline
        var graph_container = document.getElementById('visualization-top-row');
        var event_container = document.getElementById('visualization-bottom-row');

        var items_graph = [
          {x: '2013-04-20', y: 10},
          {x: '2013-04-14', y: 25},
          {x: '2013-04-18', y: 30},
          {x: '2013-04-16', y: 10},
          {x: '2013-04-25', y: 15},
          {x: '2013-04-27', y: 30},
          {x: '2013-04-21', y: 30}
        ];

        var items_bottom_row = new vis.DataSet([
          {id: 1, content: item1, start: '2013-04-20', group: 0},
          {id: 2, content: item2, start: '2013-04-14', group: 0},
          {id: 3, content: item3, start: '2013-04-18', group: 0},
          {id: 4, content: item4, start: '2013-04-16', end: '2013-04-19', group: 0},
          {id: 5, content: item5, start: '2013-04-25', group: 0},
          {id: 6, content: item6, start: '2013-04-27', group: 0},
          {id: 7, content: item7, start: '2013-04-21', group: 0}
        ]);

        var groupsBottomRow = new vis.DataSet();
        groupsBottomRow.add({id: 0, content: "Cool and ze Gang"});


        var dataset_graph = new vis.DataSet(items_graph);
        var options2 = {
          start: '2013-04-12',
          end: '2013-04-22',
          height: '100%',
        };
        var graph2d = new vis.Graph2d(graph_container, dataset_graph, options2);
        var timeline = new vis.Timeline(event_container);

        timeline.setGroups(groupsBottomRow);
        timeline.setOptions(options2);
        timeline.setItems(items_bottom_row);

        function onChangeGraph(range) {
            if (!range.byUser) {
              return;
            }

            timeline.setOptions({
              start: range.start,
              end: range.end,
              height: '100%',
          });
        }

        function onChangeTimeline(range) {
            if (!range.byUser) {
              return;
            }

            graph2d.setOptions({
              start: range.start,
              end: range.end,
              height: '100%'
          });
        }

        // graph2d.on('rangechanged', onChangeGraph);
        // timeline.on('rangechanged', onChangeTimeline);

        graph2d.on('rangechange', onChangeGraph);
        timeline.on('rangechange', onChangeTimeline);


        graph2d.on('_change', function() {
          visLabelSameWidth();
        });

        $(window).resize(function(){
          visLabelSameWidth();
        });

        // Vis same width label.
        function visLabelSameWidth() {
          var ylabel_width = $("#visualization-bottom-row .vis-labelset .vis-label").width() + "px";
          //$("#visualization-top-row")[0].childNodes[0].childNodes[2].style.left = ylabel_width;

          var w1 = $("#visualization-top-row .vis-content .vis-data-axis").width();
          var w2 = $("#visualization-bottom-row .vis-labelset .vis-label").width();

          $("#visualization-top-row")[0].childNodes[0].childNodes[2].style.display = 'none';

          if (w2 > w1) {
            $("#visualization-top-row .vis-content")[1].style.width = ylabel_width;
          }
          else {
            $("#visualization-bottom-row .vis-labelset .vis-label").width(w1+"px");
          }
        }

body, html {
            font-family: arial, sans-serif;
            font-size: 11pt;
        }
        span {
            color: red;
        }
        span.large {
            font-size: 200%;
        }
        #visualization-bottom-row, #visualization-top-row {
            height: 100%;
        }
        .outer-top-row {
            height: 200px;
        }
        .outer-bottom-row {
            height: 300px;
        }
        #visualization-top-row .vis-panel.vis-bottom {
            display: none;
        }
        #visualization-top-row .vis-timeline{
            border-bottom: none;
        }