javascript - get highcharts data from table angularjs -

i'm trying highcharts data html table using angularjs

here 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 exaples used: http://jsfiddle.net/4mb9k/ http://jsfiddle.net/highcharts/ayycv/ it's not working, missed?

i think not attaching chart properly. in example there $('#container').highcharts({......... chart attached particular container element , in case attaching element data source. chart has constructor accepts options , chart configurations can see this example make type="pie" type="bar" can see detailed documentation , configurations on this link hope solving problem.

it should 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 @ 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);      }   } });