CODEWITHSUNDEEP
javascriptphpchartsgoogle-visualization
Mira
Mira

Reputation: 49

Google charts Pie without data

I'm trying to use Google charts in my Polls' website. Everything works fine, until I have no votes to show ( for example, no one has answered the question). The chart doesn't even appear, as you can see in this example: http://jsfiddle.net/au9prxsg/3/

google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     0],
      ['Eat',      0],
      ['Commute',  0],
      ['Watch TV', 0],
      ['Sleep',    0]
    ]);

    var options = {
      title: 'My Daily Activities',
         sliceVisibilityThreshold: 0
    };

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));

    chart.draw(data, options);
  }

enter image description here

I even put the property sliceVisibilityThreshold: 0. Is it possible to have a pie chart with any data?

Upvotes: 0

Views: 1025

Answers (3)

AWaddington
AWaddington

Reputation: 802

You could test the dataTable to see if responses exist, then adjust what you display accordingly. 

google.setOnLoadCallback(drawChart);
  function drawChart() {

    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['Work',     0],
      ['Eat',      0],
      ['Commute',  0],
      ['Watch TV', 0],
      ['Sleep',    0]
    ]);

    if(hasResponses(data, 1){
      ...
      [build your options array and draw you chart]
      ...
      }else{
      ...
      [display something else instead of the chart (i.e., a graphic or text indicating that the question has no responses).]
      }
  }


function hasResponses(datasource, column){
  var sumValues = 0;
  for(var i = 0; i < datasource.getNumberOfRows(); ++i) {
    sumValues = sumValues + datasource.getValue(column, i);
    }
  if(sumValues > 0){
    return true;
    }else{
    return false;
    }
  }

This assumes that every respondent will provide a value > 0 for at least one activity (work, sleep, etc.), if not then the data collection (survey) should have a catch-all category (i.e., "other", etc.) that would allow you to force response to the question without affecting the integrity of the response.

Assuming your data is coming from some other database (not manually entered into javascript), a faster, simpler method may involve counting the number of responses in your data set before building your datatable in javascript. Then, using a similar logic as above, display an alternative message if less than one response exists.

Upvotes: 0

toto21
toto21

Reputation: 612

Change perspective

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     0],
          ['Eat',      0],
          ['Commute',  0],
          ['Watch TV', 0],
          ['Sleep',    0],
          ['No activities or no response',    24]
        ]);

or 

var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work no response',     4.8],
          ['Eat no response',     4.8],
          ['Commute no response',     4.8],
          ['Watch TV no response',     4.8],
          ['Sleep no response',     4.8]
        ]);

Upvotes: 1

Ekansh Rastogi
Ekansh Rastogi

Reputation: 2546

JS Fiddle

Works fine for me ? what is the error

Add the js in the external js section, and just copy the url there, it works

Upvotes: 0

Related Questions