无法设置Javascript对象属性

For some reason I am unable to set the properites of a Javascript Object created in literal form. Using PHP to write the Javascript code. The first chart Object chartObject1 displays correctly but the second chart chartObject2 does not display the title because I am attempting to set the title text property outside of the literal definition.

Why won't it let me set the property using chartObject2.title.text = "chart2"; ??

<?php
$chart_text = <<<EOD
<script type="text/javascript">

var chartObject1 = Object;
$(document).ready(function(){
    chartObject1 = new Highcharts.Chart({

        chart: {
            renderTo: 'chart1',
            type: 'bar'
        },
        title: {
            text: 'chart1'
            },
        xAxis: {
            categories: ['Apples', 'Bananas', 'Oranges']
        },
        yAxis: {
            title: {
                text: 'Fruit eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]},
            {
            name: 'John',
            data: [5, 7, 3]}]
        });
});
</script>
EOD;
print ($chart_text);

$chart_text = <<<EOD
<script type="text/javascript">

var chartObject2 = Object;
$(document).ready(function(){
chartObject2 = new Highcharts.Chart({

        chart: {
            renderTo: 'chart2',
            type: 'bar'
        },
        xAxis: {
            categories: ['Spiders', 'Grasshoppers', 'Scorpions']
        },
        yAxis: {
            title: {
                text: 'Bugs eaten'
            }
        },
        series: [{
            name: 'Jane',
            data: [1, 0, 4]},
        {
            name: 'John',
            data: [5, 7, 3]}]
    });
    chartObject2.title.text = "chart2";
    });
</script>
EOD;
print ($chart_text);

?>

because its a Highcharts object, you would need to use their api to change the text. Like this:

chartObject2.setTitle({text: "chart2"});