document.addEventListener("DOMContentLoaded", function(event) {
  var main_channel_names = ['general','random'],
      main_member_numbers = [],
      main_message_numbers = [],
      other_channel_names = [],
      other_member_numbers = [],
      other_message_numbers = [];
  for(var i = 0; i < stats.channels.length; i++){
    if(stats.channels[i].name == "general") {
      main_member_numbers[0] = stats.channels[i].member_count;
      main_message_numbers[0] = stats.channels[i].message_count;
    } else if(stats.channels[i].name == "random") {
      main_member_numbers[1] = stats.channels[i].member_count;
      main_message_numbers[1] = stats.channels[i].message_count;
    } else {
      other_channel_names.push(stats.channels[i].name);
      other_member_numbers.push(stats.channels[i].member_count);
      other_message_numbers.push(stats.channels[i].message_count);
    }
  }
  
  var mainChart = new Highcharts.Chart({
    chart: {
      renderTo: 'mainStatsBarChart',
      type: 'column'
    },

    title: {
      text: 'Main Channels'
    },

    yAxis: [{
      min: 0,
      title: { text: 'Messages' }
    },{
      min: 0,
      title: { text: 'Members' },
      opposite: true
    }],

    plotOptions: {
      column: {
        grouping: false,
        shadow: false,
        borderWidth: 0
      }
    },

    xAxis: {
      categories: main_channel_names
    },

    series: [{
      name: 'Messages',
      color: 'rgba(126,86,134,0.9)',
      data: main_message_numbers,
      pointPadding: 0.3
    },{
      name: 'Members',
      color: 'rgba(165,170,217,1)',
      data: main_member_numbers,
      pointPadding: 0.4,
      yAxis: 1
    }]
  });

  var otherChart = new Highcharts.Chart({
    chart: {
      renderTo: 'statsBarChart',
      type: 'column'
    },

    title: {
      text: 'Other Channels'
    },

    yAxis: [{
      min: 0,
      title: { text: 'Members' }
    },{
      min: 0,
      title: { text: 'Messages' },
      opposite: true
    }],

    tooltip: { shared: true },

    plotOptions: {
      column: {
        grouping: false,
        shadow: false,
        borderWidth: 0
      }
    },

    xAxis: {
      categories: other_channel_names
    },

    series: [{
      name: 'Messages',
      color: 'rgba(126,86,134,0.9)',
      data: other_message_numbers,
      pointPadding: 0.3
    },{
      name: 'Members',
      color: 'rgba(165,170,217,1)',
      data: other_member_numbers,
      pointPadding: 0.4,
      yAxis: 1
    }]
  });
});