Google 시각화 API - 선택 기준의 복수 차트

Question

Google 시각화 차트 API를 처음 사용합니다. 드롭 다운 선택에 따라 다른 차트를 표시하려고합니다. 다른 그리기 기능을 추가하면 차트가 표시되지 않습니다. 아래에서 내 피들을 찾으십시오.

http://jsfiddle.net/meetravi/PFa5h/5/

JS 코드 :

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

     case "average": 
      $('#visualization').empty(); 
      init(); 
      break; 
     case "total_install": 
      debugger; 
      $('#visualization').empty(); 
      init(); 
      break; 
     case "total_uninstall": 
      debugger; 
      $('#visualization').empty(); 
      init(); 
      break; 
     default: 
      $('#visualization').empty(); 
      init(); 
      break; 
    } 
}); 

if(selectedVal==""){ 
    init(); 
} 

}); 

Answer 1

긴 투쟁 후 선택에 따라 여러 차트 작업을했다. 문제는 콜백을 통해 그리기 시각화 기능을 호출하는 데 필요한 여러 차트를로드하는 것이 었습니다. Google 그룹에서 유용한 정보를 찾았습니다.

그런 다음 다른 차트를로드하기 위해 일부 기능 init(), init2() ... 등을 추가했습니다. 여기서 주목해야 할 것은 메서드 내에서 drawvisualisation()으로 전화하는 것입니다.이 메서드는 만 사용하여 호출해야합니다. google.setOnLoadCallback (drawVisualization()); 대신 을 호출하십시오. google.setOnLoadCallback (drawVisualization); 구글 놀이터 예제에서 언급 한대로. 내가 표시하지 않음으로써 내 그래프를 망치고 된 코드 google.setOnLoadCallback (drawVisualization)를 사용하려고 할 때

function init(){ 
    google.setOnLoadCallback(drawVisualization()); 
} 
function drawVisualization() { 
    // Create and populate the data table. 
    var data = google.visualization.arrayToDataTable([ 
    ['Year', 'Austria', 'Bulgaria', 'Denmark', 'Greece'], 
    ['2003', 1336060, 400361, 1001582, 997974], 
    ['2004', 1538156, 366849, 1119450, 941795], 
    ['2005', 1576579, 440514, 993360, 930593], 
    ['2006', 1600652, 434552, 1004163, 897127], 
    ['2007', 1968113, 393032, 979198, 1080887], 
    ['2008', 1901067, 517206, 916965, 1056036] 
]); 

// Create and draw the visualization. 
new google.visualization.BarChart(document.getElementById('visualization')). 
    draw(data, 
    {title:"Yearly Coffee Consumption by Country", 
     width:600, height:400, 
     vAxis: {title: "Year"}, 
     hAxis: {title: "Cups"}} 
); 
} 

전화는 발생하지 않았다.

여기는 선택에 따라 작동하는 나의 바이올린입니다. http://jsfiddle.net/meetravi/PFa5h/6/

다음은 위의 바이올린에서 나는 선, 열, 스택 등 ...

같은 차트의 다른 유형을로드하려고