2013-09-25 21 views
0

請求幫助... 我想在file_1中顯示Highchart,當highchart腳本在file_2上時.. 我使用PHP,Jquery和AJAX ... 是腳本在其他文件提交表單後顯示高圖

SCR_test02.php

<?php 

require "function.inc.php"; 
//require "showscr.php"; 

include "conn.php"; 
include "q_table.php"; 

?> 

<form name="scr_form"> 
<table border="1" align="center" width="80%"> 
<tr> 
    <td align="center"> 
    <input type="button" onClick="SCRajaxFunction()" value="Submit" id="sub"> 
    </td> 
    <td> 
    <input type="reset"> 
    </td> 
</tr> 
<tr> 
    <td colspan="6">&nbsp; 
    <div id="scr"></div> 
    </td> 

</tr> 


</table> 

</form> 
<script src="../Highcharts-3.0.5/js/highcharts.js"></script> 


</html> 

function.inc

var htmlobjek; 
$(document).ready(function() 
{ 

    $("#region").change(function() 
    { 
    var region = $("#region").val(); 
    $.ajax(
    { 
     url: "GetMSC.php", 
     data: "region="+region, 
     cache: false, 
     success: function(msg) 
     { 
      $("#msc").val(msg); 
     } 
    }); 
    }); 
}); 



//Ketika form di submit 
function SCRajaxFunction(){ 
    var ajaxRequest; // The variable that makes Ajax possible! 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function() 
    { 
     if(ajaxRequest.readyState == 4) 
     { 
      var ajaxDisplay = document.getElementById('scr'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var period = document.getElementById('period').value; 
    var datefrom = document.getElementById('datefrom').value; 
    var dateto = document.getElementById('dateto').value; 
    var region = document.getElementById('region').value; 
    var msc = document.getElementById('msc').value; 
    //var rows = document.getElementById('rows').value; 
    var dataString = "?datefrom=" + datefrom + "&dateto=" + dateto + "&region=" + region + "&msc=" + msc + "&period=" + period;// + "&rows=" + rows; 
    ajaxRequest.open("GET", "ShowSCR.php" + dataString, true); 
    ajaxRequest.send(null); 
} 

ShowSCR

<html> 

<? 
require "function.inc.php"; 
    //require "highchart_tes.php"; 
    include "conn.php"; 

    $period = $_GET['period']; 
    $datefrom = $_GET['datefrom']; 
    $dateto = $_GET['dateto']; 
    $region = $_GET['region']; 
    $msc = $_GET['msc']; 

     $drop=array(); 
     $drop2=array();  
     $traffic=array(); 
     $data1=array(); 
     $data2=array(); 
     $sql = "SELECT distinct Date_id, hour_id 
      FROM scrkpi_h 
      WHERE Date_id >= '2012-12-01' 
      AND Date_id <= '2012-12-03' 
      AND MSC like 'MSBDL%' 
      ORDER BY Date_id ASC "; 
     $qry = mysql_query($sql,$koneksi) or die ("Gagal Query - ".mysql_error()); 
     while ($data=mysql_fetch_array($qry)) 
     { 


      $a = date('Y-m-d ', strtotime($data['Date_id'])); 
      $data1[] = $a. $data[1]; 

     } 


?> 
    <script type="text/javascript" src="../Highcharts-3.0.5/js/type/jquery-1.7.1.min.js"></script> 
    <script src="../Highcharts-3.0.5/js/highcharts.js"></script> 


<script type="text/javascript"> 


    var chart1; 
    $(document).ready(function() 
    { 
      chart1 = new Highcharts.Chart(
      { 
       chart: { 
       renderTo: 'scr_core' 
       }, 
       title: { 
        text: 'SCR Core ', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: 
       { 
        categories: ['<?php echo join($data1, "','") ?>'], 
        //['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 

        labels: 
        { 
         rotation: -90 
        } 
       }, 
       yAxis: { 
        title: { 
         text: '%' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          this.x +': '+ this.y +' % (percentage)'; 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'middle', 
        borderWidth: 0 
       }, 
       series: 
       [ 
       <?php //query tiap msc lbih dulu, baru tiap msc diambil datanya, dijadikan data berjajar berdasar koma 
       $sql = "SELECT distinct msc_id, MSC 
         FROM `scrkpi_h` 
         WHERE MSC like 'MSBDL%'"; //buat data di legend 
       $query = mysql_query($sql); 
       while($ret = mysql_fetch_array($query)){ 
        $nId = $ret[0]; //query dari scrkpi_h, msc_id = array 0 
        $nodes = $ret[1]; 
         $sql_ = "SELECT * FROM `scrkpi_h` 
         WHERE `msc_id`='$nId' 
         AND Date_id >= '2012-12-01' 
         AND Date_id <= '2012-12-03' 
         AND MSC like 'MSBDL%' 
         ORDER BY Date_id ASC "; 
         $query_ = mysql_query($sql_); 

         $data = ""; 
         while($ret_ = mysql_fetch_array($query_)){ 
         $kel = $ret_['scrCombine']; 
         $data = $data . "," . $kel; 
         } 
         $data = substr($data , 1 , strlen($data)); 
       ?> 
       { 
        name: '<?php echo $nodes; ?>', 
        data: [<?php echo $data; ?>] 
         }, 
       <?php 


       } 
       ?> 
       ] 
      }); 
     }); 

</script> 

<div id='scr_core' style='min-width: 10px; height: 10px; margin: 0'></div> 
</html> 

圖表已經顯示在文件ShowSCR.php 但我想在DIV =「SCR」,以顯示它的文件SCR_test02.php當我點擊「提交」按鈕 如何工作出來,我已經嘗試了很多次,但沒有工作,真正需要幫助的

回答

0

它不會在你例子SCR_test02.php因爲工作,你必須行

`require "function.inc.php"; 
//require "showscr.php"; 

include "conn.php"; 
include "q_table.php";` 

但是這裏面科幻你沒有圖表初始化,只調用ajax和多數民衆贊成在所有。您需要添加JavaScript高級圖表調用或在php中準備擴展,這將是通過reguire declatarion包含的SCR_test02.php和ShowSCR的常用文件。

編輯: 的common.php

<script src="path/to/highcharts.js"></script> 
<script> 
    //highcharts initialization 
</script> 

然後在每次使用

require "common.php" 
+0

感謝的應答文件,,但我不知道如何添加JavaScript調用highcharts .. u能舉個例子? – alexalexalex

+0

看到我更新的文章 –

+0

仍然沒有工作夥計.. 這是我的示例流程: ** SCR_test02.php **將數據發送到** function.inc.php **,其中包括對** ShowSCR的打開函數。 php ** 這在你的例子中至少是相同的。 如果我給 **需要「common.php」(在我的版本中需要「ShowSCR.php」)** 會出現錯誤,因爲這個腳本: ** $ period = $ _GET ['period']; ** ** $ datefrom = $ _GET ['datefrom']; ** ** $ dateto = $ _GET ['dateto']; ** ** $ region = $ _GET ['region']; ** ** $ msc = $ _GET ['msc']; ** 還沒有任何價值 – alexalexalex