PHP to JavaScript Chart; display w/button
<p>The charts I am using are written in JavaScript, so I need to transfer mysql query arrays to JavaScript, creating the charts. The mysql queries are generated by drop down menus. On the web page is a button that, when clicked, should display the chart. All should be displayed on the same page.</p>

<p>I have two drop down menus with names of runners in each. through onChange, each drop down menu calls the same JavaScript function - </p>

<p>home.php</p>

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

<p>Js.js</p>

<pre><code>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 &amp;&amp; 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 + "&amp;homeRunner=" + homeRunner;
xmlhttp11.open("GET","getRunners.php" + queryString,true);
xmlhttp11.send(null);

}
</code></pre>

<p>getRunners.php</p>

<pre><code>$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&lt;20){
    $week++;
    $getLeague = "select ... from $db where ... = $week";
    $resultLeague = mysql_query($getLeague);
    while($row3 = mysql_fetch_array($resultLeague)){
    $leagueRunner[]=$row3['...'];
    }
}
</code></pre>

<p>home.php</p>

<pre><code>&lt;script type="text/javascript"&gt;
    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: [ &lt;?php echo join($awayRunner, ',');?&gt;],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {

                        name:'fghtrht',
                        data: [&lt;?php echo join($homeRunner, ',');?&gt;],
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {
                        name: 'League Avg',
                        data: [ &lt;?php echo join($leagueRunner, ',');?&gt;],
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
        });
});
    }
    &lt;/script&gt;


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

<p>How do I get the php arrays back to the home page into the javascript? Should I place the JavaScript somewhere else?</p>

<p>The thing is, I have gotten all of this to run on separate pages when I didnt try to pass the runners names through. If I explicitly stated the runners names on the getRunners.php page, everything works great. I can not get the the php variables to insert into the JavaScript to generate the charts.</p>

<p>I've tried to assign the js code to a php variable in the getRunners.php page then echo the variable on the home.php page which didnt work. </p>

<p>It seems, once the home page is loaded, the JS remains the same. How do I pass through the PHP variables after the drop down options have been selected, allowing the chart to be displayed only after the button is clicked? </p>

<p>Thank you. I hope this is more clear than my previous question. </p>
