CODEWITHSUNDEEP
jsongoogle-visualization
Dexter
Dexter

Reputation: 1178

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!

Upvotes: 0

Views: 3502

Answers (2)

Ontares
Ontares

Reputation: 1

The json file must be formatted like as follow:

{
  cols: [
    { label: "label", type: "string" },
    { label: "open", type: "number" },
    { label: "high", type: "number" },
    { label: "low", type: "number" },
    { label: "close", type: "number" },
  ],
  rows: [
    { c: [{ v: "Luna" }, { v: 0 }, { v: 0 }, { v: 100 }, { v: 100 }] },
    { c: [{ v: "Marte" }, { v: 0 }, { v: 0 }, { v: 150 }, { v: 150 }] },
    { c: [{ v: "Mercurio" }, { v: 0 }, { v: 0 }, { v: 200 }, { v: 200 }] },
    { c: [{ v: "Giove" }, { v: 0 }, { v: 0 }, { v: 250 }, { v: 250 }] },
    { c: [{ v: "Venere" }, { v: 0 }, { v: 0 }, { v: 250 }, { v: 500 }] },
    { c: [{ v: "Saturno" }, { v: 0 }, { v: 0 }, { v: 250 }, { v: 700 }] },
    { c: [{ v: "Sole" }, { v: 0 }, { v: 0 }, { v: 250 }, { v: 1200 }] },
  ],
};

Upvotes: 0

Tamkeen
Tamkeen

Reputation: 448

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

Upvotes: 1

Related Questions