Search code examples
javascriptchartsgoogle-visualizationpie-chart

How to set a Percentage of an Amount of work done using Google Charts

I've look over all the documentation and i cannot find where is specifically documents what type of data to pass to the pie chart to show what slice of a percentage is an amount that still needs work done when considering the pie is a whole of 100%.

Lets say we've got these following task. 1. Database 2. Front end 3. Web Design

Database is 45% done Front end is 35% done Web Design is 60 percent done.

I am able to pass percentages and decimals to the data table but I am getting lost when they're passing in number of 1, 3, 2 and so on.

The goal is for investors to see the amount of work left to do in the pie chart, how should i do this by working with decimals or percentages?

I might not be asking the correctly because if the amount of work left to be done when starting at 100% would not work.

How is it that i can display to the investor based on about 10 slices that make up 100% of the work to do, and what data should i pass to this type of pie?

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

So, once again i would like to use a pie chart for investors to look at to see an amount of work done.

Here is my fiddler.

Check Fiddler

Solution

  • see following working snippet...

    google.charts.load('current', {
  callback: function () {
    drawChart('Database', 45);
    drawChart('Front-end', 35);
    drawChart('Web Design', 60);
  },
  packages:['corechart']
});

function drawChart(task, complete) {
  var data = google.visualization.arrayToDataTable([
    ['Task', task],
    ['Complete', complete],
    ['Remaining', 100 - complete]
  ]);

  var options = {
    title: task,
    pieHole: 0.3
  };

  var container = document.body.appendChild(document.createElement('div'));
  var chart = new google.visualization.PieChart(container);
  chart.draw(data, options);
}
    <script src="https://www.gstatic.com/charts/loader.js"></script>