Directive with Highcharts, failing to show the chart at the linking step.

[Roberto Martínez]

I'm using a directive to build some Highcharts and I'm having a problem in a ng-repeat loop when I'm using variables to set the div ID. It seems that Highcharts doesn't recognize the compiled code.

ERROR in Firebug:

Highcharts error #13: www.highcharts.com/errors/13

<div class="ng-binding" id="{{1}}" ng-init="load('lever', lever.id);" charttype="line" chartheight="80" width="120">

HTML
 <hichart id="{{1}}" ng-init="load('lever', lever.id);"  chartType="line" chartHeight="80" width="120"></hichart>   DOESN'T work
 <hichart id="1" ng-init="load('lever', lever.id);"  chartType="line" chartHeight="80" width="120"></hichart>   DO work

Actually the code is something like id="{{lever.id}}", but was simplifying and the {{1}} leads to the same error. In my directive I', using link to apply the highcarts changes after the template has been put.

DIRECTIVE
.directive('hichart', function() {
  return {
    restrict: 'E',
    transclude: true,
    controller: ChartCtrl,  
    template:'<div>{{chartId}}---{{chartData}}</div>',
    replace: true,
    link: function(scope, element, attrs) {    
      var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: '1',             
        type: attrs.charttype,
        animation : false,
        height:attrs.chartheight
      },
      xAxis: {categories: scope.chartCategories },
      yAxis:{title:{text:''}},
      series:[{data: scope.chartData}],
      title:{text:''},
      legend:{enabled:false}
      });    
    },
  };
})


I have been trying a solution all the whole day and I really appreciate your feedback.

[Mark Daggett]

Hey Roberto,

My suggestion would be to not pass the ID that way but instead use the data-binding variables you have access to when creating a directive. In general (as I understand it) Angular frowns on accessing the DOM in the way you are trying to use it. Instead I'd try something like this:

{

          restrict: 'EAC',

          scope: {

            chartID: "=",

            chartData: "="

          },

          link: function(scope, element, attrs, controller) {

            

            var chart1 = new Highcharts.Chart({
              chart: {

                renderTo: scope.chartID,              

                type: attrs.charttype,
                animation : false,
                height:attrs.chartheight
              },
              xAxis: {categories: scope.chartCategories },

              <REST OF YOUR CODE>
      });    

[Roberto Martínez]

Thanks for the reply Mark.


For the other forum readers,after some emailing, Mark suggested using Compile instead of Link in the directive, which solved the problem.

[z...@caudate.me]

Would it to possible to post up your example on jsFiddle?

[rom...@rigby.me]

I'll second that suggestion. Thanks Roberto!

[Roberto Martínez]

Hi guys.
Finally we changed how the directive works using Link. I don't have all the ocde now to make a Fiddle , but here is the directive.
There are some  parameters coming from the html with "attrs" and others coming from the controller that we access with "scope"

  .directive('hichart', function () {

  return {
    restrict: 'E',
    transclude: true,
    controller: ChartCtrl,

    template: '<div></div>',

    replace: true,
    link: function (scope, element, attrs) {

      else

      {
        var chart1 = new Highcharts.Chart({
          chart: {

            renderTo: attrs.id,
            type: attrs.charttype,
            height: attrs.chartheight,
            animation: false
          },
          xAxis: {
            categories: scope.chartCategories,
            labels: {
              step: scope.chartStep

            }
          },
          yAxis: {
            title: {
              text: ''
            }
          },
          series: [{

            data: scope.chartData,
            name: attrs.chartname
          }]

        });
      }
    }
  };
})