Googleライングラフの読み込み時にJqueryをクリックします

Question

クリック時にグラフを読み込もうとしています。基本的には、クリックすると別のテーブルを持つテーブルに新しい行を追加しています（その部分はうまく動作します）。そこにグラフをポップしたいのです。私は "未定義のプロパティ 'DataTable'を読み取ることができません。どうして私がぶらぶらしているのか分からない。そして私は、私が見いだすことができるすべての例を広く見てきましたが、私が何をしようとも何も働かないようです。

はここでは関係のjavascript

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

function drawChart(date,cafe,thebox) { 
    var jsonData = $.ajax({ 
     type:"POST", 
     url: "posts.php", 
     data : { hourly_date : date, hourly_cafe : cafe }, 
     dataType: "json", 
     async: false 
     }).responseText;   
    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.LineChart(thebox); 
    chart.draw(data, {width: '100%', height: 240}); 
} 

$(".mdl-layout__content").on("click","#fixed-tab-1 .mdl-data-table tbody tr td:first-child",function(){ 
    var therow=$(this).closest("tr"); 
    if(therow.hasClass("open")){ 
     therow.removeClass("open"); 
     therow.next("tr").remove(); 
    } 
    else{ 
     var cafe=$(this).text(); 
    var thedate=$("#theday").val(); 
     therow.addClass("open"); 

     $.post("posts.php",{dsales_date:thedate,cafe:cafe},function(data){ 
     therow.after("<tr class='detail_row'><td colspan='4' class='sdetails'><div class='chart'></div>"+data+"</td></tr>"); 
    drawChart(thedate,cafe,therow.next("tr").find(".chart")); 
    }); 
    } 
}); 

だとここでチャートを構築するために返さ取得されたデータである

{"cols":[{"label":"Hour","type":"number"},{"label":"Sales","type":"number"}],"rows":[{"c":[{"v":6,"f":null},{"v":"26.10","f":null}]},{"c":[{"v":7,"f":null},{"v":"152.50","f":null}]},{"c":[{"v":8,"f":null},{"v":"311.95","f":null}]},{"c":[{"v":9,"f":null},{"v":"182.30","f":null}]},{"c":[{"v":10,"f":null},{"v":"181.45","f":null}]},{"c":[{"v":11,"f":null},{"v":"193.25","f":null}]},{"c":[{"v":12,"f":null},{"v":"157.70","f":null}]},{"c":[{"v":13,"f":null},{"v":"223.35","f":null}]},{"c":[{"v":14,"f":null},{"v":"250.85","f":null}]},{"c":[{"v":15,"f":null},{"v":"213.05","f":null}]},{"c":[{"v":16,"f":null},{"v":"93.00","f":null}]},{"c":[{"v":17,"f":null},{"v":"105.90","f":null}]},{"c":[{"v":18,"f":null},{"v":"41.80","f":null}]},{"c":[{"v":19,"f":null},{"v":"51.40","f":null}]},{"c":[{"v":20,"f":null},{"v":"33.80","f":null}]}]} 

Answer 1

setOnLoadCallback通話drawChart、

date,cafe,theboxがすべてになりますundefined

代わりにこのようにしよう...

google.charts.load('current', { 
    packages:['corechart'], 
    'callback': function() { 
    $(".mdl-layout__content").on("click","#fixed-tab-1 .mdl-data-table tbody tr td:first-child",function(){ 
     var therow=$(this).closest("tr"); 
     if(therow.hasClass("open")){ 
      therow.removeClass("open"); 
      therow.next("tr").remove(); 
     } 
     else{ 
      var cafe=$(this).text(); 
     var thedate=$("#theday").val(); 
      therow.addClass("open"); 

      $.post("posts.php",{dsales_date:thedate,cafe:cafe},function(data){ 
      therow.after("<tr class='detail_row'><td colspan='4' class='sdetails'><div class='chart'></div>"+data+"</td></tr>"); 
     drawChart(thedate,cafe,therow.next("tr").find(".chart")); 
     }); 
     } 
    }); 
    } 
}); 

function drawChart(date,cafe,thebox) { 
    var jsonData = $.ajax({ 
     type:"POST", 
     url: "posts.php", 
     data : { hourly_date : date, hourly_cafe : cafe }, 
     dataType: "json", 
     async: false 
     }).responseText; 
    var data = new google.visualization.DataTable(jsonData); 
    var chart = new google.visualization.LineChart(thebox); 
    chart.draw(data, {width: '100%', height: 240}); 
}