eCampus: Table-2-PieChart

by Vikram Deshmukh

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div class="'chart-container dashboard">
  <div class="chart pie-chart" data-dashboard-size="5">
    <h3 class="chart-title">Technology equipment used to access canvas</h3>
    <table class="chart-data" border="1">
      <thead>
        <tr>
          <th>Equipment</th>
          <th>Distribution</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Smartphone</td>
          <td>59</td>
        </tr>
        <tr>
          <td>Laptop</td>
          <td>93</td>
        </tr>
        <tr>
          <td>Tablet</td>
          <td>25</td>
        </tr>
        <tr>
          <td>Desktop</td>
          <td>33</td>
        </tr>
        <tr>
          <td>Lab</td>
          <td>12</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS

.chart {
  width: 390px;
  height: 390px;
  background: steelblue;
}

JavaScript

google.charts.load("current", {
  packages: ["corechart"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
	// Pie Chart================================
  var pieChart = (function() {
    function getParseData(dataTarget) {
      var data = [];
      var temp = [];
      $(dataTarget).find(".chart-data tr th").each(function() {
        temp.push($(this).text());
      });
      data.push(temp);
      $(dataTarget).find(".chart-data tbody tr").each(function() {
        var temp = [];
        $(this).find("td").each(function() {
          temp.push(temp.length ? Number($(this).text()) : $(this).text());
        });
        data.push(temp);
      });
      return data;
    }
    return {
      render: function(target) {
        var data = getParseData(target);
        console.log(data);
        data = google.visualization.arrayToDataTable(data);

        var options = {
          backgroundColor: 'transparent',
          title: 'My Daily Activities',
          is3D: false,
          titlePosition: 'none',
          legend: {
            position: "none"
          }
        };

        var chart = new google.visualization.PieChart($(target).get(0));
        chart.draw(data, options);
      },
      clear: function() {
        console.log("yet to implement");
      }
    }
  })();
	// Pie Chart end ================================
  
  
	//	Chart handlers
	pieChart.render(".chart.pie-chart");

}