2015-06-09 84 views
2

這是有史以來第一次嘗試PHP圖表。我嘗試過使用各種可用的圖形模塊,但我無法獲取圖形。這就是我所追求的。我有一個頁面,點擊一個按鈕後,將打開一個新的PHP頁面,該頁面有代碼進行數據庫查詢&在該頁面上打印圖形(打開新頁面)。沒有理由,我終於決定堅持使用谷歌圖表製作圖表。在研究堆棧溢出問題時,我發現許多代碼被許多人認同,但是由於我在這個問題上的愚蠢,我無法實現。任何幫助,以獲得這一進展將不勝感激。PHP圖形與谷歌圖表

<?php 

    $ins1 = $_GET["ins1"]; 
    $ins2 = $_GET['ins2']; 
    $ins3 = $_GET['ins3']; 
    $ins4 = $_GET['ins4']; 
    $ins5 = $_GET['ins5']; 
    $ins6 = $_GET['ins6']; 
    $ins7 = $_GET['ins7']; 

    $sql_1 = "select ab_date, count(ab_date) as COUNT_AB_DATE from TABLE1 where AB_NAME='$ins1' and ab_date between '$ins2' and '$ins3' group by ab_date"; 

$link = mysql_connect("localhost", "user", "pass"); 
    $dbcheck = mysql_select_db("database"); 

    if ($dbcheck) { 
     $arr1 = array(); 
     $arr2 = array(); 
     $chart_array = array(); 

     // Execute SQL 
     $result = mysql_query($sql_1); 

     if (mysql_num_rows($result) > 0) { 
      while ($row = mysql_fetch_assoc($result)) { 
       $arr2 = array_keys($row); 
       $arr1 = array_values($row); 
      } 
     } 

     for($i=0;$i<count($arr1);$i++) { 
      $chart_array[$i]=array((string)$arr2[$i],intval($arr1[$i])); 
     } 
    } 


    $data=json_encode($chart_array); 
     //echo json_encode($data,JSON_NUMERIC_CHECK); 

    // Close DB conn 
    mysqli_close($link); 
?> 

<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>XLINT</title> 
     <link rel="stylesheet" type="text/css" href="css/dashboard.css"> 
     <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 
     <script type="text/javascript" src="https://www.google.com/jsapi"></script> 
     <script type="text/javascript"> 
      // 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() { 

       // Create our data table out of JSON data loaded from server. 
      var data = new google.visualization.DataTable(); 
       data.addColumn("string", "AB_DATE"); 
       data.addColumn("number", "#AB"); 

       data.addRows(<?php $data ?>); 

       ]); 
       var options = { 
        title: 'TREND OF AB', 
        is3D: 'true', 
        width: 800, 
        height: 600 
       }; 
       // Instantiate and draw our chart, passing in some options. 
       //do not forget to check ur div ID 
       var chart = new google.visualization.PieChart(document.getElementById('plot1')); 
       chart.draw(data, options); 
      } 
     </script> 
    </head> 
    <body> 
     <main2> 
      <div> 
       <table id="tbl_format_1"> 
        <tr bgcolor=""> 
         <td colspan="3" id="th_format"> 
          <b> <?php GRAPHS BELOW ?> 
         </td> 
        </tr> 
       </table> 
       <br> 
        <div id="plot1" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
       <br> 
      </div> 
     </main2> 
    </body> 
</html> 

Could someone please help me t get this going? 

回答

0

我建議:

<?php foreach($testArray as $key=>$value): ?> 
      ['<?php echo $key ?>', <?php echo $value ?>], 
      <?php endforeach; ?> 

全功能drawChart:

function drawChart() { 

    <?php $testArray = array('AB_DATE1' => 10,'AB_DATE2' => 20,'AB_DATE3' => 30,'AB_DATE4' => 40,'AB_DATE5' => 50,'AB_DATE6' =>60,'AB_DATE7' => 70,); ?> 

    // Create our data table. 
    data = new google.visualization.DataTable(); 
    data.addColumn('string', 'Topping'); 
    data.addColumn('number', 'Slices'); 
    data.addRows([ 
     <?php foreach($testArray as $key=>$value): ?> 
     ['<?php echo $key ?>', <?php echo $value ?>], 
     <?php endforeach; ?> 
    ]); 

    // Set chart options 
    var options = {'title':'How Much Pizza I Ate Last Night', 
        'width':400, 
        'height':300}; 

    // Instantiate and draw our chart, passing in some options. 
    chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
    google.visualization.events.addListener(chart, 'select', selectHandler); 
    chart.draw(data, options); 
    } 

代替$ testArray的插入您的陣列。調整你的數組(數組('AB_DATE1'=> 10,'AB_DATE2'=> 20,...))或循環。

https://developers.google.com/chart/interactive/docs/drawing_charts

+0

非常感謝websky。用你的例子,我找出瞭解決方案。我非常感謝你的幫助。再次感謝你。 – User12345