AnyChart Sample with DrillDown HTML Button

AnyChart Sample with DrillDown HTML Button

HTML

<script src="http://static.anychart.com/js/develop/anychart-bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>AnyChart Drilldown Chart with HTML Button</title>
<script src="http://cdn.anychart.com/js/7.14.3/anychart-bundle.min.js"></script>
<link rel="stylesheet" href="http://cdn.anychart.com/css/7.14.3/anychart-ui.min.css" />
<div id="back" class="backButton">Back to Years</div>
<div id="container"></div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.backButton {
    display: none;
    cursor: pointer;
    background: #7bc0f7;
    border: 1px solid #64b5f6;
    color: #fff;
    padding: 10px;
    position: absolute;
    top: 15px;
    right: 20px;
    z-index: 100;
}

JavaScript

// AnyChart Sample with DrillDown HTML Button
anychart.onDocumentReady(function () {
  var data = [
    {"x": 2015, "value": 2195081, "drillDown": [
      {"x": "Q1", "value": 792026},
      {"x": "Q2", "value": 610501},
      {"x": "Q3", "value": 441843},
      {"x": "Q4", "value": 350711}
    ]},
    {"x": 2016, "value": 3257447, "drillDown": [
      {"x": "Q1", "value": 1378786},
      {"x": "Q2", "value": 571063},
      {"x": "Q3", "value": 510493},
      {"x": "Q4", "value": 797105}
    ]},
    {"x": 2017, "value": 1963407, "drillDown": [
      {"x": "Q1", "value": 499299},
      {"x": "Q2", "value": 649963},
      {"x": "Q3", "value": 571176},
      {"x": "Q4", "value": 242969}
    ]}
  ];

  // create column chart
  var chart = anychart.column(data);

  // configure axis labels
  chart.yAxis().labels().format('${%Value}{scale:(1000)(1000)|(k)(m)}');
  // tune tooltips format
  chart.tooltip().format('${%Value}');
  // tune interactivity selection mode
  chart.interactivity().selectionMode('none');

  // configire drilldown on point click
  chart.listen('pointClick', function (e) {
      if (e.point.get('drillDown')) {
            chart.getSeries(0).data(e.point.get('drillDown'));
		        document.getElementById("back").style.display = 'block';        
      }
  });

  // load initial data on click
  document.getElementById("back").onclick = function () {
    document.getElementById("back").style.display = 'none';
    chart.getSeries(0).data(data);
  };  

  // set container id and display chart
  chart.container('container').draw();
});