Skip to content

Instantly share code, notes, and snippets.

@theWhiteFox

theWhiteFox/chart-js-in-bootstrap-modal.markdown

Created May 4, 2017 10:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save theWhiteFox/6dbe0f50a858a69db320d8e9d3c0539d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save theWhiteFox/6dbe0f50a858a69db320d8e9d3c0539d to your computer and use it in GitHub Desktop.
Download ZIP
Chart.js in bootstrap modal
Raw
chart-js-in-bootstrap-modal.markdown

Chart.js in bootstrap modal

Load a line chart from chart.js in a bootstrap modal. The chart data came from link attribute.

A Pen by Michael Topp on CodePen.

License.

Raw
index.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 class="table-responsive">
<table id="business_ratio" class="table table-condensed table-bordered table-striped table-hover table-charts">
<thead>
<tr>
<th>Business ratio</th>
<th class="text-center">Jan.</th>
<th class="text-center">Feb.</th>
<th class="text-center">Mar.</th>
<th class="text-center">Apr.</th>
<th class="text-center">May</th>
<th class="text-center">June</th>
<th class="text-center">July</th>
<th class="text-center">Aug.</th>
<th class="text-center">Sept.</th>
<th class="text-center">Oct.</th>
<th class="text-center">Nov.</th>
<th class="text-center">Dec.</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a href="#" data-toggle="modal" data-target="#modChart" data-source="65.1,59.47,80.00,81.11,56.67,55.45,40.88,20.45,40.98,80.66,88.34,61.01" data-target-source="50">
<span class="glyphicon glyphicon-signal"></span> Example
</a>
</td>
<td class="text-right">65.10</td>
<td class="text-right">59.47</td>
<td class="text-right">80.00</td>
<td class="text-right">81.11</td>
<td class="text-right">56.67</td>
<td class="text-right">55.45</td>
<td class="text-right">40.88</td>
<td class="text-right">20.45</td>
<td class="text-right">40.98</td>
<td class="text-right">80.66</td>
<td class="text-right">88.34</td>
<td class="text-right">61.01</td>
</tr>
<tr>
<td>
<a href="#" data-toggle="modal" data-target="#modChart" data-source="70,13,20,90,44,12,30,30,30,10,5,0" data-target-source="34">
<span class="glyphicon glyphicon-signal"></span> Foobar
</a>
</td>
<td class="text-right">70</td>
<td class="text-right">13</td>
<td class="text-right">20</td>
<td class="text-right">90</td>
<td class="text-right">44</td>
<td class="text-right">12</td>
<td class="text-right">30</td>
<td class="text-right">30</td>
<td class="text-right">30</td>
<td class="text-right">10</td>
<td class="text-right">5</td>
<td class="text-right">0</td>
</tr>
</tbody>
</table>
</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>
Raw
script.js
$('#modChart').on('shown.bs.modal',function(event){
var link = $(event.relatedTarget);
// get data source
var source = link.attr('data-source').split(',');
// get title
var title = link.html();
// get labels
var table = link.parents('table');
var labels = [];
$('#'+table.attr('id')+'>thead>tr>th').each(function(index,value){
// without first column
if(index>0){labels.push($(value).html());}
});
// get target source
var target = [];
$.each(labels, function(index,value){
target.push(link.attr('data-target-source'));
});
// 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);
});
Raw
style.css
body{padding-top:5em}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment