2015-05-09 83 views
0
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="ISO-8859-1"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="js/highcharts.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

<link rel="stylesheet" href="/resources/demos/style.css"> 
    <script type="text/javascript" src="https://www.google.com/jsapi"></script> 

    <script type="text/javascript"> 
    google.load("visualization", "1", {packages:["corechart"]}); 
     $(document).ready(function(){ 
      var receivedData = []; 
      var category = []; 
      var value = []; 
      var i; 
      var chart; 
      var data; 
      var options; 
      $("#firstDate,#secondDate").datepicker({ 
       maxDate: 0 
       }); 
     $("#chartButton").click(function(){   
      var processed_json = new Array(); 
      var chart_data; 
      var x = new Object();  
      x.fromDate = $('#firstDate').val(); 
      x.toDate = $('#secondDate').val(); 
      var chart = JSON.stringify(x);  
       $.ajax({ 
        url: 'http://localhost:4862/BillTracker/ControllerServlet/chart', 
        method: 'POST', 
        data: chart, 
        dataType: 'json', 
        success: function(data){ 
         $.each(data.jsonArray, function(index) { 
          $.each(data.jsonArray[index], function(key, value) { 
           var point = []; 
            point.push(value); 
            receivedData.push(point); 
           }) 

        }); //end of array 
         alert(receivedData); 
        alert(receivedData.length); 
        google.setOnLoadCallback(drawChart); 
       function drawchart(){ 
        alert("load"); 
        for(i=0;i<receivedData.length;i+=2){     
         var a = receivedData[i]; 
         var b = receivedData[i+1]; 
         value.push(b); 
         category.push(a); 
        } 
        alert(category[0]); 
        alert(value[0]); 
        var options = { 
          title: 'Expense View', 
          hAxis: {title: 'Category', titleTextStyle: {color: 'red'}}, 
          vAxis: {title: 'Expense', titleTextStyle: {color: 'red'}} 
          }; 
        data = new google.visualization.DataTable(); 
        data.addColumn('string', 'category'); 
        data.addColumn('number', 'value'); 
       for(i = 0; i < category.length; i++){ 
        data.addRow([category[i], value[i]]); 
       } 
       new google.visualization.BarChart(document.getElementById('chart_div')). 
       draw(data, options); 
       } 
       } //end of success func 
      }); // end of ajax call 
     }); //end of click function 
     }); 

    </script> 
    </head> 
    <body> 
<!--Div that will hold the pie chart--> 
    <div data-role="fieldcontain"> 
     <label for="firstDate">Date</label> 
     <input type="text" name="firstDate" id="firstDate" placeholder="Date..." data-clear-btn="true"> 
     </div> 
     <div data-role="fieldcontain"> 
     <label for="secondDate">Date</label> 
     <input type="text" name="secondDate" id="secondDate" placeholder="Date..." data-clear-btn="true"> 
     </div> 
     <div> 
     <input type="button" value="Save" id="chartButton" data-icon="check" data-iconpos="right" ></div> 
    <div id="container" style="width:400; height:300"></div> 
    </body> 
</html> 

我是新的谷歌可視化。我通過ajax調用從數據庫中獲得了一些價值。問題是google.setOnLoadCallBack沒有調用。我認爲這個功能應該放在不同的位置,我可能也是錯的。google.setOnLoadCallBack不工作

任何幫助。

回答

0

嘗試在google.setOnLoadCallback(drawChart);附近移動,正如您所說的那樣。
我建議把它放在google.load("visualization", "1", {packages:["corechart"]});的正下方。

+0

感謝您的回答..我找到了答案... – Muthukalai