Chart js.

by shruti patil

HTML

<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chart in Modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>

  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-10 col-xs-offset-1 col-md-8 col-md-offset-2">
          <div>
            <a href="#" data-toggle="modal" data-target="#modChart">
                                            <span class="glyphicon glyphicon-signal"></span> Volume Growth
                                        </a>
          </div>

        </div>
      </div>
    </div>

    <div class="modal fade" id="modChart" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                        </button>
            <h4 class="modal-title" id="exampleModalLabel">Linechart</h4>
          </div>
          <div class="modal-body">
            <canvas id="canvas" width="568" height="300"></canvas>
          </div>
        </div>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.1/Chart.min.js"></script>
  </body>

</html>

CSS

body {
  padding-top: 5em
}

JavaScript

$('#modChart').on('shown.bs.modal', function(event) {
  var link = $(event.relatedTarget);
  // get data source
  var source = [65.10, 59.47, 80.00, 81.11, 56.67, 55.45, 40.88, 20.45, 40.98, 80.66, 88.34, 61.01]

  // get title
  var title = link.html();
  // get labels
  var table = link.parents('table');
  var labels = ['Jan.', 'Feb.', 'Mar.', 'April.', 'May.', 'June.', 'Jul.', 'Aug.', 'Sept.', 'Oct.', 'Nov.', 'Dec.', ];

  // get target source
  var target = [65.10, 59.47, 80.00];

  // Chart initialisieren
  var modal = $(this);
  var canvas = modal.find('.modal-body canvas');
  modal.find('.modal-title').html(title);
  var ctx = canvas[0].getContext("2d");
  var chart = new Chart(ctx).Line({
    responsive: true,
    labels: labels,
    datasets: [{
      fillColor: "rgba(151,187,205,0.2)",
      strokeColor: "rgba(151,187,205,1)",
      pointColor: "rgba(151,187,205,1)",
      pointStrokeColor: "#fff",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "rgba(151,187,205,1)",
      data: source
    }, {
      fillColor: "rgba(220,220,220,0.2)",
      strokeColor: "#F7464A",
      pointColor: "#FF5A5E",
      pointStrokeColor: "#FF5A5E",
      pointHighlightFill: "#fff",
      pointHighlightStroke: "red",
      data: target
    }]
  }, {});
}).on('hidden.bs.modal', function(event) {
  // reset canvas size
  var modal = $(this);
  var canvas = modal.find('.modal-body canvas');
  canvas.attr('width', '568px').attr('height', '300px');
  // destroy modal
  $(this).data('bs.modal', null);
});