onchange F(x) to php to Highchart on same page

Question

I am continuing a previous question that was asked onclick -> mysql query -> javascript; same page

This is my onchange function for a drop down of names. it is called when each drop down is changed. The idea is to send each runners name into the php page to run a mysql query then return 3 arrays to be entered into javascript.

function sendCharts() {
var awayTeam = document.getElementById('awayRunner').value;
var homeTeam = document.getElementById('homeRunner').value;        


if(window.XMLHttpRequest) {
    xmlhttp14 = new XMLHttpRequest();

}
else {
    xmlhttp14 = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp14.onreadystatechange = function() {
    if(xmlhttp14.readyState == 4 && xmlhttp14.status == 200) {

   var parts = xmlhttp14.responseText.split(','); //THIS IS WHAT IS RETURNED FROM THE MYSQL QUERY. WHEN I ALERT IT, IT OUTPUTS IN THE FORM 14,15,18,16,17,12,13 

          ... code that generates the chart 
        series: [   {
                        name: document.getElementById('awayRunner').value,
                        data: [parts,','], //THIS IS WHERE AN ARRAY MUST BE ENTERED. THIS OUPUTS ONLY ONE NUMBER 
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {

                        name: document.getElementById('homeRunner').value,
                        data: parts, // TRIED THIS
                        type: 'column',
                        pointStart: 0
                        //pointInterval
                    },

                    {
                        name: 'League Avg',
                        data: [], //THIS IS WHERE 3rd ARRAY MUST BE ENTERED
                        type:'spline',
                        pointStart: 0
                        //pointInterval
                    },
                ]
    });

    }
}
xmlhttp14.open("GET", "getCharts.php?awayRunner="+awayRunner+"&homeRunner="+homeRunner, true);
xmlhttp14.send();

}

my php code looks like this. As you'll see, there are 3 arrays that must be returned to be entered into different spots in the javascript to generate the code.

$away=$_GET['awayRunner'];
$home=$_GET['homeRunner'];

$db=mydb;



$homeRunner=array();
$awayRunner = array();
$totalOverall= array();

$getHome="select column from $db where tmName = '$home'";
$result2 = mysql_query($getHome);
while($row = mysql_fetch_array($result2)){
$homeRunner[]= $row['column'];
}

$getAway="select column from $db where tmName ='$away'";
$result22 = mysql_query($getAway);
while($row2 = mysql_fetch_array($result22)){
$awayRunner[]= $row2['column'];

}

$week = 0;
while($week<20){
$week++;
$teamCount = "select count(column) from $db where week = $week";
$resultTeam =  mysql_query($teamCount);
$rowTeam = mysql_fetch_array($resultTeam);
$t = $rowTeam['count(column)'];

$getLeague = "select sum(column) from $db where week = $week";
$resultLeague = mysql_query($getLeague);
while($row3 = mysql_fetch_array($resultLeague)){
    $totalOverall[]=$row3['sum(column)']/$t;
    }
}
echo join(',',$awayRunner);

currently, by doing it this way, the chart only outputs the second value in the array. for instance, if var parts is equal to 23,25,26,24,23...only 25 is shown.

A previous question resulted with the following answer -

1. Load the page.
2. User chooses an option.
3. An onChange listener fires off an AJAX request
4. The server receives and processes the request
5. The server sends back a JSON array of options for the dependent select
6. The client side AJAX sender gets the response back
7. The client updates the select to have the values from the JSON array.

I'm lost on #'s 5 - 7. Can someone provide examples of code that gets this done? Normally, I would just ask for direction, but I have been stuck on this problem for days. I'm about ready to scrap the idea of having charts on my site. Thanks in advance

EDIT

this is the first change that I have made to send and receive just one request

<script>
$(function(){
    $("#awayRunner").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "data=" + $("#awayRunner").val(),
        dataType: "json",
        url: "/my.php",
        success: function(response){
            alert(response);  
        }
        });
    });
});

The data displayed in the alertbox is in the form 12,15,16,15. Now, when I enter in data: response, only the second number from each is being displayed in the chart. Any ideas?

EDIT

OK, so i figured out that the info in response is a string. It must be converted to an INT using parseInt to be usable in the chart. currently, I have

$("#awayTeam").change(function(){ 
        $.ajax({
        type: "POST",    
        data: "away=" + $("#awayTeam").val(),
        dataType: "json",
        url: "/getCharts.php",
        success: function(response){
              var asdf = [];
              asdf[0] = parseInt(response[0]);
              asdf[1] = parseInt(response[1]);
              asdf[2] = parseInt(response[2]);
              asdf[3] = parseInt(response[3]); 
              alert(asdf);

will have to write a function to make this cleaner.

Answer 1

I can't believe it, but I finally got it. 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(){
    $("#awayTeam").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);