Creating A Multi Series Bar Chart With Different Number of Series For Each Item - Javascript highcharts

Javascript examples for highcharts:Bar Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Bar Chart

Description

Creating A Multi Series Bar Chart With Different Number of Series For Each Item

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Grouped categories demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="http://blacklabel.github.io/grouped_categories/grouped-categories.js"></script> 
      <script type="text/javascript">
$(function() {//  w  w w .j a va  2  s. c o  m
  var mockData = [{
    name: 'Southwest',
    partners: ['A1', 'B2', 'C3', 'D4', 'E5'],
    data: [23, 42, 67, 53]
  }, {
    name: 'Delta',
    partners: ['F6', 'G7'],
    data: [55, 32]
  }, {
    name: 'American Airlines',
    partners: ['H8', 'I9', 'J10', 'K11', 'L12', 'M13'],
    data: [7, 25, 14, 78, 31, 55]
  }, {
    name: 'China Air',
    partners: ['N14', 'O15', 'P16', 'Q17', 'R18'],
    data: [1, 65, 35, 46, 74]
  }, {
    name: 'Air Mexico',
    partners: ['S19', 'T20', 'U21', 'V22', 'W23', 'X24', 'Y25', 'Z26', 'AA27', 'AB28', 'AC29', 'AD30'],
    data: [87, 24, 76, 5, 57, 67, 43, 47, 56, 19, 20, 32]
  }];
  var categories = [],
    seriesData = [];
  $.each(mockData, function(i, item) {
    categories.push({
      name: item.name,
      categories: item.partners
    });
    seriesData = seriesData.concat(item.data);
    categories.push({
      name: item.name,
      categories: item.partners
    });
    seriesData = seriesData.concat(item.data);
    categories.push({
      name: item.name,
      categories: item.partners
    });
    seriesData = seriesData.concat(item.data);
    categories.push({
      name: item.name,
      categories: item.partners
    });
    seriesData = seriesData.concat(item.data);
  });
  console.log(seriesData, categories)
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: "container",
      type: "bar"
    },
    legend: {
       enabled: false
    },
    series: [{
      data: seriesData
    }],
    xAxis: {
      categories: categories,
      labels: {
         x: -4
      }
    }
  });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 700px"></div>  
   </body>
</html>

Related Tutorials