How to create Google API line chart using PHP array / JSON?

I'm trying to create a simple Google line chart using their API. Hard coded, this works:

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Year', 'Sales'],
      ['2010',  1000.31],
      ['2011',  1170.68],
      ['2012',  660]
    ]);

    var options = {

    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

</script>

However, I am trying to populate the chart values using data from MySQL. How do I get this to work?

$arr = array('Year' => 'Sales', '2010' => 1000.31, '2011' => 1170.68, '2012' => 660);
$chart_data = json_encode($arr);

<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);

  function drawChart() {

    var data = google.visualization.DataTable(<?php echo $chart_data ?>);

    var options = {

    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }
</script>

Basically, I am creating a PHP array from a MySQL result and trying to display its contents in the Google chart.