I'm using Fusion Charts in my application ( link ) and everything went fine on my pure HTML5 page. However, trying to use with Bootstrap is not rendering.
My working page looks like this:
<head>
<script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="../js/fusioncharts.js"></script>
<script type="text/javascript" src="../js/fusioncharts.theme.zune.js?cacheBust=56"></script>
<script type="text/javascript" src="../js/fusioncharts.jqueryplugin.js"></script>
<!-- Carrega o bootstrap -->
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap-datetimepicker.css">
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/moment-with-locales.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js"></script>
</head>
<body>
<span id="user-chart-container">FusionCharts will render here</span>
</body>
<script type="text/javascript" src="../js/data/dashboard.js"></script>
</html>
The file dashboard.js contains
$(document).ready(function() {
$("#user-chart-container").insertFusionCharts({
type: 'column2d',
width: '100%',
height: '100',
id: 'chart1',
dataFormat: 'json',
dataSource: {
"chart": {
"paletteColors": "#0075c2",
"showvalues": "0",
"divlinealpha": "30",
"numdivlines": "3",
"showlabels": "0",
"showYAxisValues": "0",
"yAxisMaxValue": "30",
"palettecolors": "008ae6",
"plotspacepercent": "0",
"chartLeftMargin": "0",
"chartRightMargin": "0",
"plotToolText": "<div><b>$label, <br/>Unidades: $datavalue</b></div>",
"theme": "zune"
},
"data": user_chart_data //from data.js
}
});
});