2014-07-16 57 views
0

我正在尋找建立一個網站,其中有一個頁面,其中有一些jQuery圖表,這是由MySQL查詢驅動的。該查詢由在主頁上的下拉列表中選擇的日期驅動。Jquery和SQL的組合

我正在努力構建正確的代碼(所有完全自學都充滿了糟糕的練習!),以便在選擇不同選項時更新圖表。

代碼列在下面,但我的問題是;代碼應該在哪裏繪製圖表來完成這項工作。如果主頁面上存在loadChart函數,並且從另一個頁面的查詢中回顯數據,或者我應該將整個函數放在單獨的頁面上,該頁面由jquery或選項3加載 - 我是完全廣泛的標記?

圖表的代碼是; <> echo $ data是迴應MySQL輸出的部分,並且在代碼和SQL查詢被修復時工作正常。

<script> 
    var chart1; 
    function loadChart() 
     {   
      chart1 = new cfx.Chart(); 
      chart1.getData().setSeries(1); 
       chart1.getAxisY().setMin(100); 
       chart1.getAxisY().setMax(1000); 
       var series1 = chart1.getSeries().getItem(0);      series1.setGallery(cfx.Gallery.Lines); 

      var data = <?php echo json_encode($temp, JSON_NUMERIC_CHECK); ?>; 
       chart1.setDataSource(data); 
       var divHolder = document.getElementById('ChartDiv'); 
      chart1.create(divHolder);    
     } 
</script> 

的SQL查詢

SELECT COUNT(`column_Date`) AS 'Count' FROM Dates WHERE `column_Date` > date('2013-06-01') 

注:其中的日期爲2013年6月1日以上,我想基於下降從主網頁沿着這改變。

<head> 
    <script src="js/jquery-1.7.1.min.js"></script> 
    <script> 
     $(document).ready(function(){ 
      $("#optionschosenid").click(function(){ 
       if($("#optionsid").val() == "OptionA"){ 
        $("#chart").load("weeks.php"); 
       } 
       else { 
        $("#chart").load("text_test.php"); 
       } 

      }); 
     }); 
</script> 
</head> 
<body onload="loadChart()"> 
<div id="row"> 
    <form method="post" id="weekcommencing" name="dateselector"> 
     <select id="optionsid" name="optionsname"> 
      <option value="2013-06-01">June</option> 
      <option value="2013-01-01">January</option> 
     </select> 
     <button name="optionschosenname" id="optionschosenid"> Select Additional Option </button> 
    </form> 
</div> 
    <div id="chart" name="chart"> 
    <?php echo $data; 
     echo 'hello'; ?>  
    <br /> --> 
    Test 0.11 
    </div> 
    <button id="testId">click me</button> 

    <br /> 
    <br /> 
    <div id="ChartDiv"> 

    </div> 
    </body> 

回答

1

的回答你的問題很可能是「選擇3」 - 你是馬克:)

我不知道什麼是你的PHP $數據變量的完全寬 - 你不t顯示它被聲明和設置的位置。我看到一個名爲data的Javascsript變量。我不知道你是否可能有這樣的印象,即javascript變量和PHP變量對彼此可見?他們當然不是。

最重要的是,你應該儘可能地分開所有東西 - 就像你開始做的那樣。包含來自JS文件的JavaScript。從模板中加入你的HTML。

即使你是新的,你已經夠了,你應該直接跳入MVC framework。這會迫使你至少學習一些好的做法。

+0

延遲道歉。你會特別推薦任何MVC框架嗎?我也錯過了在JSON_Encode($ data)中從SQL查詢中回顯$ data變量的代碼行。你可能會建議哪些社區可以上傳整個文件供人們協助?我對stackoverflow非常滿意,但無法共享是有點限制。 – Maudise