Java Script Google Pie Chart: Show An Empty Pie Chart If There Is No Data To Show

I currently have some problems with the google pie charts. I have a pie chart which is finally working and showing me the data in the pie chart. The problem what i have now is tha

Solution 1:

in order to draw a pie chart, google requires at least one row, with a value greater than zero

---

so just hard-code the needed data...

vardata = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    ['', {v: 1, f: 'No Data'}]
  ]);

using a blank string '' for the row label will prevent the legend from showing use the formatted value f: to display text in the center of the pie chart which requires the following options...

// show formatted value from the data
    pieSliceText: 'value',

    // default text style is white// won't show in center unless change color
    pieSliceTextStyle: {
      color: '#9e9e9e'
    },

to make the chart look empty, use transparent as the color and add a border...

    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',

see following working snippet...

google.charts.load('current', {
  callback: drawPiechartblank,
  packages: ['corechart']
});

functiondrawPiechartblank() {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    // blank first column removes legend,// use object notation for formatted value (f:)
    ['', {v: 1, f: 'No Data'}]
  ]);

  var options = {
    chartArea: {
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,
      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',
    // show formatted value from the datapieSliceText: 'value',
    // default text style is white// won't show in center unless change colorpieSliceTextStyle: {
      color: '#9e9e9e'
    },
    tooltip: {
      trigger: 'none'
    }
  };

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

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="Piechartthree_div"></div>

---

to start with an empty chart, load google first, draw the blank chart

// load google first
google.charts.load('current', {
  callback: function() {
    // draw "no data" chart
    drawPiechartblank();
  },
  packages: ['corechart']
});

then wait for the 'ready' event before sending the first request for data...

  google.visualization.events.addListener(chart, 'ready', function () {
    if (firstDraw) {
      firstDraw = false;
      loadData();
    }
  });

---

see following snippet, with notes in comments...

<divstyle="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 100%;"><scriptsrc="https://www.gstatic.com/charts/loader.js"></script><script>var highRiskCategory1 = 0;
var mediumHighRiskCategory1 = 0;
var mediumRiskCategory1 = 0;
var mediumLowRiskCategory1 = 0;
var lowRiskCategory1 = 0;

var xmlURL = "XMLLINK";
var xml;

var firstDraw = true;

// load google first
google.charts.load('current', {
  callback: function () {
    // draw "no data" chartdrawPiechartblank();
  },
  packages: ['corechart']
});

functionloadData() {
  $j.ajax({
    url: xmlURL,
    dataType: 'xml',
    beforeSend: function() {
      $j('#loader').show();
    },
    success: function(data) {
      xml = data;
      $j('#loader').hide();
      createPiechartthree();
    },
    error: function(jqXHR, text) {
      drawPiechartblank();
      return;
    }
  });
}

functioncreatePiechartthree(){
  var columns = {};
  var xmlColumns = $j('head', xml);
  xmlColumns.find('headColumn').each(function() {
    var columnName = $j(this).find('columnValue').text();
    var columnID = $j(this).attr('columnid');
    columns[columnName] = (columnID);
  });

  var xmlData = $j('data', xml);

  xmlData.find('item').each(function() {
    $j(this).find('column').each(function() {
      var colID = $j(this).attr("columnid");
      var value = $j(this).find('displayData').text();

      if(colID == columns["Risk category"]){
        if(value === "5. High Risk"){
          highRiskCategory1++;
        }
        elseif(value === "4. Medium High Risk"){
          mediumHighRiskCategory1++;
        }
        elseif(value === "3. Medium Risk"){
          mediumRiskCategory1++;
        }
        elseif(value === "2. Medium Low Risk"){
          mediumLowRiskCategory1++;
        }
        elseif(value === "1. Low Risk"){
          lowRiskCategory1++;
        }
      }
    });
  });

  // check for dataif ((highRiskCategory1 + mediumHighRiskCategory1 + mediumRiskCategory1 + mediumLowRiskCategory1 + lowRiskCategory1) === 0) {
    drawPiechartblank();
  } else {
    drawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1);
  }
}

functiondrawPiechartthree(highRiskCategory1, mediumHighRiskCategory1, mediumRiskCategory1, mediumLowRiskCategory1, lowRiskCategory1) {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    ['Very low', 0],
    ['High Risk', highRiskCategory1],
    ['Medium High Risk', mediumHighRiskCategory1],
    ['Medium Risk', mediumRiskCategory1],
    ['Medium Low Risk', mediumLowRiskCategory1],
    ['Low Risk', lowRiskCategory1],
    ['Very high',  0]
  ]);

  var options = {
    chartArea: {
      // allow room for selection highlightbottom: 12,
      left: 12,
      right: 12,
      top: 12,

      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['#25b578', '#f05023', '#FF944A', '#F6BD53', '#FFE158', '#6FC968', '#8C8886'],
    slices: {
      2: {offset: 0.02},
      3: {offset: 0.02},
      4: {offset: 0.02},
      5: {offset: 0.02},
    },
  };

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

  var selectHandler = function(e) {
    var selectedItem = chart.getSelection()[0];
    if (selectedItem) {
      var topping = data.getValue(selectedItem.row, 0);
      console.log(topping);
      if(topping === 'High Risk'){
        window.location.href = '';
      }
      elseif(topping === 'Medium High Risk'){
        window.location.href = '';
      }
      elseif(topping === 'Medium Risk'){
        window.location.href = '';
      }
      elseif(topping === 'Medium Low Risk'){
        window.location.href = '';
      }
      elseif(topping === 'Low Risk'){
        window.location.href = '';
      }
    }
  }
  google.visualization.events.addListener(chart, 'select', selectHandler);
}

functiondrawPiechartblank() {
  var data = google.visualization.arrayToDataTable([
    ['Is the counterparty a PEP?', 'Amount'],
    // blank first column removes legend,// use object notation for formatted value (f:)
    ['', {v: 1, f: 'No Data'}]
  ]);

  var options = {
    chartArea: {
      bottom: 12,
      left: 12,
      right: 12,
      top: 12,
      height: '100%',
      width: '100%'
    },
    pieHole: 0.5,
    colors: ['transparent'],
    pieSliceBorderColor: '#9e9e9e',
    // show formatted value from the datapieSliceText: 'value',
    // default text style is white// won't show in center unless change colorpieSliceTextStyle: {
      color: '#9e9e9e'
    },
    tooltip: {
      trigger: 'none'
    }
  };

  var chart = new google.visualization.PieChart(
    document.getElementById('Piechartthree_div')
  );
  google.visualization.events.addListener(chart, 'ready', function () {
    // load data on first drawif (firstDraw) {
      firstDraw = false;
      loadData();
    }
  });
  chart.draw(data, options);
}
</script><divid="Piechartthree_div"style="width: 100%; height: ; position:relative;"><imgalt=""id=""src="./attachment_dw.action?attachmentId=2233"style="width: 80px; height: 80px; display: inline-block;  position:absolute; right:50%; top: 50%;" /></div></div>

---

note: recommend using the newer library loader.js vs. the older jsapi

according to the release notes...

The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader from now on.

<scriptsrc="https://www.gstatic.com/charts/loader.js"></script>

this only changes the load statement...