Bootstrap - Loading Remote Google Chart into Modal

Question

I tried to load a Google chart into a modal and nothing appears. I tried load the jsapi in the index.html file still no luck. Also tried to call the function drawChart(); in the index page as well. Still no luck.

Here's my mock up

index.html

<a data-toggle="modal" href="remote/modal.html" data-target=".modal" class="btn btn-sm btn-danger">Click Me!</a>

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
        </div>
    </div>
</div>

modal.html

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Month');
        data.addColumn('number', 'KPI 1');
        data.addColumn('number', 'KPI 1 Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addColumn('number', 'KPI 2');
        data.addColumn('number', 'KPI 2 Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addColumn('number', 'KPI 3 WR');
        data.addColumn('number', 'KPI 3 WR Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addColumn('number', 'KPI 4 CA');
        data.addColumn('number', 'KPI 4 CA Target');
        data.addColumn({type:'boolean',role:'certainty'});
        data.addRows([
            ['Jan', 76.87, 75.00, false, 93.40, 72.00, false, 0.35, 0.5, false, 6.21, 1.13, false],
            ['Feb', 76.68, 75.00, false, 90.45, 72.00, false, 0.44, 0.5, false, 9.52, 1.13, false],
            ['Mar', 80.48, 75.00, false, 89.80, 72.00, false, 0.49, 0.5, false, 9.27, 1.13, false]
        ]);

        var options = {
            curveType: "function",
            width: 800, height: 450,
            chartArea:{ left: '8%', top: '8%', width: "80%", height: "80%" },
            series: {
                0:{color: '#e2383f'},
                1:{color: '#e2383f', visibleInLegend: false},
                2:{color: '#3498db'},
                3:{color: '#3498db', visibleInLegend: false},
                4:{color: '#F0AD4E'},
                5:{color: '#F0AD4E', visibleInLegend: false},
                6:{color: '#8ec449'},
                7:{color: '#8ec449', visibleInLegend: false}
            }
        };
        new google.visualization.LineChart(document.getElementById('chart_div')).draw(data, options);
    }
</script>

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title" id="myModalLabel">Chart</h4>
</div>
<div class="modal-body">
    <div id="chart_div"></div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Answer 1

I found the answer. All I have to do is to replace

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

with this

google.load('visualization', '1', {'packages':['corechart'], "callback": drawChart});