small multiples

by mohdali

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
Small Multiples 3
<div ng-controller="chartDemoController">

  <div ng-repeat="chart in lotsOfCharts track by $index" style="display:inline-block;width:33%;">

    <div id={{chart.chartId}} style="width:100%;height:300px;margin:5px;display:inline-block">
    </div>
  </div>

 </div>
</div>

JavaScript

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

chartDemoApp.controller('chartDemoController', function($scope, $timeout) {
  $scope.lotsOfCharts = [];

  Highcharts.setOptions({
    chart: {
      defaultSeriesType: 'column',
      inverted: false,
      borderWidth: 0
    },
    credits: {
      enabled: false
    },
    exporting: {
      enabled: false
    },
    title: {
      text: ''
    },
    tooltip: {
      enabled: false
    },
    legend: {
      enabled: false
    },
 
    xAxis: {
      categories: ['Product A', 'Product B', 'Product C', 'Product D'],
      lineWidth: 0,
      tickWidth: 0,
      labels: {
      }
    },
    yAxis: {
      title: {
        text: ''
      },
      
      labels: {
      }
    },
    plotOptions: {
      bar: {
        dataLabels: {
          enabled: true
        }
      }
    },
  });

  for (var i = 0; i < 3; i++) {
    $scope.lotsOfCharts.push({
      chartId: 'chart' + i
    });
  };
  $timeout(function (){
    for (var i = 0; i < 3; i++) {
        new Highcharts.Chart({
        chart: {
          renderTo: 'chart'+i,
          defaultSeriesType: 'column'
        },
        title : {
        	text: 'Plant '+ (i+1),
          verticalAlign: 'bottom',
          margin: 20
        },
        legend: {
      		enabled: i == 2,
          floating: true,
          verticalAlign: 'top',
          align: 'right',
          y: 15
    		},
        yAxis: {
        	max : 120,
        	labels: {
          	enabled: i ==0
          }
        },
        series: [{
        	name: 'Production',
          data: [Math.random() * 100, Math.random() * 100, Math.random() * 100, Math.random() * 100]
        },
        {
        	name: 'Consumption',
          data: [Math.random() * 50, Math.random() * 50, Math.random() * 50, Math.random() * 50]
        }]
        });
    };
  }, 100);
});