2013-10-27 33 views
5

私はGoogleチャートを使用してガントチャートを生成しようとしていますが、それに応じて既存のPHPコードでコーディングした後、空白のHTMLが表示されます。グラフを正常に表示するために、私を助けてください。未知のエラー:コンテナが定義されていません

<html> 
    <head> 
    <!--Load the AJAX API--> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    // Load the Visualization API and the gantt chart package. 
    google.load("visualization", "1", {packages: ["timeline"]}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     $.ajax({ 
     url: "http://localhost:8080/index1.php", 
     dataType:"json", 
     async: false , 
     success: function(data) { 
      jsonData = data; 
     } 
      }); 

     // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(jsonData); 

     // Instantiate and draw our chart, passing in some options. 
     var chart = new google.visualization.Timeline(document.getElementById('chart_div')); 
     chart.draw(data, options); 
    } 

    </script> 
    </head> 

    <body> 
    <div id="chart_div" style="width: 900px; height: 200px;></div> 
    </body> 
</html> 

答えて

0

私はあなたが間違った場所にjsonDataにアクセスしていると思うが、これを試してみてください。

<script type="text/javascript"> 
    $(function() { 
    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 

    function drawChart() { 
     $.ajax({ 
     url: "localhost:8080/index1.php", 
     dataType:"json", 
     async: false , 
     success: function(data) { 
     jsonData = data; 
      // Create our data table out of JSON data loaded from server. 
      var data = new google.visualization.DataTable(jsonData); 

      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.Timeline(document.getElementById('chart_div')); 
      chart.draw(data, {width: 500, height: 240}); 
     } 
     }) 
    }; 
    }); 
</script> 
+0

私の間違いを修正しました。私はGET https://ads.panoramtech.net/loader.js?client=wcを取得しています –

+0

@ArunKumarあなたが直面しているエラーを取得していない場合は、エラー –

+0

を貼り付けて、そのエラーをGoogle –

2

は、私はあなたがしようdata形式の問題を持っていると思う。この

あなたが不足している
/* 
    // assuming you are having data object in this format, with columns (first : string, second: integer) 

    data = [ 
     ['Mushrooms', 3], 
     ['Onions', 1], 
     ['Olives', 1], 
     ['Zucchini', 1], 
     ['Pepperoni', 2] 
    ] 
    */ 

    // Load the Visualization API and the piechart package. 
    google.load('visualization', '1', {'packages':['corechart']}); 

    // Set a callback to run when the Google Visualization API is loaded. 
    google.setOnLoadCallback(drawChart); 


    function get_gchart_data(data) { 
    var g_data = new google.visualization.DataTable(); 
    g_data.addColumn('string', 'Topping'); 
    g_data.addColumn('number', 'Slices'); 
    g_data.addRows(data); 
    return g_data; 
    } 

    function drawChart() { 
     $.ajax({ 
     url: "localhost:8080/index1.php", 
     dataType:"json", 
     async: false , 
     success: function(data) { 
      var g_data = get_gchart_data(data); 

      // Instantiate and draw our chart, passing in some options. 
      var chart = new google.visualization.Timeline(document.getElementById('chart_div')); 
      chart.draw(g_data, {width: 500, height: 240}); 
     } 
     }) 
    }; 
5

:「

<div id="chart_div" style="width: 900px; height: 200px;></div> 

divがあるdivのスタイルに定義されていないので、JSはそれを見つける。

getElementByIdが失敗しました。

関連する問題