getting data from another function to display highcharts in angular

Question

I am trying to display highcharts in my angular application Below is my get_chart function which takes data from another function

function get_chart(data) {
    alert('hello..' + data);

        return {
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
            chart: {
                height: 300,
                width: 500,
                type: 'column'
            },
            credits: {
                enabled: false
            },
            plotOptions: {
                series: {
                    cursor: 'pointer',
                    point: {
                        events: {
                            click: function() {
                                console.log ('Category: '+ this.category +', value: '+ this.y);
                            }
                        }
                    }
                }
            },

            series: [{
                data:  [ data ] 
            }]
        };
    }

Then I am trying to send data from

$scope.renderChart = function(measurement){
        $scope.showChart = false;

        restApp.getMeasurementForCompID(comp.id, measurement.id).then(function(data){
            console.log('getMeasurementForCompID data ');
            console.log(data);
            data = [10, 20];

            $scope.example_chart = get_chart(data);
            console.log($scope.example_chart);

            $scope.showChart = true;
        });

    }

HTML

<div>
    <highchart id="dash-chart" chart='example_chart'></highchart>
    </div>

Highcharts directive

myapp.directive('highchart', function () {
return {
    restrict: 'E',
    template: '<div></div>',
    replace: true,

    link: function (scope, element, attrs) {

        scope.$watch(function() { return attrs.chart; }, function() {

            if(!attrs.chart) return;

            var chart = scope.example_chart;

            console.log('loading chart');
            console.log(chart);
            element.highcharts(chart);

        });

    }
}
});

console

enter image description here

But I am unable to display the charts with values 10,20. What might be the problem here?

Thanks

Where do you initalize chart? Something like new Highcharts.Chart() or $("container").highcharts()? — Paweł Fus
– Paweł Fus, Commented Aug 7, 2014 at 11:45
yes am using highcharts for first time, please see my updated question i wrote a directive for highcharts — vamsi
– vamsi, Commented Aug 7, 2014 at 11:53
And what is your chart displaying? Try to change: data: [ data ] to data: data. — Paweł Fus
– Paweł Fus, Commented Aug 7, 2014 at 12:05
And do you have any errors in console? Do you see 'loading chart' in console? — Paweł Fus
– Paweł Fus, Commented Aug 7, 2014 at 12:11

vamsi · Accepted Answer · 2014-08-07 13:54:06Z

1

I have solved my problem by doing following

<div>
<highchart ng-if="showChart" id="dash-chart" chart='example_chart'></highchart>
</div>

Thank you

answered Aug 7, 2014 at 13:54

vamsi

1,5863 gold badges38 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

getting data from another function to display highcharts in angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related