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...

  var data = 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']
});

function drawPiechartblank() {
  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 data
    pieSliceText: 'value',
    // default text style is white
    // won't show in center unless change color
    pieSliceTextStyle: {
      color: '#9e9e9e'
    },
    tooltip: {
      trigger: 'none'
    }
  };

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

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="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...

<div style="border: 0px solid rgb(201, 0, 1); overflow: hidden; margin: 15px auto; max-width: 100%;">
<script src="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" chart
    drawPiechartblank();
  },
  packages: ['corechart']
});

function loadData() {
  $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;
    }
  });
}

function createPiechartthree(){
  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++;
        }
        else if(value === "4. Medium High Risk"){
          mediumHighRiskCategory1++;
        }
        else if(value === "3. Medium Risk"){
          mediumRiskCategory1++;
        }
        else if(value === "2. Medium Low Risk"){
          mediumLowRiskCategory1++;
        }
        else if(value === "1. Low Risk"){
          lowRiskCategory1++;
        }
      }
    });
  });

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

function drawPiechartthree(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 highlight
      bottom: 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 = '';
      }
      else if(topping === 'Medium High Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium Risk'){
        window.location.href = '';
      }
      else if(topping === 'Medium Low Risk'){
        window.location.href = '';
      }
      else if(topping === 'Low Risk'){
        window.location.href = '';
      }
    }
  }
  google.visualization.events.addListener(chart, 'select', selectHandler);
}

function drawPiechartblank() {
  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 data
    pieSliceText: 'value',
    // default text style is white
    // won't show in center unless change color
    pieSliceTextStyle: {
      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 draw
    if (firstDraw) {
      firstDraw = false;
      loadData();
    }
  });
  chart.draw(data, options);
}
</script>
<div id="Piechartthree_div" style="width: 100%; height: ; position:relative;"><img alt="" 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.

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

this only changes the load statement...