How to use vis-timeline - 4 common examples

To help you get started, we’ve selected a few vis-timeline examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sirensolutions / kibi_timeline_vis / public / kibi_timeline.js View on Github external
groupEvents[groupIndex] = _.cloneDeep(events);

      // make sure all events have correct group index
      // add only events from groups which still exists
      const points = [];
      _.each(groupEvents, function (events, index) {
        _.each(events, function (e) {
          e.group = $scope.visOptions.groupsOnSeparateLevels === true ? index : 0;
          if (existingGroupIds.indexOf(e.groupId) !== -1) {
            points.push(e);
          }
        });
      });

      data = new DataSet(points);
      timeline.setItems(data);
      timeline.fit();
    };
github sirensolutions / kibi_timeline_vis / public / kibi_timeline.js View on Github external
groups.push({
            id: index,
            content: group.label,
            style: 'background-color:' + group.color + '; color: #fff;'
          });
        });
      } else {
        // single group
        // - a bit of hack but currently the only way I could make it work
        groups.push({
          id: 0,
          content: '',
          style: 'background-color: none;'
        });
      }
      const dataGroups = new DataSet(groups);
      timeline.setGroups(dataGroups);
    };
github sirensolutions / kibi_timeline_vis / public / kibi_timeline.js View on Github external
const initTimeline = function () {
      if (!timeline) {
        // create a new one
        $scope.timeline = timeline = new Timeline($element[0]);
        if ($scope.timelineOptions) {
          const utcOffset = TimelineHelper.changeTimezone(config.get('dateFormat:tz'));
          if (utcOffset !== 'Browser') {
            $scope.timelineOptions.moment = function (date) {
              return moment(date).utcOffset(utcOffset);
            };
          }
          timeline.setOptions($scope.timelineOptions);
        }
        timeline.on('select', onSelect);
        timeline.on('rangechanged', function (props) {
          if ($scope.visOptions.syncTime && props.byUser) {
            timefilter.time.mode = 'absolute';
            timefilter.time.from = props.start.toISOString();
            timefilter.time.to = props.end.toISOString();
          }

vis-timeline

Create a fully customizable, interactive timeline with items and ranges.

(Apache-2.0 OR MIT)
Latest version published 6 months ago

Package Health Score

89 / 100
Full package analysis