PHP to JavaScript Chart; display w/button - php

Question

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.
I have two drop down menus with names of runners in each. through onChange, each drop down menu calls the same JavaScript function -
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>
How do I get the php arrays back to the home page into the javascript? Should I place the JavaScript somewhere else?
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.
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.
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?
Thank you. I hope this is more clear than my previous question.

Answer 1

here is how I used an onchange method to stimulate a MYSQL query and have the Highchart display the result. The major problem was that the returned JSON array was a string that needed to be converted into an INT. The resultArray variable is then used in the data: portion of the highChart.
$(function(){
$("#awayRunner").change(function(){
$.ajax({
type: "POST",
data: "away=" + $("#awayRunner").val(),
dataType: "json",
url: "/getCharts.php",
success: function(response){
var arrayLength = response.length;
var resultArray = [];
var i = 0;
while(i<arrayLength){
resultArray[i] = parseInt(response[i]);
i++;
}
In the PHP code, the array must be returned as JSON like this
echo json_encode($awayRunner);