Highchart Mysql Json With Dropdown Select Value For Where Condition

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

Solution 1:

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**


            });

          }
       });
    }
 }   

Solution 2:

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:

<selectname="list"id="list"><optionvalue="A">Choice A</option><optionvalue="B">Choice B</option><optionvalue="C">Choice C</option><optionvalue="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);
 });

 functiongetAjaxData(id){
 //use getJSON to get the dynamic data via AJAX call
 $.getJSON('data.php', {id: id}, function(chartData) {
 .....restof 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!!