Column Chart within Bootstrap 3 Resizable Panel (Fullscreen Panel)- CanvasJS JavaScript Charts

Column Chart within Bootstrap 3 Resizable Panel (Fullscreen Panel)- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">CanvasJS Chart</h3>
          <ul class="list-inline panel-actions">
            <li><a href="#" id="panel-fullscreen" role="button" title="Toggle fullscreen"><i class="glyphicon glyphicon-resize-full"></i></a></li>
          </ul>
        </div>
        <div class="panel-body">
          <div id="chartContainer" style="height: 200px; width: 100%;">
          </div>
        </div>
      </div>
    </div>
  </div>

CSS

.panel-actions {
  margin-top: -20px;
  margin-bottom: 0;
  text-align: right;
}

.panel-actions a {
  color: #333;
}

.panel-fullscreen {
  display: block;
  z-index: 9999;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: auto;
}

JavaScript

$("#panel-fullscreen").click(function (e) {
  e.preventDefault();

  var $this = $(this);  

  if ($this.children('i').hasClass('glyphicon-resize-full'))
  {
    $this.children('i').removeClass('glyphicon-resize-full');
    $this.children('i').addClass('glyphicon-resize-small');
  }
  else if ($this.children('i').hasClass('glyphicon-resize-small'))
  {
    $this.children('i').removeClass('glyphicon-resize-small');
    $this.children('i').addClass('glyphicon-resize-full');
  }
  $(this).closest('.panel').toggleClass('panel-fullscreen');

  chart.options.height = $('.panel').outerHeight() - $('.panel-heading').outerHeight() - ($('.panel-body').outerHeight() - $('.panel-body').height());
  chart.render();
});

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
  	text: "Chart within Bootstrap Resizable Panel"
  },
  data: [{
      type: "column",
      dataPoints: [
        { x: 10, y: 71 },
        { x: 20, y: 55 },
        { x: 30, y: 50 },
        { x: 40, y: 65 },
        { x: 50, y: 95 },
        { x: 60, y: 68 },
        { x: 70, y: 28 },
        { x: 80, y: 34 },
        { x: 90, y: 14 }
      ]
    }]
});
chart.render();