_column_stacked_and_grouped.html.haml

:javascript
  var chart;
  $(function() {
      chart = new Highcharts.Chart({

          chart: {
              renderTo: 'container',
              defaultSeriesType: 'column'
          },

          title: {
              text: 'Total fruit consumtion, grouped by gender'
          },

          xAxis: {
              categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
          },

          yAxis: {
              allowDecimals: false,
              min: 0,
              title: {
                  text: 'Number of fruits'
              }
          },

          tooltip: {
              formatter: function() {
                  return ''+ this.x +''+
                       this.series.name +': '+ this.y +''+
                       'Total: '+ this.point.stackTotal;
              }
          },

          plotOptions: {
              column: {
                  stacking: 'normal'
              }
          },

          series: [{
              name: 'John',
              data: [5, 3, 4, 7, 2],
              stack: 'male'
          }, {
              name: 'Joe',
              data: [3, 4, 4, 2, 5],
              stack: 'male'
          }, {
              name: 'Jane',
              data: [2, 5, 6, 2, 1],
              stack: 'female'
          }, {
              name: 'Janet',
              data: [3, 0, 4, 4, 3],
              stack: 'female'
          }]
      });
  });

-@title = "#{t('txt.graphics.highcharts.name')} - #{t('txt.graphics.highcharts.bar.name')} - #{t('txt.graphics.highcharts.column.stacked_and_grouped')}"

%h4
  =image_tag("icons/22x22/highcharts.png", :border => 0)
  =@title

#container{:style => "width: 800px; height: 400px; margin: 0 auto"}