highchart mysql json with dropdown select value fo

Question

i'm trying to use highcharts using json data from mysql table. i want to set a drop down list with values that are going to be used as WHERE conditions for the mysql_query to fetch selected data and populate them in highchart. the codes are working properly with static conditions (no drowpdown variables).

main.html

<form method="get" action="" >
Chose :
<select name="liste" id="liste">
<option value="A" <? if($selected == 'A'){ echo 'selected="Choice A"';}?>Choice A</option>
<option value="B" <? if($selected == 'B'){ echo 'selected="Choice B"';}?>Choice B</option>
<option value="C" <? if($selected == 'C'){ echo 'selected="Choice C"';} ?>Choice C</option>
<option value="D" <? if($selected == 'D'){ echo 'selected="Choice D"';} ?>Choice D</option>
</select>
<input type="submit" value="Go" />
</form>

data.php

`<?php

$A=$_GET['liste'];

$con = mysql_connect("localhost","myuser","mypwd");

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

mysql_select_db("mydatabase", $con);

$test = mysql_query("SELECT name FROM table1 WHERE table2.age LIKE '{$A}'");

$rowss = array();
while($rr = mysql_fetch_array($test)) { 
$ro[0] = $rr[0];
$ro[1] = $rr[1];
array_push($rowss,$ro); 
}

 print json_encode($rowss, JSON_NUMERIC_CHECK);

 mysql_close($con);
?>

on the main.html file i have the highchart script that call the data.php file to get the json data.

<script>
     $(document).ready(function() {
  //rest of the code
 $.getJSON("data.php", function(json) {
            options.series[0].data = json;
            chart = new Highcharts.Chart(options);
        });
</script>

testing the data.php give the correct output according to the selected value. so i'm assuming that it is working fine. my problem is when loading the main.html it draws an empty graph and even when changing the value keep drawing empty data graph.

NB: i know mysql_* is no longer best practice and planing to switch to mysqli_* later.

EDIT: seems like my options.series[0] options obj is not created and the console shows empty data array. when using <form method="get" action="data.php" > i got the expect array but cannot get the graph.

Answer 1

I got works as i wanted according to the following example i had to make ajax call to set the variable onchange of the drop menu and the code become like this (remove the form tag and submit button) main.html:

<select name="list" id="list">
<option value="A">Choice A</option>
<option value="B">Choice B</option>
<option value="C">Choice C</option>
<option value="D">Choice D</option>
</select>

<script>
 $(function () {

  //on page load  
 getAjaxData("A");

 //on changing select option
 $('#list').change(function(){
 var val = $('#list').val();
 getAjaxData(val);
 });

 function getAjaxData(id){
 //use getJSON to get the dynamic data via AJAX call
 $.getJSON('data.php', {id: id}, function(chartData) {
 .....rest of the code

and the data.php:

 <?php

 $con = mysql_connect("localhost","myuser","mypwd");

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

 mysql_select_db("mydatabase", $con);

 $id = $_GET['id'];

 $test = mysql_query("SELECT name FROM table1 WHERE table2.age LIKE '{$id}'");

 $rowss = array();
  while($rr = mysql_fetch_array($test)) { 
  $ro[0] = $rr[0];
  $ro[1] = $rr[1];
 array_push($rowss,$ro); 
 }

 print json_encode($rowss, JSON_NUMERIC_CHECK);

  mysql_close($con);
 ?>

enjoy it!!

Answer 2

i try this query it give perfect graph.

      for (var i=0; i<data.value.length; i++)
     {
     **series**.push({
                    name: data.value[i].name,
                    data:data.value[i].value
                });
      }


        var chart = new Highcharts.Chart({
                chart: {
                    renderTo: 'graph_view',
                    defaultSeriesType: 'spline',
                    marginRight: 0,
                    marginBottom: 25
                },
                credits: {
            text: '',
            href: ''
            },
                title: {
                    text: '',
                    x: -20 //center
                },
                subtitle: {
                    text: '',
                    x: -20
                },
                xAxis: data.orderDate,
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                legend: {

                    align: 'top',
                    verticalAlign: 'top',
                    x: -10,
                    y: 100,
                    borderWidth: 0
                },

                series:**series**


            });

          }
       });
    }
 }