get highcharts data from table angularjs

Question

I'm trying to get highcharts data from html table using angularJS

here is html:

<table class="table-count" id="table-count">
  <thead>
    <tr>
      <th>
        Priority
      </th>
      <th>
        Total
      </th>
      <th>
        Active
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="color-P0"></span> P0
      </td>
      <td ng-model="countPriority">
        {{getCount("P0")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P0")}}
      </td>
    </tr>
    <tr>
      <td>
        <span class="color-P1"></span>P1
      </td>
      <td ng-model="countPriority">
        {{getCount("P1")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P1")}}
      </td>
    </tr>
    <tr>
      <td>
        <span class="color-P2"></span>P2
      </td>
      <td ng-model="countPriority">
        {{getCount("P2")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P2")}}
      </td>
    </tr>
    <tr>
      <td>
        <span class="color-P3"></span>P3
      </td>
      <td ng-model="countPriority">
        {{getCount("P3")}}
      </td>
      <td ng-model="countPriorityActive">
        {{getCountActive("P3")}}
      </td>
    </tr>
  </tbody>
</table>

and directive:

.directive('hcPie1', function() {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function($scope, $element) {},
    template: '<div id="container1" style="margin: 0 auto">not working</div>',
    link: function(scope, element, attrs) {
      var chart = new Highcharts.Chart({
        data: {
          table: document.getElementById('table-count')
        },
        chart: {
          renderTo: 'container1',
          backgroundColor: '#afafaf',
          plotBorderWidth: null,
          plotShadow: false,
          margin: [0, 0, 0, 0],
          spacingTop: 0,
          spacingBottom: 0,
          spacingLeft: 0,
          spacingRight: 0,
        },
        title: {
          text: null
        },
        plotOptions: {
          pie: {
            size: '100%',
            allowPointSelect: false,
            cursor: 'pointer',
            dataLabels: {
              enabled: false
            }
          }
        },
        tooltip: {
          enabled: false
        },
        labels: {
          enabled: false
        },
        showInLegend: false,
        series: [{
          type: 'pie',
          name: 'Browser share'
        }],
        exporting: {
          enabled: false
        }
      });
    }
  }
});

Here is exaples I used: http://jsfiddle.net/4mb9k/ http://jsfiddle.net/highcharts/ayycv/ but it's not working, what I missed?

Answer 1

I think that you are not attaching the chart properly. In the example there is $('#container').highcharts({......... The chart is attached to particular container element and in your case you are just attaching element to the data source. Also the chart has a constructor that accepts options and chart configurations you can see this example Just make the type="pie" to type="bar" You can see the detailed documentation and configurations also on this link I hope that this will help solving your problem.

It should look something like this with the configs

angular.module('myApp', [])
  .directive('hcPie', function () {
  return {
    restrict: 'C',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          plotBackgroundColor: null,
          plotBorderWidth: null,
          plotShadow: false
        },
        title: {
          text: 'Browser market shares at a specific website, 2010'
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.percentage}%</b>',
          percentageDecimals: 1
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: 'pointer',
            dataLabels: {
              enabled: true,
              color: '#000000',
              connectorColor: '#000000',
              formatter: function () {
                return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %';
              }
            }
          }
        },
        series: [{
          type: 'bar',
          name: 'Browser share',
          data: scope.items
        }]
      });
      scope.$watch("items", function (newValue) {
        chart.series[0].setData(newValue, true);
      }, true);

    }
  }
});