为什么谷歌图表不显示新信息

this problem seems to be very weird. I can't to display my data via json into google charts. Although the data i get is perfectly fine, but the google chart doesnt update itself. The html side should be fine since the chart does display but it does not display the data that i want.

<script type="text/javascript">
$(document).ready(function () {
        $("#accordion").wijaccordion({
            animated: "easeInOutCirc", duration: 700,
            header: "h3"
        });

        jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
            this.slide(options, {
                easing: options.down ? "easeOutBounce" : "swing",
                duration: options.down ? 1000 : 200
            });
        }
    });
    var myjson;
    var sampleData = new Array();


    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);


    function drawChart() {
        var options = {
          title: 'Energy Cost Profile',
          vAxis: {title: 'Cost($)'},
          hAxis: {title: 'Time'},             
          legend: { position: 'bottom' },

        };
        var data;
    $.getJSON("data/test2.json", function(json){
        myjson = json;
        var i = 0;
        var key1, key2, key3, key4;
        for (var key in myjson) {

            sampleData[i] = new Array();

            var j = 0;
            for(var k in myjson[key]){
                if(i==0 && j==0){
                    key1 = k;
                } else if (i==0 && j ==1){
                    key2 = k;
                } else if (i==0 && j ==2){
                    key3 = k;
                } else if (i==0 && j ==3){
                    key4 = k;
                }
                sampleData[i][j] = myjson[key][k];
                j = j+1;
            }
            i = i+1;
        }   

        sampleData.unshift([key1, key2, key3, key4]);

        data = google.visualization.arrayToDataTable(sampleData);

        var chart = new google.visualization.SteppedAreaChart(document.getElementById('googlechart'));
        chart.draw(data, options);

    });


  }


</script>

<?php
$con = mysql_connect("localhost", "admin", "admin", "energy");


$result2 = mysql_query("SELECT * FROM energy.load2", $con);

$peakcost = 0;
$nonpeakcost = 0;
$shouldercost = 0;
while($row = mysql_fetch_array($result2))

{

//print_r($row);
if($row['Time']==10){
    $peakcost = $row['Energy_Load'];
}
if($row['Time']==1){
    $nonpeakcost = $row['Energy_Load'];
}
 if($row['Time']==23){
    $shouldercost = $row['Energy_Load'];
}

  }
?>

When i write(document.write) below this code "sampleData.unshift([key1, key2, key3, key4]);" this is what i get

Time,peak TOU,non peak TOU,shoulder TOU,12:00:00 AM,0,0.7826086956521738,0, 1:00:00 AM,0,0.7826086956521738,0, 2:00:00 AM,0,0.7826086956521738,0, 3:00:00 AM,0,0.7826086956521738,0, 4:00:00 AM,0,0.7826086956521738,0, 5:00:00 AM,0,0.7826086956521738,0, 6:00:00 AM,0,0,0.5217391304347826, 7:00:00 AM,0,0,0.5217391304347826, 8:00:00 AM,1.5652173913043477,0,0, 9:00:00 AM,1.5652173913043477,0,0,10:00:00 AM,1.5652173913043477,0,0,11:00:00 PM,1.5652173913043477,0,0,12:00:00 PM,1.5652173913043477,0,0,13:00:00 PM,1.5652173913043477,0,0,14:00:00 PM,1.5652173913043477,0,0,15:00:00 PM,1.5652173913043477,0,0,16:00:00 PM,1.5652173913043477,0,0,17:00:00 PM,1.5652173913043477,0,0,18:00:00 PM,1.5652173913043477,0,0,19:00:00 PM,1.5652173913043477,0,0,20:00:00 PM,1.5652173913043477,0,0,21:00:00 PM,1.5652173913043477,0,0,22:00:00 PM,0,0,0.5217391304347826,23:00:00 PM,0,0,0.5217391304347826

Data doesnt seemed to have any problem so i am kind of stuck here.