Adding Multiple HighCharts on one screen Angularjs

Question

I am new to HighCharts and I am trying add two Highcharts on the same p[age that are accessing the same data source but only taking certain pieces of for each graph. So for example the categories will remain the same however the series[] will change

function get_chart() {
    var options =   {
        chart: {
            type: 'column',
            renderTo:'container'
        },
        title: {
            text: 'Twitter Data'
        },
        xAxis: {
            categories: []
        },

        plotOptions: {
            series: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }, point: {
                       events: {
                           click: function () {
                               alert('Category: ' + this.category + ', value: ' + this.y);
                           }
                       }
                   }
               }

            },

        series: []

    };
    $.getJSON("data.json", function(json) {
        options.xAxis.categories = json[0]['data'];
        options.series[0] = json[1];
        options.series[1] = json[2];
        chart = new Highcharts.Chart(options);
    });
}
get_chart();

var app = angular.module('charts', []);

app.directive('highchart', [function () {
    return {
        restrict: 'E',
        template: '<div></div>',
        replace: true,
        link: function (scope, element, attrs) {

            scope.$watch(attrs.chart, function () {

                if (!attrs.chart) return;

                var chart = scope.$eval(attrs.chart);

                angular.element(element).highcharts(chart);
            });

        }
    }
}]);

function Ctrl($scope) {
    $scope.example_chart = get_chart();
}

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>AngularJS + Highcarts </title>
    </head>
    <body>

        <section ng-app='charts'>
            <div ng-controller="Ctrl">
                <highchart chart='example_chart'></highchart>
            </div>
        </section>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
        <script src="http://code.highcharts.com/highcharts.js"></script>
        <script type="text/javascript" src="js/highChartStyle.js"></script>
        <script type="text/javascript" src="js/highChartAngular.js"></script>
    </body>
</html>

Nishith Kant Chaturvedi · Answer 1 · 2015-10-06T16:11:05.717

0

Update See this woking Plunker

Because you are calling multiple highchart on same div. Id is unique in html and you can't define two div with same id.

pass div id in your function or call highcharts on classname like below:

get_chart(divParam)

and in chart object

chart: {
            type: 'column',
            renderTo:'divParam'
        }

edited Oct 06 '15 at 16:11

answered Oct 06 '15 at 15:33

Nishith Kant Chaturvedi

4,719
2
16
24

lets say I wanted to duplicate the current example how would I implement that into the code? – user2402107 Oct 06 '15 at 15:35
If you want as it is series (mean same series at two place) call $.each(".classNameofDiv) , I will add a fiddle with example – Nishith Kant Chaturvedi Oct 06 '15 at 15:37
let me know one more thing, Is your same call returning two dataset for two series? if yes, call the function in success of your call. I also created number of highchart graphs(including bar,column,line,pie,multiple y axis stacked etc) in my AngularJS app. if directive is not must, you can simply create charts – Nishith Kant Chaturvedi Oct 06 '15 at 16:29
I am pretty much taking each data set and creating a single stacked chart, then the next 4-5 charts will be single bar charts representing the data individually. – user2402107 Oct 06 '15 at 17:07
How would I changed this to a grouped chart, and create a single stacked with all data, then 4-5 individual bar charts to break each data group set down. – user2402107 Oct 06 '15 at 17:08
you need drilldown chart, see this withAngularJS http://stackoverflow.com/questions/32650447/highcharts-with-angularjs-drilled-down-does-not-work/32651657#32651657 and see my fiddle here http://jsfiddle.net/Nishith/uqpgnf8y/5/ – Nishith Kant Chaturvedi Oct 06 '15 at 17:28

Adding Multiple HighCharts on one screen Angularjs

1 Answers1