2016-12-04 2 views
0

ハイチャートを使用して基本的なカラムグラフを作成しています。次に、ドロップダウンメニューを使用して、ドロップダウン選択に応じたグラフを生成します。ドロップダウンを使用した動的ハイチャートチャート

これはコードです。

graph.php


<?php 
$con = mysql_connect("localhost","admin","123"); 

if (!$con) { 
    die('Could not connect: ' . mysql_error()); 
} 

mysql_select_db("ctes1", $con); 

$query = mysql_query("SELECT session1, semester, lect_name, course_code, average_a, average_b, average_c FROM course"); 

$category = array(); 
$category['name'] = 'course_code'; 

$series1 = array(); 
$series1['name'] = 'average_a'; 

$series2 = array(); 
$series2['name'] = 'average_b'; 

$series3 = array(); 
$series3['name'] = 'average_c'; 


while($r = mysql_fetch_array($query)) { 
    $category['data'][] = $r['lect_name']; 

    $series1['data'][] = $r['average_a']; 
    $series2['data'][] = $r['average_b']; 
    $series3['data'][] = $r['average_c']; 
} 

$result = array(); 
array_push($result,$category); 
array_push($result,$series1); 
array_push($result,$series2); 
array_push($result,$series3); 


print json_encode($result, JSON_NUMERIC_CHECK); 

mysql_close($con); 
?> 

data.php

!DOCTYPE html> 
<body> 
    <section id="create"> 
     <h2>Create a new report</h2> 
     <p>Please select your preferences</p> 

     <?php 
     if (!isset($_POST['submit'])) 
     { 
     ?> 
     <table> 
      <form method="post" action="<?php echo($_SERVER["PHP_SELF"]);?>"> 
      <tr> 
       <td>Session: 
       <td><select name="session" > 
       <option value="2013/2014">2013/2014</option> 
       <option value="2014/2015">2014/2015</option> 
       <option value="2015/2016">2015/2016</option> 

       </select> 
       </tr> 

       <tr> 
       <td>Semester: 
       <td><select name="semester" > 
       <option value="1">1</option> 
       <option value="2">2</option> 

       </select> 
       </tr> 

       </table> 
       <br> 
       <input type="submit" name="submit"> 
       <br><br> 
      </form> 

     <?php 
      } 

      else{ 
       ?> 

       <form method="post" action="<?php echo($_SERVER["PHP_SELF"]);?>"> 
       <table> 

       <tr> 
       <td>Session: 
       <td><select name="session" > 
       <option value="2013/2014">2013/2014</option> 
       <option value="2014/2015">2014/2015</option> 
       <option value="2015/2016">2015/2016</option> 

       </select> 
       </tr> 

       <tr> 
       <td>Semester: 
       <td><select name="semester" > 
       <option value="1">1</option> 
       <option value="2">2</option> 

       </select> 
       </tr> 

       </table> 
       <br> 
       <input type="submit" name="submit"> 
       <br><br> 
      </form> 

      <?php 


      $session = (trim($_POST['session']==' ')) ?die ('ERROR: Select session'):($_POST['session']); 
      $semester = (trim($_POST['semester']==' ')) ?die ('ERROR: Select semester'):($_POST['semester']); 


      [email protected]_connect('localhost','admin','123'); 

      mysql_select_db('ctes1') or die ('Unable to select a Database!'); 

      $query="SELECT lect_name,course_code, average_a, average_b, average_c FROM course WHERE session1 = '$session' AND semester = '$semester'"; 

      $results = mysql_query($query); 

       if(isset($_POST['submit'])){ 


      if(mysql_num_rows($results)>0){ 

     //print graph 

       ?> 

       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title>Column chart with data from MySQL using Highcharts</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() { 
      var options = { 
       chart: { 
        renderTo: 'container', 
        type: 'column', 
        marginRight: 130, 
        marginBottom: 150 
       }, 
       title: { 
        text: 'LECTURER CTES SCORE', 
        x: -20 //center 
       }, 
       subtitle: { 
        text: '', 
        x: -20 
       }, 
       xAxis: { 
        categories: [] 
       }, 
       yAxis: { 
        title: { 
         text: 'average score' 
        }, 
        plotLines: [{ 
         value: 0, 
         width: 1, 
         color: '#808080' 
        }] 
       }, 
       tooltip: { 
        formatter: function() { 
          return '<b>'+ this.series.name +'</b><br/>'+ 
          this.x +': '+ this.y; 
        } 
       }, 
       legend: { 
        layout: 'vertical', 
        align: 'right', 
        verticalAlign: 'top', 
        x: -10, 
        y: 100, 
        borderWidth: 3 
       }, 
       series: [] 
      } 

      $.getJSON("data.php", function(json) { 
       options.xAxis.categories = json[0]['data']; 
       options.series[0] = json[1]; 
       options.series[1] = json[2]; 
       options.series[2] = json[3]; 
       chart = new Highcharts.Chart(options); 
      }); 
     }); 
     </script> 

<?php 
} 
?> 
    </head> 
    <body> 
    <script src="https://code.highcharts.com/highcharts.js"></script> 
    <script src="https://code.highcharts.com/modules/exporting.js"></script> 

    <div id="container" style="min-width: 310px; height: 500px; margin: 0 auto"></div> 

    <?php 


    } 
    else 
    { 
     //print error message 
     echo 'No result found'; 
    } 
    // once processing is complete 
    // free result set 
    mysql_free_result ($results); 

    // close connection to MySQL Server 
    mysql_close ($connection); 

} 
?> 

     </section> 

</body> 

</html> 

問題は、私は、データへのセッションや学期変数を渡す方法がわからないです。 PHPページ。

私は誰かが私を助けることを願っています、ありがとう。

答えて

0

あなたは

session_start() 

を使用して、data.phpにこの

$_SESSION['session] = session_value; 
$_SESSION['semester] = semester_value; 

のようなセッションや学期の値を保存することができ、これらの値は

$_SESSION['session] ; 
$_SESSION['semester]; 
で利用できるようになります
関連する問題