Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="graphModal" class="graph-modal">
  <button type="button" class="modal-cls-btn" onclick="closeGraphModal()">
    close
  </button>
  <div id="graphModalBox" class="graph-modal-box">TEST</div>
</div>

<!-- Graph 1 -->
<div class="graph-box">
  console.log("THIS")
  <!-- Graph 1 header-->
  <div class="graph-box-header-button-container">
    <button type="button" id="graph-box-exp-btn" class="graph-btn" onclick="expandGraphModal(this)">
      button
    </button>
  </div>
  <div class="canvasjs-container">
    <div id="Graph1" class="canvasjs-chart"></div>
  </div>
</div>

CSS

.graph-modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  min-width: 100%;
  max-height: 100%;
  height: 100%;
  /* Required for graph-modal-box height */
  background-color: rgba(0, 0, 0, 0.4);
}

.graph-modal-box {
  display: block;
  position: relative;
  margin: 5% auto;
  background: #fff;
  box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
  /*min-height: 700px;
  max-height: 700px;*/
  min-height: 80%;
  max-height: 80%;
  min-width: 80%;
  max-width: 80%;
}

.modal-cls-btn {
  background-color: #414042;
  border: 0;
  float: right;
  margin: 10px;
}

.graph-box {
  /*position: relative;*/
  background: #fff;
  box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
  margin: 0.3em;
  vertical-align: top;
  min-height: 200px;
  max-height: 220px;
  min-width: 20%;
}

.graph-box-header-button-container {
  max-width: 25%;
  min-height: 20%;
}

.graph-btn {
  background-color: #414042;
  color: #fff;
  border: 0;
  cursor: pointer;
}

.canvasjs-container {
  width: 100%;
  height: 80%;
}

.canvasjs-chart {
  width: 100%;
  height: 100%;
}

JavaScript

// ------------Dvalues graph----------------------//
var chart1 = new CanvasJS.Chart("Graph1", {
  data: [{
    type: "area",
    dataPoints: [{
      x: 1,
      y: 1
    }, {
      x: 2,
      y: 2
    }]
  }],
});
chart1.render();

// ------------Graph Modal----------------------//
function expandGraphModal(elem) {
	console.log("THIS2")
  // Get the modal
  var graphModal = document.getElementById('graphModal');
  // get ancestor div
  var btnAnsestor = elem.closest(".graph-box");
  // Clone header and chart
  var modalGraph = btnAnsestor.getElementsByClassName("canvasjs-container")[0];

  // clone ancestor div and place in modal
  $("#graphModalBox").append($(modalGraph).clone(true, true));

  // // Render the graph
  chart1.render();
  graphModal.style.display = "block";
}

function closeGraphModal() {
  graphModal.style.display = "none";
  $("#graphModalBox").html("");
}