title: Adding Multiple HighCharts on one screen Angularjs
body: <p>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</p>
  
  <pre><code>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: '&lt;div&gt;&lt;/div&gt;',
          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();
  }
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;AngularJS + Highcarts &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;section ng-app='charts'&gt;
              &lt;div ng-controller="Ctrl"&gt;
                  &lt;highchart chart='example_chart'&gt;&lt;/highchart&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"&gt;&lt;/script&gt;
          &lt;script src="http://code.highcharts.com/highcharts.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/highChartStyle.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="js/highChartAngular.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>