hcharts & sparklines

hchart.js

'use strict';

angular.module('mydashApp')
  .directive('hchart', function () {
    var seriesId = 0;
    var ensureIds = function(series) {
        series.forEach(function(s) {
           if(!angular.isDefined(s.id)) {
               s.id = "series-" + seriesId++;
           }
        });
    }

    var getMergedOptions = function(element, options) {
        var defaultOptions = {
            chart: {
                renderTo: element[0]
            },
            title: {},
            series: []
        }
        var mergedOptions = {}
        if(options) {
            mergedOptions = $.extend(true, {}, defaultOptions, options);
        } else {
            mergedOptions = defaultOptions;
        }
        return mergedOptions
    }

    return {
        restrict: 'EC',
        replace: false,
        scope: {
            series: '=',
            options: '=',
            title: '='
        },
        link: function (scope, element, attrs) {

            var mergedOptions = getMergedOptions(element, scope.options);
            var chart = new Highcharts.Chart(mergedOptions);

            scope.$watch("series", function (newSeries, oldSeries) {
                ensureIds(newSeries);
                var ids = []

                //Find series to add or update
                newSeries.forEach(function(s){
                    ids.push(s.id)
                    var chartSeries = chart.get(s.id);
                    if(chartSeries) {
                        chartSeries.update(angular.copy(s), true);
                    } else {
                        chart.addSeries(angular.copy(s))
                    }
                });
                //Now remove any missing series
                chart.series.forEach(function(s) {
                    if(ids.indexOf(s.options.id) < 0) {
                        s.remove();
                    }
                });

            }, true);
            scope.$watch("title", function (newTitle) {
                chart.setTitle(newTitle, true);
            }, true);
            scope.$watch("options", function (newOptions, oldOptions, scope) {
                //do nothing when called on registration
                if (newOptions === oldOptions) return;
                chart.destroy()
                var mergedOptions = getMergedOptions(element, newOptions);
                chart = new Highcharts.Chart(mergedOptions);
                chart.setTitle(scope.title, true);
                ensureIds(scope.series);
                scope.series.forEach(function(s) {
                    chart.addSeries(angular.copy(s))
                });

            }, true);
        }
    }
    });

main.html

<div class="hero-unit">
  <h1>'Allo, 'Allo!</h1>
  <p>You now have</p>
  <ul>
      <li ng-repeat="thing in awesomeThings">{{thing}}</li>
  </ul>
  <p>installed.</p>
    <input ng-model="chart.title.text">
    <button ng-click="inc()">Increment</button>
    <button ng-click="addSeries()">Add Series</button>
    <button ng-click="removeRandomSeries()">Remove Random Series</button>
    <button ng-click="swapChartType()">Swap</button>
    <p><sparkline data="spark.data" options="options"></sparkline><br/></p>
    <p>{{spark.data}}</p>
    <hchart id="pie1" series="chart.series" title="chart.title" options="chart.options"></hchart>
  <h3>Enjoy coding! - Yeoman</h3>
</div>

main.js

'use strict';

angular.module('mydashApp')
  .controller('MainCtrl', function ($scope) {
    jQuery.cssProps.opacity = 'opacity';
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Testacular'
    ];

    $scope.ideas = [
        ['ideas1', 1],
        ['ideas2', 8],
        ['ideas3', 5]
    ];

    $scope.spark = {data: [10,15,12,8,7]};

    $scope.inc = function() {
        $scope.chart.series[0].data =  $scope.chart.series[0].data.concat([1,10,20])
    } ;

    $scope.addSeries = function() {
        var rnd = []
        for(var i=0;i<10;i++) {
            rnd.push(Math.floor(Math.random() * 20) + 1)
        }
        $scope.chart.series.push({data: rnd})
    }

    $scope.removeRandomSeries = function() {
        var seriesArray = $scope.chart.series
        var rndIdx = Math.floor(Math.random() *  seriesArray.length);
        seriesArray.splice(rndIdx , 1)
    }

    $scope.options = {type:'line'}

    $scope.swapChartType = function() {
        if(this.chart.options.chart.type === 'line') {
            this.chart.options.chart.type = 'bar'
        } else {
            this.chart.options.chart.type = 'line'
        }
    }

    $scope.chart = {
        options: {chart: {type: 'bar'}},
        series: [
            {data: [10,15,12,8,7]}
            ],
        title: {text: 'Hello'}
    }


    $scope.title = "Hello";


    });

sparkline.js

'use strict';

angular.module('mydashApp')
  .directive('sparkline', function () {
    return {
        restrict:"E",
        scope:{
            data:"=",
            options:"="
        },
        //template: "<div class='tpl'></div>",
        compile: function(tElement,tAttrs,transclude){
            //tElement.replaceWith("<span>"+tAttrs.data+"</span>");
            return function(scope, element, attrs){
                scope.$watch("data", function(newValue, oldValue, scope){
                    element.sparkline(newValue, scope.options);
                });
                scope.$watch("options", function(newValue, oldValue, scope){
                    var options = angular.extend({type:'line'},newValue);
                    if(newValue) {
                        element.sparkline(scope.data,options);
                    }
                });
            };
        }
    };
  });