JSON Output for Google Candlestick Chart (AJAX Update)

I'm trying to implement the Candlestick Google Chart, but I want to be able to reload the chart with different data using AJAX. I copied some code from the samples Google provides but I'm missing something - I think it has to do with improperly formatted JSON. Here's my calling code:

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      // Load the Visualization API and the piechart package.
    google.load('visualization', '1', {'packages':['corechart']});

    // Set a callback to run when the Google Visualization API is loaded.
    google.setOnLoadCallback(drawChart);

      function drawChart() {
      var jsonData = $.ajax({
          url: "http://www.mydomain.com/chart_data.php",
          dataType:"json",
          async: false
          }).responseText;

      // Create our data table out of JSON data loaded from server.
      var data = new google.visualization.DataTable(jsonData);

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
      chart.draw(data, {width: 400, height: 240});
    }


    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    <div style="width: 900px;">
        <div style="float: right;">&gt;&gt;</div>
        <div style="float: left;">&lt;&lt;</div>
    </div>
  </body>
</html>

The chart_data.php looks like this:

{

    "rows": [

        {c:[{v: 'Mon'}, {v: 12634}, {v: 12818.9}, {v: 12695.3}, {v: 12818.9}]},

        {c:[{v: 'Tue'}, {v: 12583.7}, {v: 12694.8}, {v: 12632}, {v: 12795.7}]},

        {c:[{v: 'Wed'}, {v: 12559.6}, {v: 12617.4}, {v: 12598.5}, {v: 12764.7}]},

        {c:[{v: 'Thu'}, {v: 12415.8}, {v: 12598.5}, {v: 12442.5}, {v: 12670.2}]},

        {c:[{v: 'Fri'}, {v: 12309.6}, {v: 12442.9}, {v: 12369.4}, {v: 12539.5}]}

    ]

}

I'm guessing the JSON data is formatted wrong perhaps? But I didn't see any samples on how to populate it for a Candlestick chart.

Any help on this would be GREATLY appreciated. Thank you!

Solution

hope this will hepl you,

// first change google.visualization.DataTable to google.visualization.arrayToDataTable and JSON   format not perfect.

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

      var jsonData = $.ajax({
          url: "chart_data.php",
             contentType:"application/json",
          dataType:"json",
          async: false
          }).responseText;


var array=$.parseJSON( jsonData);
 var data =google.visualization.arrayToDataTable(array,true);


        var options = {width: 400, height: 240};

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


      }

      google.setOnLoadCallback(drawVisualization);
    </script>

The chart_data.php json looks like this:

[["Mon",12634, 12818.9, 12695.3, 12818.9], ["Tue", 12583.7, 12694.8, 12632, 12795.7],["Wed", 12559.6, 12617.4, 12598.5, 12764.7],["Thu", 12415.8, 12598.5, 12442.5, 12670.2],["Fri", 12309.6, 12442.9,12369.4, 12539.5]]

for more see here