javascript - how to change the text 'no data' in google pie chart - Stack Overflow

admin管理员组

文章数量:1022580

if i am passing empty data for chart binding it shows 'no data' i need to change the text 'no data' to some other word.

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day']

    ]);

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

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }

if i am passing empty data for chart binding it shows 'no data' i need to change the text 'no data' to some other word.

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day']

    ]);

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

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }

• javascript
• jquery
• google-visualization

Share Improve this question Follow asked Dec 9, 2014 at 13:50 arunarun 31966 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can do it manually:

if(data.getNumberOfRows() == 0){
    $("#piechart").append("Sorry, not info available")
}else{
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);        
}

As juvian said data.getNuberOfRows() is in the plugin, so if you are good with jquery you can even replace " $("#piechart").append("Sorry, not info available")" with an image for example

if (data.getNumberOfRows() == 0) {

   $("#someimage").attr("src","url-to-image");//Or any jquery dom manipulation here

} else {

var chart = new 
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);        
}

You could replace text in SVG after chart drawing

chart.draw(data, options);
if (data.getNumberOfRows() == 0) {
    $("#piechart").find("svg text").text("Your text")
}

I found a solution on newbedev. and here is how I had to modify it.

var data = [ [ 'Label', 'Count' ] ];
var options = { sliceVisibilityThreshold: 0 };

// add your data to the array.

if (data.length == 1) {
    data.push(['', 0]);
    options.sliceVisibilityThreshold = 0.01;
}

var chartData = google.visualization.arrayToDataTable(this.data);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(chartData, options);

The sliceVisibilityThreshold determines when a slice will be visible on its own within the chart. If it is set to zero, then all slices show. Ensuring the threshold is greater than zero and having at least one entry set to zero is the key. The single slice will not be visible, the legend will not display, and the "No data" message is gone.

if i am passing empty data for chart binding it shows 'no data' i need to change the text 'no data' to some other word.

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day']

    ]);

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

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }

if i am passing empty data for chart binding it shows 'no data' i need to change the text 'no data' to some other word.

  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day']

    ]);

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

    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }

• javascript
• jquery
• google-visualization

Share Improve this question Follow asked Dec 9, 2014 at 13:50 arunarun 31966 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

You can do it manually:

if(data.getNumberOfRows() == 0){
    $("#piechart").append("Sorry, not info available")
}else{
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);        
}

As juvian said data.getNuberOfRows() is in the plugin, so if you are good with jquery you can even replace " $("#piechart").append("Sorry, not info available")" with an image for example

if (data.getNumberOfRows() == 0) {

   $("#someimage").attr("src","url-to-image");//Or any jquery dom manipulation here

} else {

var chart = new 
google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(data, options);        
}

You could replace text in SVG after chart drawing

chart.draw(data, options);
if (data.getNumberOfRows() == 0) {
    $("#piechart").find("svg text").text("Your text")
}

I found a solution on newbedev. and here is how I had to modify it.

var data = [ [ 'Label', 'Count' ] ];
var options = { sliceVisibilityThreshold: 0 };

// add your data to the array.

if (data.length == 1) {
    data.push(['', 0]);
    options.sliceVisibilityThreshold = 0.01;
}

var chartData = google.visualization.arrayToDataTable(this.data);
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(chartData, options);

The sliceVisibilityThreshold determines when a slice will be visible on its own within the chart. If it is set to zero, then all slices show. Ensuring the threshold is greater than zero and having at least one entry set to zero is the key. The single slice will not be visible, the legend will not display, and the "No data" message is gone.

本文标签： javascripthow to change the text 39no data39 in google pie chartStack Overflow