I am using bootstrap in my web application.
when i click Large Modal Button, bootstrap modal showing but AMcharts is not showing.
In the modal i have defined chartdiv and trying to load trend chart from amcharts(http://www.amcharts.com/demos/trend-lines/)
why chart is not showing?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPageAMcharts.aspx.cs" Inherits="BootStrapApp.TestPageAMcharts" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="dist/css/animate.min.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<script>
function ModalClick() {
alert('ModalClick');
LoadChart();
$('#myModal').modal('show');
}
function LoadChart() {
alert('LoadChart()');
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}, {
"date": "2012-01-08",
"value": 9
}, {
"date": "2012-01-09",
"value": 13
}, {
"date": "2012-01-10",
"value": 15
}, {
"date": "2012-01-11",
"value": 19
}, {
"date": "2012-01-12",
"value": 21
}, {
"date": "2012-01-13",
"value": 22
}, {
"date": "2012-01-14",
"value": 20
}, {
"date": "2012-01-15",
"value": 18
}, {
"date": "2012-01-16",
"value": 14
}, {
"date": "2012-01-17",
"value": 16
}, {
"date": "2012-01-18",
"value": 18
}, {
"date": "2012-01-19",
"value": 17
}, {
"date": "2012-01-20",
"value": 15
}, {
"date": "2012-01-21",
"value": 12
}, {
"date": "2012-01-22",
"value": 10
}, {
"date": "2012-01-23",
"value": 8
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#000000",
"inside": true,
"lineAlpha": 0,
"toValue": 20,
"value": 10
}],
"position": "left",
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"valueField": "value"
}],
"trendLines": [{
"finalDate": "2012-01-11 12",
"finalValue": 19,
"initialDate": "2012-01-02 12",
"initialValue": 10,
"lineColor": "#CC0000"
}, {
"finalDate": "2012-01-22 12",
"finalValue": 10,
"initialDate": "2012-01-17 12",
"initialValue": 16,
"lineColor": "#CC0000"
}],
"chartScrollbar": {},
"chartCursor": {},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"inside": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" onclick="ModalClick();">
Modal Button
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="chartdiv" style="width: 100%; height: 600px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="Scripts/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</form>
</body>
</html>The issues is that the chart container, or more correctly it's parent is hidden at the moment of chart creation. Because of that the chart can't correctly measure it's dimensions, hence it's not appearing when modal is shown.
You need to build (or force to redraw) the chart after the modal is shown.
For this purpose Bootsrap's event "shown.bs.modal" suits the purpose nicely:
function ModalClick() {
alert('ModalClick');
$('#myModal').modal('show').on('shown.bs.modal', function () {
LoadChart();
});
}
This will take care of the opening the modal initially. If your users will be opening and closing the modal with a chart a few times, the chart will be rebuilt every time which is an unnecessary drain of resources.
So, I would just modify your code to check whether the chart has already been built and just let it take in new dimensions by calling it's invalidateSize() method.
For this, I will store the instance of the chart object as a data element in your modal object. (I will need to modify the LoadChart() function to return chart reference.
Here's the full code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPageAMcharts.aspx.cs" Inherits="BootStrapApp.TestPageAMcharts" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Bootstrap -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="dist/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="dist/css/animate.min.css" rel="stylesheet" />
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/serial.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>
<style type="text/css">
#chartdiv {
width: 100%;
height: 500px;
}
</style>
<script>
function ModalClick() {
alert('ModalClick');
LoadChart();
$('#myModal').modal('show').on('shown.bs.modal', function () {
// get the chart
var chart = $(this).data('chart');
if ( chart ) {
// the chart was already built, let's just make it resize
chart.invalidateSize()
}
else {
// let's build the chart and store it together with
// modal element
$(this).data('chart', LoadChart());
}
});
}
function LoadChart() {
alert('LoadChart()');
var chart = AmCharts.makeChart("chartdiv", {
"type": "serial",
"theme": "none",
"pathToImages": "http://www.amcharts.com/lib/3/images/",
"dataDateFormat": "YYYY-MM-DD HH:NN",
"dataProvider": [{
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-01",
"value": 8
}, {
"date": "2012-01-02",
"value": 10
}, {
"date": "2012-01-03",
"value": 12
}, {
"date": "2012-01-04",
"value": 14
}, {
"date": "2012-01-05",
"value": 11
}, {
"date": "2012-01-06",
"value": 6
}, {
"date": "2012-01-07",
"value": 7
}, {
"date": "2012-01-08",
"value": 9
}, {
"date": "2012-01-09",
"value": 13
}, {
"date": "2012-01-10",
"value": 15
}, {
"date": "2012-01-11",
"value": 19
}, {
"date": "2012-01-12",
"value": 21
}, {
"date": "2012-01-13",
"value": 22
}, {
"date": "2012-01-14",
"value": 20
}, {
"date": "2012-01-15",
"value": 18
}, {
"date": "2012-01-16",
"value": 14
}, {
"date": "2012-01-17",
"value": 16
}, {
"date": "2012-01-18",
"value": 18
}, {
"date": "2012-01-19",
"value": 17
}, {
"date": "2012-01-20",
"value": 15
}, {
"date": "2012-01-21",
"value": 12
}, {
"date": "2012-01-22",
"value": 10
}, {
"date": "2012-01-23",
"value": 8
}],
"valueAxes": [{
"axisAlpha": 0,
"guides": [{
"fillAlpha": 0.1,
"fillColor": "#000000",
"inside": true,
"lineAlpha": 0,
"toValue": 20,
"value": 10
}],
"position": "left",
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
}],
"graphs": [{
"balloonText": "[[category]]<br><b><span style='font-size:14px;'>value:[[value]]</span></b>",
"bullet": "round",
"dashLength": 3,
"valueField": "value"
}],
"trendLines": [{
"finalDate": "2012-01-11 12",
"finalValue": 19,
"initialDate": "2012-01-02 12",
"initialValue": 10,
"lineColor": "#CC0000"
}, {
"finalDate": "2012-01-22 12",
"finalValue": 10,
"initialDate": "2012-01-17 12",
"initialValue": 16,
"lineColor": "#CC0000"
}],
"chartScrollbar": {},
"chartCursor": {},
"categoryField": "date",
"categoryAxis": {
"parseDates": true,
"axisAlpha": 0,
"gridAlpha": 0.1,
"inside": true,
"minorGridAlpha": 0.1,
"minorGridEnabled": true
}
});
return chart;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" onclick="ModalClick();">
Modal Button
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div id="chartdiv" style="width: 100%; height: 600px;"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="Scripts/jquery-2.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="dist/js/bootstrap.min.js"></script>
</form>
</body>
</html>