Search code examples
javascriptangularjsd3.jsrickshaw

How to make graph through rickshaw and angularjs?

I am just learning to make graph through angularjs and rickshaw from TagTree. The have some data of ufo sighting and graw the graph.

enter image description here

I followed the same procedure but I did not able to draw the graph similar graph what they had draw.

Please see the demo on Plunker This is working example thanks @VasanthSriram I was forgetting to include underscore.js file

<body ng-app="angularRickshawApp">
   <div ng-controller='MainCtrl'>
         <div class="header">
      <h3 class="text-muted">UFO sightings in 2008</h3>

      <rickshaw-chart data="sightingsByDate" color="blue" renderer="renderer" width="750" height="450">
      </rickshaw-chart>
    </div>
   </div>

<script>
   var app=angular.module('angularRickshawApp',[]);
    app.controller('MainCtrl', function ($scope, $http) {
      $http.get('sightings.json').success(function(result){
        $scope.sightings = result;

        $scope.renderer = 'line';

        $scope.sightingsByDate = _(result)
          .chain()
          .countBy(function(sighting){return sighting.sightedAt.$date;})
          .pairs()
          .map(function(pair){
            return {
              x: new Date(parseInt(pair[0])).getTime()/1000,
              y: pair[1]
            };
          })
          .sortBy(function(dateCount){return dateCount.x;})
          .value();

      })
    });

    app.directive('rickshawChart', function () {
      return {
        scope: {
          data: '=',
          renderer: '='
        },
        template: '<div></div>',
        restrict: 'E',
        link: function postLink(scope, element, attrs) {
          scope.$watchCollection('[data, renderer]', function(newVal, oldVal){
            if(!newVal[0]){
              return;
            }

            element[0].innerHTML ='';

            var graph = new Rickshaw.Graph({
              element: element[0],
              width: attrs.width,
              height: attrs.height,
              series: [{data: scope.data, color: attrs.color}],
              renderer: scope.renderer
            });

            graph.render();
          });
        }
      };
    });
</script>
Solution

  • You are missing underscore library in your plunker. Just add the library and it works.