0
I’m putting together a page with a link that opens a modal. In this modal I want you to open a pie Chart, but the modal opens in white and only after I refresh the page with the modal open does the pie Chart appear. Detail: I am using bootstrap, Adminlte to make the Chart pie and a plugin called remodal for modal.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>AdminLTE 2 | Inline Charts</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<link rel="stylesheet" href="dist/remodal.css">
<link rel="stylesheet" href="dist/remodal-default-theme.css">
</head>
<style>
.remodal-bg.with-red-theme.remodal-is-opening,
.remodal-bg.with-red-theme.remodal-is-opened {
filter: none;
}
.remodal-overlay.with-red-theme {
background-color: #c0c0c0;
}
.remodal.with-red-theme {
background: #fff;
}
</style>
<body>
<a href="#modal2">Modal №1</a>
<div data-remodal-id="modal2" role="dialog">
<br>
<div style="height:250px;width:250px">
<canvas id="pieChart"></canvas>
</div><!-- /.box-body -->
<!-- jQuery 2.1.4 -->
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<!-- Bootstrap 3.3.5 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- ChartJS 1.0.1 -->
<script src="plugins/chartjs/Chart.min.js"></script>
<!-- FastClick -->
<script src="plugins/fastclick/fastclick.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- page script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/remodal.js"></script>
<!-- Eventos -->
<script>
// Usage:
// $(function() {
//
// // In this case the initialization function returns the already created instance
// var inst = $('[data-remodal-id=modal]').remodal();
//
// inst.open();
// inst.close();
// inst.getState();
// inst.destroy();
// });
// The second way to initialize:
$('[data-remodal-id=modal2]').remodal({
modifier: 'with-red-theme'
});//----FIM-----//
//-------------CONFIGURAÇÕES DO GRÁFICO----------
//- PIE CHART -
//-------------
// Get context with jQuery - using jQuery's .get() method.
var pieChartCanvas = $("#pieChart").get(0).getContext("2d");
var pieChart = new Chart(pieChartCanvas);
var PieData = [
{
value: 700,
color: "#f56954",
highlight: "#f56954",
label: "Chrome"
},
{
value: 500,
color: "#00a65a",
highlight: "#00a65a",
label: "IE"
},
{
value: 400,
color: "#f39c12",
highlight: "#f39c12",
label: "FireFox"
},
{
value: 600,
color: "#00c0ef",
highlight: "#00c0ef",
label: "Safari"
},
{
value: 300,
color: "#3c8dbc",
highlight: "#3c8dbc",
label: "Opera"
},
{
value: 100,
color: "#d2d6de",
highlight: "#d2d6de",
label: "Navigator"
}
];
var pieOptions = {
//Boolean - Whether we should show a stroke on each segment
segmentShowStroke: true,
//String - The colour of each segment stroke
segmentStrokeColor: "#fff",
//Number - The width of each segment stroke
segmentStrokeWidth: 2,
//Number - The percentage of the chart that we cut out of the middle
percentageInnerCutout: 50, // This is 0 for Pie charts
//Number - Amount of animation steps
animationSteps: 100,
//String - Animation easing effect
animationEasing: false,
//Boolean - Whether we animate the rotation of the Doughnut
animateRotate: false,
//Boolean - Whether we animate scaling the Doughnut from the centre
animateScale: false,
//Boolean - whether to make the chart responsive to window resizing
responsive: true,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: 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>"
};
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
pieChart.Doughnut(PieData, pieOptions);
//---FIM---//
</script>
</div>
</body>
</html>
I had a similar problem using Chartjs and Angularjs. In my case the problem was because I was trying to draw before the modal was fully open. To tidy up I put a Function in the click to open the modal, and in it I would mount the canvas elements inside the modal to then draw the graph.
– Carlinhos
Thus: <button onclick="modal()">Modal 1</button> <div data-remodal-id="modal2" id="modal2" role="dialog"> <br> </div> <script> Function modal(){ $('[data-remodal-id=modal2]'). remodal({ Modifier: 'with-red-Theme' }); $("#modal2"). addClass("js"). before('<div style="height:250px;width:250px"><canvas id="pieChart"></canvas></div>'); }
– Sarah
I tried so to create the canvas inside the modal, but it worked
– Sarah