Highcharts Demo

author(s): Torstein Hønsi

by AbhishekRohan

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

function formatNumberY(n, currency) {
				var ranges = [{
					divider : 1e18,
					suffix : 'P'
				}, {
					divider : 1e15,
					suffix : 'E'
				}, {
					divider : 1e12,
					suffix : 'T'
				}, {
					divider : 1e9,
					suffix : 'B'
				}, {
					divider : 1e6,
					suffix : 'M'
				}, {
					divider : 1e3,
					suffix : 'K'
				}];
				for (var i = 0; i < ranges.length; i++) {
					if (n >= ranges[i].divider) {
						if (n < 1000000) {
							return currency + (n / ranges[i].divider).toFixed(0) + ranges[i].suffix;
						} else {
							return currency + (n / ranges[i].divider).toFixed(0) + ranges[i].suffix;
						}
					}
				}
				return currency + n.toString();
			}
var xRawData=['18Q1', '18Q2', '18Q3','18Q4','19Q1','19Q2'];			
var yRawData=[ 
{
    "name": "SERVICES",
    "data": [
      {
        "name": "18Q1",
        "id": "SERVICES",
        "y": 10992067,
        "drilldown": true
      },
      {
        "name": "18Q2",
        "id": "SERVICES",
        "y": 21160081,
        "drilldown": true
      },
      {
        "name": "18Q3",
        "id": "SERVICES",
        "y": 18691797,
        "drilldown": true
      },
      {
        "name": "18Q4",
        "id": "SERVICES",
        "y": 34377234,
        "drilldown": true
      },
      {
        "name": "19Q1",
        "id": "SERVICES",
        "y": 12170572,
        "drilldown": true
      },
      {
        "name": "19Q2",
        "id": "SERVICES",
        "y": 24060464,
        "drilldown": true
      },
      {
        "name": "19Q3",
        "id": "SERVICES",
        "y": 5855470,
        "drilldown": true
      }
    ]
  },
  {
    "name": "SDDC",
    "data": [
      {
        "name": "18Q1",
        "id": "SDDC",
        "y": 1316632090,
        "drilldown": true
      },
      {
        "name": "18Q2",
        "id": "SDDC",
        "y": 1707246005,
        "drilldown": true
      },
      {
        "name": "18Q3",
        "id": "SDDC",
        "y": 1668388450,
        "drilldown": true
 ...