Passing multiple data arrays between PHP and Google Charts via ajax

Question

I am successfully preparing Google charte using the following ajax call. My script, myscript.php reads the database, prepares the chart columns and rows ($array) and then ends with "echo json_encode($array)".

However, I need myscript.php to also assemble some header and footer HTML that will appear above and below the actual chart. I've wasted most of the day trying to find how to pass both the data array ($array) plus two other variables ($header and $footer ) back to the drawChart() JavaScript, which would then present the final code.

Can someone please help or point me in the right direction before I go nuts. Thanks!

    function drawChart() {
    var jsonData = $.ajax({
        url: "myscript.php",
        dataType:"json",
        async: false
        }).responseText;  
    var dataTable = new google.visualization.DataTable(jsonData);
    var options = {
        'is3D':                     false,
        'width':                    310
    };
    var chart = new google.visualization.PieChart(document.getElementById('chart'));
    chart.draw(dataTable, options);
    }

Answer 1

Can you not generate the HTML on the client side?
If you really need to you can send the HTML as objects in the JSON..

{ "header": "<h2>Header</h2>", "footer": "<p>Footer</p>", "data": [] }

Make sure you understand how JSON works as an easy way to transmit information between clients and servers, among other things. Understand $header and $footer are not readily available on the client machine (browser); your script must convert them to a means that transferrable, which is why JSON format works so well (browsers implement Javascript)