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);      }   } });

Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more