Tacocat Tacocat - 5 months ago 139
AngularJS Question

Using d3 Timeline with Angular

I am looking for a timeline widget, module or directive that works with Angular, something that looks like this: http://www.cssscript.com/demo/simple-scrollable-timeline-chart-with-d3-js-d3-timeline/ (see below link to GitHub). I don't have the time to write such a thing from scratch.

Surprisingly, I hadn't been able to find one. Would appreciate it if someone would point me towards one, or if someone could generously write a native AngularJS directive for https://github.com/commodityvectors/d3-timeline. I know; this is just too much to ask for.

Answer

Hope this is regarding angular 1.

First make a DOM like this:

<div id= "chart" my-directive>Loading...</div>

Make a directive to hook into this div via attribute.

myApp.directive('myDirective', function() {
  var controller = ['$scope', function($scope) {
    var me = this;

  }];
  //define the directive object
  var directive = {};
  directive.controller = controller;
  directive.restrict = 'A';//restrict to attribute
  directive.controllerAs = 'cus';
  directive.link = function(scope, element, attrs) {
    const data = [{
            label: 'Name',
            data: [{
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 1, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 2, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 3, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 4, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 5, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 6, 1]),
                customClass: 'blue-dot'
            }]
        }, {
            label: 'Type',
            data: [{
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 1, 11])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 1, 15])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 3, 10])
            }, {
                label: 'I\'m a label with a custom class',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2015, 2, 1]),
                to: new Date([2015, 3, 1]),
                customClass: 'blue-interval'
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 6, 1])
            }, {
                type: TimelineChart.TYPE.POINT,
                at: new Date([2015, 7, 1])
            }]
        }, {
            label: 'Imp',
            data: [{
                label: 'Label 1',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2015, 1, 15]),
                to: new Date([2015, 3, 1])
            }, {
                label: 'Label 2',
                type: TimelineChart.TYPE.INTERVAL,
                from: new Date([2015, 4, 1]),
                to: new Date([2015, 5, 12])
            }]
        }];
    const timeline = new TimelineChart(element[0], data);
  }
  return directive;
});

Inside the link function get the data, later pass the element and data to the TimelineChart.

working code here