How do I send javascript on ajax request?

Question

This is my first time messing with ajax with javascript and I would hardly describe myself as a web developer or web programmer. So I'm going to give you what I have coded and have tried first and then describe my problem and what it's suppose to do last.

So I have a select div with some stuff in it.

<select id="month" onchange="refreshGraph()">

And when an option is chosen this javascript is suppose to work.

function refreshGraph()
{
            var index = document.getElementById('month').selectedIndex;
            var monthOptions = document.getElementById('month').options;
            var selectedDays = monthOptions[index].value;

            $.ajax({
                    url:"divisions.php",
                    type: "POST",
                    dataType: "script",
                    data: {days:selectedDays},
                    success: function(data){
                            $('#divisions').html(data);}
                    });
}

I've also tried rewriting the success function call to be like this:

$('#divisions').html('<script src="http://code.highcharts.com/highcharts.js">
    <script src="http://code.highcharts.com/modules/exporting.js">'+data+'<\/script<\/script>')

Instead of the $.ajax() I've also tried this

$('#divisions').load("divisions", {days: selectedDays});

This is suppose to update a table with a div with id of divisions.

<table>
  <tr>
    <td>
      <div id="divisions" style="min-width: 90%; height: 50%; margin: 0 auto"></div>
    </td>
  </tr>
</table>

Now divisions.php is a file that has some database calls and a javascript highchart written in plain text meaning there's no php or script or anything else like that surrounding the plain text javascript code that is the highchart. So after all my php it begins like this

$(document).ready(function () {
    $('#divisions').highcharts({
        chart: {

Here are my source files I'm including in the header of index_new.php:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script src="divisions.php"></script>

So what am I trying to do? I'm trying to update the chart given the choice someone chooses in the dropdown. The values in the dropdown are additional sql parameters that get passed to divisions.php . divisions.php then uses this additional sql parameter in its calling which affects what the table looks like.

On first loading of index_new.php highchart gets loaded and everything is fine. The problem I'm facing is when I choose any of the options in the dropdown the chart updates BUT instead of showing a highchart it shows the plain text javascript (see below) that was previously interpreted as actual javascript when index_new.php was first called. So the ajax call is working and I'm grabbing the variable correctly but I'm guessing it's the javascript I have in my header that's not styling it? I have no clue why this isn't working.

Instead of a highchart I get this when updated (Yes I did replace the actual names with name1, name2,...etc):

$(document).ready(function () { $('#divisions').highcharts({ chart: { type: 'column' }, title: { text: 'Total Sales By Salesperson' }, xAxis: { title: { text: 'Salesperson'}, categories: ['name1', 'name2', 'name3', 'name4', 'name5', 'name6', 'name7', ] }, yAxis: { min: 0, title: { text: 'Total Sales' } }, tooltip: { formatter: function() { return ''+ this.x +'
'+ this.series.name +': '+ this.y +'
'+ 'Total: '+ this.point.stackTotal; } }, legend: { backgroundColor: '#FFFFFF', reversed: true }, plotOptions: { }, series:[ {name: 'Business Equipment' , data: [0, 400, 80000, 68496, 15800, 170000, 155200, ]},{name: 'Corporate Printing' , data: [0, 0, 0, 6600, 0, 0, 0, ]},{name: 'Document Storage' , data: [0, 0, 0, 0, 0, 18000, 0, ]},{name: 'IT Services' , data: [10000, 0, 0, 4500, 0, 0, 2000, ]},]});})

Answer 1

Why don't you use the ajax method of loading data from PHP script into the highchart?

$(function () {

    $('#month').change(function()
    {
        $.get('divisions.php?selectedData='+ $(this).val(), function (divisions_data)
        {            
            $('#container').highcharts({
                data: {
                    csv: divisions_data
                },
                title: {
                    text: 'My chart title'
                },

                ... rest of your init code ...
            });
        });
    });

});

Then on your divisions.php will render the data required for your chart. For data structure, read this: http://api.highcharts.com/highcharts#series.data

More info: http://www.highcharts.com/demo/line-ajax