CHART DEMON HAY

by tin nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="width: 800px; height: 600px"></div>

JavaScript

$(function() {
  var emeaEm = [
      'EMEA',
      'EMEA', [
        'Kyrgystan',
        'Lebanon',
        'Lithuania',
        'Macedonia',
        'Moldova',
        'Mongolia',
        'Montenegro',
        'Poland',
        'Qatar',
        'Romania',
        'Russia',
        'Saudi Arabia',
        'Slovakia',
        'Syria',
        'Tajikistan',
        'Turkey',
        'Turkmenistan',
        'Ukraine',
        'Unitred Arab Emirates',
        'Uzbekistan',
        'Yemen'
      ]
    ],
    euCn = [
      'EU',
      'Central', [
        'Austria',
        'Belgium',
        'France',
        'Germany'
      ]
    ],
    allCategories = emeaEm[2].concat(euCn[2]),
    calculatePosOfAxis = (100 / allCategories.length) * emeaEm[2].length,
    dataSeriesArray = [],
    ticksForMarket = {},
    ticksForRegion = {};

  ticksForMarket[0] = emeaEm[0];
  ticksForMarket[emeaEm[2].length] = euCn[0];

  ticksForRegion[0] = emeaEm[1];
  ticksForRegion[emeaEm[2].length] = euCn[1];

  for (var i = 0; i < allCategories.length; i++) {
    dataSeriesArray.push(Math.random() * 100);
  }

  $('#container').highcharts({
    chart: {
      type: 'bar',
      marginTop: 30
    },
    title: {
      text: ''
    },
    legend: {
      enabled: false
    },
    credits: {
      enabled: false
    },
    xAxis: [{
      title: {
        text: 'Country',
        align: 'high',
        rotation: 0,
        offset: 0,
        x: 30,
        y: -10
      },
      labels: {
        align: 'left',
        step: 1
      },
      offset: 120,
      lineWidth: 0,
      tickWidth: 0,
      categories: allCategories
    }, {
      labels: {
        align: 'left',
        formatter: function() {
          return ticksForRegion[this.value];
        }
      },
      title: {
        text: 'Region',
        align: 'high',
        rotation: 0,
        offset: 0,
        x: 22,
        y: -10
      },
      linkedTo: 0,
      offset: 220,
      lineWidth: 0,
      tickWidth: 0
    }, {
    ...