json to javascript - google charts

Question

In the past I have used the following method to parse the json data appropriately so I can populate a select box:

var request = null;

request = $.ajax({
  type: "POST",
  url: "url goes here",
  dataType: 'text',
  success: function(returned) {
    returned = JSON.parse(returned)

    $.each(returned, function(selectid, item) {
      var sel = $("#" + selectid).get(0);
      sel.options.length = 0;

      $.each(item, function(i, subitem) {
        sel.options[i] = new Option(subitem.text, subitem.value);
      });
    });
    request = null;
  }
});

How do I apply the same technique to the code below, but without a select box, just parse the json into the drawChart function?

$.ajax({
  url: 'chart_json.aspx',
  type: 'POST',
  dataType: 'text',
  success: function(data) {
    drawChart(data);
  }
});

Sinan · Accepted Answer · 2010-07-16 11:35:50Z

4

I think your problem lies in your ajax response, i'd do the following:

in your response:

{ 
  graphData : [
    ['user1',{v:0.00, f:'0.00'}],
    ['user2',{v:0.00, f:'0.00'}],
    ['user3',{v:0.00, f:'0.00'}],
    ['user4',{v:0.00, f:'0.00'}],
    ['user5',{v:0.00, f:'0.00'}]
  ],
  status : "ok"
}

in your js:

$.ajax({
  url: 'get_json.aspx',
  type: 'POST',
  dataType: 'json',//this is important
  success: function(data) {
    //this is not vital, but it's nice to check the response
    if(typeof data === "object" && data.status === "ok"){
        graphData = data.graphData;
        drawVisualization(graphData);
    }
  }
});

Hope this helps, Sinan.

answered Jul 16, 2010 at 11:35

Sinan

11.5k7 gold badges39 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

oshirowanen Over a year ago

I have just tried this, and I am still getting a blank page. I have updated my question to show the full script and what the json data looks like now.

oshirowanen Over a year ago

Going to lunch. Back in a bit.

oshirowanen Over a year ago

I have a follow-up question here: stackoverflow.com/questions/3266505/google-chart-formatting. It is just a slight change of the existing code and hopefully something which can be done quickly

sje397 · Accepted Answer · 2010-07-16 11:58:31Z

3

$.ajax({
  url: 'get_json.aspx',
  type: 'POST',
  dataType: 'json', // as noted by Sinan
  success: function(data) {
    drawVisualization(data);
  }
});

function drawVisualization(serverData) {
    var chartData = [];
    for(var i = 0; i < serverData.length; i++) {
      chartData.push([serverData[i][0], serverData[i][1].v]);
    }
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'WIP');
    data.addColumn('number', 'Percentage');
    data.addRows(chartData);
    new google.visualization.PieChart(document.getElementById('visualization')).draw(data, {width: 400, height: 240, is3D:true});     
}

The chartData array needs to have 2 columns (since you call addColumn twice on the google.visualization.DataTable) with a string and a number in each row.

Example here

edited Jul 16, 2010 at 11:58

answered Jul 16, 2010 at 10:40

sje397

41.9k9 gold badges90 silver badges106 bronze badges

14 Comments

oshirowanen Over a year ago

Hi, Thanks for the reply. I have updated the question above in response to your answer. Basically I get a blank page with an error and I have corrected the json data issue you pointed out.

oshirowanen Over a year ago

I have moved google.load out of the document.ready section, and I am now getting the following error: Argument given to addRows must be either a number or an array Line:

sje397 Over a year ago

The array you pass in to addRows needs to be organised according to how you called 'addColumn' on the dataTable. I've updated my answer.

oshirowanen Over a year ago

Thanks. I am no longer getting any errors, but I am getting a blank page. Viewing the pages source, it just contains the following line: <script src="google.com/uds/…" type="text/javascript"></script>楶 I have updated my question.

oshirowanen Over a year ago

I have a follow-up question here: stackoverflow.com/questions/3266505/google-chart-formatting. It is just a slight change of the existing code and hopefully something which can be done quickly

|

Collectives™ on Stack Overflow

json to javascript - google charts

2 Answers 2

3 Comments

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related