php - Google chart showing blank using JSON -


i've been trying google charts working data on local db. think have got json coming out now.

{     "cols": [         {             "id": "",             "label": "inits",             "pattern": "",             "type": "string"         },         {             "id": "",             "label": "salesval",             "pattern": "",             "type": "number"         }     ],     "rows": [         {             "c": [                 {                     "v": "is",                     "f": null                 },                 {                     "v": "1708.6000",                     "f": null                 }             ]         },         {             "c": [                 {                     "v": "ns",                     "f": null                 },                 {                     "v": "1098.8200",                     "f": null                 }             ]         },         {             "c": [                 {                     "v": "rc",                     "f": null                 },                 {                     "v": "458.8200",                     "f": null                 }             ]         }     ] } 

and i'm using html.

<html>   <head>     <!--load ajax api-->     <script type="text/javascript" src="https://www.google.com/jsapi"></script>     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>     <script type="text/javascript">      // load visualization api , piechart package.     google.load('visualization', '1', {'packages':['corechart']});      // set callback run when google visualization api loaded.     google.setonloadcallback(drawchart);      function drawchart() {       var jsondata = $.ajax({           url: "getdata.php",           datatype:"json",           async: false           }).responsetext;        // create our data table out of json data loaded server.       var data = new google.visualization.datatable(jsondata);        // instantiate , draw our chart, passing in options.       var chart = new google.visualization.piechart(document.getelementbyid('chart_div'));       chart.draw(data, {width: 400, height: 240});     }      </script>   </head>    <body>     <!--div hold pie chart-->     <div id="chart_div"></div>   </body> </html> 

i've gone on few times , can't see going wrong.

it occurs since salesval column of number type cells contain string values.

according format of constructor's javascript literal data parameter:

type [required] data type of data in column. supports following string values (examples include v: property, described later):

  • 'number' - javascript number value. example values: v:7 , v:3.14, v:-55

having said consider following options:

option 1. modify getdata.php endpoint return valid json data google.visualization.datatable:

"v": "1708.6000" //invalid (current)  "v": 1708.6000   //valid 

option 2

ensure data column of number type contain javascript number value demonstrated below:

example

var jsondata = {      "cols": [          {              "id": "",              "label": "inits",              "pattern": "",              "type": "string"          },          {              "id": "",              "label": "salesval",              "pattern": "",              "type": "number"          }      ],      "rows": [          {              "c": [                  {                      "v": "is",                      "f": null                  },                  {                      "v": "1708.6000",                      "f": null                  }              ]          },          {              "c": [                  {                      "v": "ns",                      "f": null                  },                  {                      "v": "1098.8200",                      "f": null                  }              ]          },          {              "c": [                  {                      "v": "rc",                      "f": null                  },                  {                      "v": "458.8200",                      "f": null                  }              ]          }      ]  };      google.load('visualization', '1', { 'packages': ['corechart'] });  google.setonloadcallback(drawchart);    function drawchart() {      var data = new google.visualization.datatable(preparejsondata(jsondata));      var chart = new google.visualization.piechart(document.getelementbyid('chart_div'));      chart.draw(data, { width: 400, height: 240 });  }    function preparejsondata(json) {      json.rows.foreach(function(row) {          row.c[1].v = parsefloat(row.c[1].v);  //ensure number cell value       });      return json;  }
<script type="text/javascript" src="https://www.google.com/jsapi"></script>  <div id="chart_div"></div>


Comments

Popular posts from this blog

Java 3D LWJGL collision -

spring - SubProtocolWebSocketHandler - No handlers -

methods - python can't use function in submodule -