PHP到JavaScript图表；显示w/按钮

我使用的图表是用JavaScript编写的，所以我需要将mysql查询数组转移到JavaScript中，创建图表。mysql查询是通过下拉菜单生成的。网页上有一个按钮，单击后应显示图表。所有内容都应显示在同一页面上。

我有两个下拉菜单，每个菜单上都有跑步者的名字。通过onChange，每个下拉菜单调用相同的JavaScript函数-

home.php

<form id='awayPick'>    
    <select name='awayRunner' id='awayRunner' onchange='Javascript: getitdone(this);/> 
        ...multiple options
</form>
<form id='homePick'>    
    <select name='homeRunner' id='homeRunner' onchange='Javascript: getitdone(this);/>
       ...multiple options
</form>

Js.Js

function getitdone(str)
{
if (str=="")
    {
        document.getElementById("midSpa").innerHTML="";
        return;
    } 
if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp11=new XMLHttpRequest();
    }
else
    {// code for IE6, IE5
        xmlhttp11=new ActiveXObject("Microsoft.XMLHTTP");
    }
        xmlhttp11.onreadystatechange=function()
    {
        if (xmlhttp11.readyState==4 && xmlhttp11.status==200)
            {
                document.getElementById("midSpa").innerHTML=xmlhttp11.responseText;
            }
    }
var awayRunner = document.getElementById('awayRunner').value;
var homeRunner = document.getElementById('homeRunner').value;
var queryString = "?awayRunner=" + awayRunner + "&homeRunner=" + homeRunner;
xmlhttp11.open("GET","getRunners.php" + queryString,true);
xmlhttp11.send(null);
}

getRunners.php

$home=$_GET['homeRunner'];
$away=$_GET['awayRunner'];
$db = db;
$homeRunner=array();
$awayRunner = array();
$leagueRunner = array();
$getHome="select ... from $db where ... = '$home'";
$result2 = mysql_query($getHome);
while($row = mysql_fetch_array($result2)){
    $homeRunner[]= $row['...'];

}
$getAway="select ... from $db where ... ='$away'";
$result22 = mysql_query($getAway);
while($row2 = mysql_fetch_array($result22)){
    $awayRunner[]= $row2['...'];
}
$week = 0;
while($week<20){
    $week++;
    $getLeague = "select ... from $db where ... = $week";
    $resultLeague = mysql_query($getLeague);
    while($row3 = mysql_fetch_array($resultLeague)){
    $leagueRunner[]=$row3['...'];
    }
}

home.php

<script type="text/javascript">
    function chartOne(){
$(document).ready(function() {
    var chart = new Highcharts.Chart({
          chart: {
             renderTo:'container', 
             zoomType:'xy'             },
        title:  {
                    text:
'title'
                },
        xAxis:  {
                    categories: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19]
                },
        yAxis: [{ // Primary yAxis
        labels: {
            formatter: function() {
                return this.value + 'pts'
            },
            style: {
                color: '#89A54E'
            }
        },
        title: {
            text: 'text',
            style: {
                color: '#89A54E'
            }
        }
    }, { // Secondary yAxis
        title: {
            text:null,
            },
    }],
    tooltip: {
        formatter: function() {
            return '' +
                this.y + 
            (this.series.name == ' ' ?  ' mm' : 'pts');
        }
    },
        legend: {
                    layout: 'horizontal',
                    backgroundColor: '#FFFFFF',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 69,
                    y: 20,
                    floating: true,
                    shadow: true,
                },
      plotOptions: {
                        column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                }
                    },
        series: [   {
                        name:'adfg',
                        data: [ <?php echo join($awayRunner, ',');?>],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },
                    {
                        name:'fghtrht',
                        data: [<?php echo join($homeRunner, ',');?>],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },
                    {
                        name: 'League Avg',
                        data: [ <?php echo join($leagueRunner, ',');?>],
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
        });
});
    }
    </script>

<input type='submit' value='chart One' onclick='chartOne()'></input>
<div id='container' style='width: 50%; height: 200px; float: left;'></div>

如何将php数组返回到javascript的主页？我应该把JavaScript放在其他地方吗？

问题是，当我没有试图传递跑步者的名字时，我已经把所有这些都写在了不同的页面上。如果我在getRunners.php页面上明确说明了跑步者的名字，那么一切都会很好。我无法将php变量插入到JavaScript中以生成图表。

我尝试将js代码分配给getRunners.php页面中的一个php变量，然后在home.php页面上回显该变量，但没有成功。

看起来，一旦加载了主页，JS就保持不变。在选择下拉选项后，我如何通过PHP变量，使图表只在单击按钮后显示？

谢谢。我希望这比我之前的问题更清楚。