[visualization-api] Google Charts based on selection on same page

Thu, 25 Oct 2012 08:41:26 -0700 

Hi All . I am pretty new to google Visualisation API. I have a scenario to 
load different charts based on a selection from the dropdown. It is not 
displaying if I am adding two draw functions. Please help me. Thanks so 
much.

HTML Code:

<html>
<head>
<script src="http://www.google.com/jsapi"; type="text/javascript"></script>
    <script src="../js/jquery-1.8.2.min.js" type="text/javascript" 
></script>
    <script src="../js/bootstrap.min.js" type="text/javascript" ></script>
<script src="../js/components/dashboard.js" type="text/javascript"></script>
</head>
<body>

<div id="dashboard-content" class="content">
    <select id="dashboard-chart-type">
        <option value="average" selected="selected">Average 
Installs</option>
        <option value="total_install">Total Install</option>
        <option value="total_uninstall">Total Uninstall</option>
    </select>
    <div id="visualization" style="width: 600px; height: 400px;"></div>
    
</div>


</body>



</html>

*Javascript Code: **/js/components/dashboard.js*



$(document).ready(function(){
  $('#dashboard-chart-type').change(function(){
      var selectedVal = $(this).val();
      alert(selectedVal);
  });
   switch(selectedVal) {

        case "average":
            alert("average");
            $('#visualization').empty();
            init();
            break;
        case "total_install":
            alert("installs");
            $('#visualization').empty();
            init2();
            break;
        case "total_uninstall":
            alert("uninstalls");
            $('#visualization').empty();
            init();
            break;
        default:
            alert("default");
            $('#visualization').empty();
            init2();
            break;
    }


});

function init(){
    drawColumnComboChart();

}
function init2(){
    drawStackedChart();
}

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

function drawColumnComboChart() {
    // Create and populate the data table.
    var data = google.visualization.arrayToDataTable([
        ['Month', 'USA', 'UK', 'Germany', 'India', 'China', 'Average'],
        ['2012/05',  165,      938,         522,             998,           
450,      614.6],
        ['2012/06',  135,      1120,        599,             1268,         
 288,      682],
        ['2012/07',  157,      1167,        587,             807,           
397,      623],
        ['2012/08',  139,      1110,        615,             968,           
215,      609.4],
        ['2012/09',  136,      691,         629,             1026,         
 366,      569.6]
    ]);

    // Create and draw the visualization.
    var ac = new 
google.visualization.ComboChart(document.getElementById('visualization'));
    ac.draw(data, {
        title : 'Average Installs this year',
        width: 600,
        height: 400,
        vAxis: {title: "Number"},
        hAxis: {title: "Month"},
        seriesType: "bars",
        series: {5: {type: "line"}}
    });
}

function drawStackedChart() {
    // Some raw data (not necessarily accurate)
    var data = google.visualization.arrayToDataTable([
        ['Month',   'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 
'Rwanda'],
        ['2004/05',    165,      938,         522,             998,         
  450],
        ['2005/06',    135,      1120,        599,             1268,       
   288],
        ['2006/07',    157,      1167,        587,             807,         
  397],
        ['2007/08',    139,      1110,        615,             968,         
  215],
        ['2008/09',    136,      691,         629,             1026,       
   366]
    ]);

    // Create and draw the visualization.
    var ac = new 
google.visualization.AreaChart(document.getElementById('visualization'));
    ac.draw(data, {
        title : 'Monthly Coffee Production by Country',
        isStacked: true,
        width: 600,
        height: 400,
        vAxis: {title: "Cups"},
        hAxis: {title: "Month"}
    });
}









-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To view this discussion on the web visit 
https://groups.google.com/d/msg/google-visualization-api/-/Mkwpe7_d4SAJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-visualization-api?hl=en.

Reply via email to