No data to display in directive

[Uxspy]

Hi, I wrapped the in my directive, but it said "no data to display", however, if I use it in my page directly, with the same datasource configuration, it works.

[ayanonly1]

Can you please share a live fiddle sample for this?

[Uxspy]

Sorry, the POC has been removed, I'll create a new one to see if I can reproduce, if I can reproduce then I'll send a fiddle. Thanks!

[aspersieman]

I am also experiencing this same problem. I am unsure of how to set this all up on jsfiddle, so I will just describe it here instead. Note that my chart works perfectly when used as normal, i.e. not in a directive, but with a data source defined in a controller and displayed in a template.

I have the following directive definition:

    appName.directive('myDirective', function() {
        return {
            restrict: 'AE',
            scope: {},
            templateUrl: '/path/to/template/template-name.html',
            link: function(scope, iElement, iAttrs) {
                scope.data = {
                    chart: {
                        caption: 'Harry\'s SuperMart',
                        subCaption: 'Top 5 stores in last month by revenue',
                        numberPrefix: '$',
                        theme: 'zune'
                    },
                    data: [{
                        label: 'Bakersfield Central',
                        value: '880000'
                    }, {
                        label: 'Garden Groove harbour',
                        value: '730000'
                    }, {
                        label: 'Los Angeles Topanga',
                        value: '590000'
                    }, {
                        label: 'Compton-Rancho Dom',
                        value: '520000'
                    }, {
                        label: 'Daly City Serramonte',
                        value: '330000'
                    }]
                };
            }
        };
    });

And in my template-name.html file:

<fusioncharts
    width="100%"
    height="400"
    type="column3d"
    dataSource="{{data}}"
</fusioncharts>

I all seems correct yet when I try to view the chart it just says "No data to display".

[martijngr]

I have the exact same problem. Is there already a solution?

[adotg]

@martijngr should not be an issue. Do you have any live sample (jsfiddle, codepen etct)?

[duahaudo]

I have the same problem, fusioncharts show error 'No data to display.' when wrap it in directive. Does anyone has any solutions?

[seanmavley]

Similar question here with solution that might work (Worked for me): http://stackoverflow.com/a/32942668/1757321

I used a service to load the data files, so this is how I did it: http://stackoverflow.com/a/36923742/1757321

[pramitkundu92]

write all your code inside the controller for the directive instead of the link function, and everything works like a charm :)

[ashok1994]

I have provided the code which achieves exactly what you want , https://jsfiddle.net/ashok1994/3rh2setc/

Closing for now, please reopen if any problem persists