Question

I am trying to use the google chart tools (from the visualization api; not the image charts) using an infoBubble. The infobubble is awesome; does exactly what I need it to. My project calls for using a chart in one of the tabs on the infobubble. So I am trying to use this code (see below) to build a contentString that will create a chart in the div’s content. It isn’t making any charts happen, though. Does anything look wrong, in particular, with the content string?

//returns the status string
function GetPublicProjectStatusString(data){

     var contentString = '<div id="content" style="margin:0;">'+
            '<h3>' + 'Project Phase' + '</h3>'+
            '<p>' + data.ProjectPhase + '</p>'+
            '<div id="parentDiv">' + 
                '<div id="chartDiv" style="top:0px;left:0px;width:200px;height:200px;">' +
                '</div>' +
                '<div id="secondDiv">' +
                    '<h3>' + 'Start Date' + '</h3>' +
                '</div>' +
            '</div>' +
        '</div>' + 
        '<script type="text/javascript">' +
            'var chartdata = new google.visualization.DataTable();' +
            'chartdata.addColumn("string", "Source");' +
            'chartdata.addColumn("number", "Amount");' +
            'chartdata.addRows([' +
                '["Federal",4],' +
                '["State",8],' +
                '["County",9],' +
                '["Local",14],' +
            ']);' + 
            'var options = {"title":"Project Budget"' +
                '"width":200,' + 
                '"height":200};' +
            'var chart = new google.visualization.PieChart(document.getElementById("chartDiv"));' +
            'chart.draw(data,options);' +   
        '</script>';

    return contentString;

}  

Answer 1

I think the following approach might be helpful to you as I dont think you can use the script tags in the content string.

Use a div in the content string where you want to place your graph

var contentString = "<div id='chart_div'></div>";

Have a look at this google chart example that can be adapted to add the chart to the div in the content string:

Google Charts Tools Example

However the div in your content string will probably be created by user input like clicking a marker so you cannot directly add the chart to it (which is done in the chart example) as it is not part of the dom yet. Therefor your have to listen to the event that creates the infoBubble. For a infowindow connected to a marker in the google maps api this will be something like this:

google.maps.event.addListener(infoWindow, 'domready', function() { drawChart(); });

Where infoWindow is the info window you created and drawChart a function you wrap the adapted chart code example in.

Hope this helps.