It appears that I can't place a Pie Chart made with Chart.js in a Modal Window as the modal window most likely have display: nonein its properties.
But I don't really know how to get around this issue. I am generating a Pie Chart in a Modal Window and when I try to call my JavaScript that makes the chart, I get the error:
Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.
From what I can read this is caused by having display: none in the CSS. Which I am sure the Modal does. A solution to this might be to use AngularJS $timeout function. But I have no desire to utilize the entire AngularJS library for just that one function.
So is it possible to perhaps do this in another way? I have tested my code on a separate page before I wanted to move it to the modal. It works just fine:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/moment-2.10.6.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/test/chart-test.js"></script>
</head>
<body>
<div class="pie-chart-container">
<div class="container">
<div class="row">
<div class="col-sm-4">
<canvas id="pie-chart" width="250" height="250"></canvas>
</div>
<div class="col-sm-4">
<table class="table" id="current-data-table">
<thead style="background-color: #f0ad4e; color: #FFF;">
<tr>
<th>Name</th>
<th>Value</th>
<th>%</th>
</tr>
</thead>
<tbody id="pie-chart-legend-tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
I generate the Chart this way:
$(document).ready(function () {
var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: false,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeInOutExpo",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
$.getJSON("http://localhost:52535/PUendeligService.svc/GetStatusOverview", function (data) {
var object = $.parseJSON(data);
var parsedData = [];
$.each(object, function (index, element) {
var value = element["Value"];
var color = element["Color"];
var highLight = element["HighlightColor"];
var label = element["Label"];
parsedData.push(
{
value: value,
color: color,
highlight: highLight,
label: label
}
);
});
var ctx = $('#pie-chart').get(0).getContext('2d');
var myPieChart = new Chart(ctx).Pie(parsedData, options);
var myPieChartLegend = $('#pie-chart-legend-tbody');
var tBodyContent = '';
var valueTotal = 0;
$.each(parsedData, function (index) {
var value = parsedData[index]["value"];
valueTotal += value;
});
$.each(parsedData, function (index) {
var value = parsedData[index]["value"];
var color = parsedData[index]["color"];
var label = parsedData[index]["label"];
var element =
'<tr>' +
'<td>' +
'<span class="fa fa-square" style="color:' + color + '"></span>\t' + label +
'</td>' +
'<td>' +
value +
'</td>' +
'<td>' +
((value / valueTotal) * 100).toFixed(2) +
'</td>' +
'</tr>';
tBodyContent += element;
});
tBodyContent +=
'<tr>' +
'<td>Total</td>' +
'<td>' + valueTotal + '</td>' +
'<td>' + 100 + '</td>' +
'</tr>';
myPieChartLegend.html(tBodyContent);
});
});
And it produces this:
So it just doesn't work in modals:
<div id="statistics-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1>Statistical Overview</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<canvas id="pie-chart" width="250" height="250"></canvas>
</div>
<div class="col-sm-4">
<table class="table" id="pie-data-table">
<thead style="background-color: #f0ad4e; color: #FFF;">
<tr>
<th>Name</th>
<th>Value</th>
<th>%</th>
</tr>
</thead>
<tbody id="pie-chart-legend-tbody"></tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
It appears that I can't place a Pie Chart made with Chart.js in a Modal Window as the modal window most likely have display: nonein its properties.
But I don't really know how to get around this issue. I am generating a Pie Chart in a Modal Window and when I try to call my JavaScript that makes the chart, I get the error:
Uncaught IndexSizeError: Failed to execute 'arc' on 'CanvasRenderingContext2D': The radius provided (-0.5) is negative.
From what I can read this is caused by having display: none in the CSS. Which I am sure the Modal does. A solution to this might be to use AngularJS $timeout function. But I have no desire to utilize the entire AngularJS library for just that one function.
So is it possible to perhaps do this in another way? I have tested my code on a separate page before I wanted to move it to the modal. It works just fine:
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/moment-2.10.6.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/Chart.min.js"></script>
<script src="js/test/chart-test.js"></script>
</head>
<body>
<div class="pie-chart-container">
<div class="container">
<div class="row">
<div class="col-sm-4">
<canvas id="pie-chart" width="250" height="250"></canvas>
</div>
<div class="col-sm-4">
<table class="table" id="current-data-table">
<thead style="background-color: #f0ad4e; color: #FFF;">
<tr>
<th>Name</th>
<th>Value</th>
<th>%</th>
</tr>
</thead>
<tbody id="pie-chart-legend-tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
I generate the Chart this way:
$(document).ready(function () {
var options = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: false,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: "easeInOutExpo",
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: true,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
};
$.getJSON("http://localhost:52535/PUendeligService.svc/GetStatusOverview", function (data) {
var object = $.parseJSON(data);
var parsedData = [];
$.each(object, function (index, element) {
var value = element["Value"];
var color = element["Color"];
var highLight = element["HighlightColor"];
var label = element["Label"];
parsedData.push(
{
value: value,
color: color,
highlight: highLight,
label: label
}
);
});
var ctx = $('#pie-chart').get(0).getContext('2d');
var myPieChart = new Chart(ctx).Pie(parsedData, options);
var myPieChartLegend = $('#pie-chart-legend-tbody');
var tBodyContent = '';
var valueTotal = 0;
$.each(parsedData, function (index) {
var value = parsedData[index]["value"];
valueTotal += value;
});
$.each(parsedData, function (index) {
var value = parsedData[index]["value"];
var color = parsedData[index]["color"];
var label = parsedData[index]["label"];
var element =
'<tr>' +
'<td>' +
'<span class="fa fa-square" style="color:' + color + '"></span>\t' + label +
'</td>' +
'<td>' +
value +
'</td>' +
'<td>' +
((value / valueTotal) * 100).toFixed(2) +
'</td>' +
'</tr>';
tBodyContent += element;
});
tBodyContent +=
'<tr>' +
'<td>Total</td>' +
'<td>' + valueTotal + '</td>' +
'<td>' + 100 + '</td>' +
'</tr>';
myPieChartLegend.html(tBodyContent);
});
});
And it produces this:
So it just doesn't work in modals:
<div id="statistics-modal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h1>Statistical Overview</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<canvas id="pie-chart" width="250" height="250"></canvas>
</div>
<div class="col-sm-4">
<table class="table" id="pie-data-table">
<thead style="background-color: #f0ad4e; color: #FFF;">
<tr>
<th>Name</th>
<th>Value</th>
<th>%</th>
</tr>
</thead>
<tbody id="pie-chart-legend-tbody"></tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger btn-bg" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
1 Answer
Reset to default 5Initialize the chart after the modal is loaded. You could do this in the shown.bs.modal handler
$('#myModal').on('shown.bs.modal', function (e) {
// do something...
})