SE- Key Section - Demo

An example of a Google Pie Chart.

by Bunlong Heng

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<div class="row" style=" margin-right: 15px; margin-left: 15px;" >
    <div class="col-xs-3">
        <div id="piechart"></div>
    </div>
    <div class="col-xs-9">
        <table class="table table-bordered piechart-key ">

            <thead >
                <th></th>
                <th></th>
                <th> Item Summary</th>
                <th> Item List</th>

            </thead>
            <tbody>
                <tr>
                    <td width="30"></td>
                    <td width="200">
                        &gt; 50% of students answered these items correctly
                    </td>
                    <td width="50">5/25</td>
                    <td width="100">5,10,15,19,23</td>
                </tr>
                <tr>
                    <td width="30"></td>
                    <td width="200">50% up to 75% of students answered these items correctly</td>
                    <td width="50">8/25</td>
                    <td width="100">3,7,11,13,14,16,21,22</td>
                </tr>
                <tr>
                    <td width="30"></td>
                    <td width="200">&ge; 75% of students answered these items correctly</td>
                    <td width="50">12/25</td>
                    <td width="100">1,2,4,6,8,9,12,17,18,20,24,25</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<hr style="height:5pt; visibility:hidden;" />

CSS

.piechart-key.table,
.piechart-key .table td {
  margin-top: 40px;
  font-size: 12px;
}
.piechart-key tr:first-child > td:first-child {
  background-color: #F46E4E;
}
.piechart-key tr:first-child + tr > td:first-child {
  background-color: #F9C262;
}
.piechart-key tr:first-child + tr + tr > td:first-child {
  background-color: #ADB55E;
}
.piechart-key th:first-child {
  border-right: #F9F9F9 1px solid;
}
.piechart-key td:first-child + td + td {
  text-align: center;
}
.piechart-key th {
  background-color: #F9F9F9;
  border-bottom: none;
  font-size: 14px;
  color: #293644;
  font-style: normal;
}
#piechart {
  width: 90%;
}

.table {
    border: red solid 1px !important;
}

JavaScript

google.setOnLoadCallback(drawChart);

      function drawChart() {

          var data = google.visualization.arrayToDataTable([
              ['Task', 'Hours per Day'],
              ['l', 23],
              ['m', 30],
              ['h', 47],

              ]);

          var options = {
              width: 200,
              height: 200,
              chartArea: {
                  left: 10,
                  top: 20,
                  width: "100%",
                  height: "100%"
              },
              colors: ['#F46E4E', '#ADB55E', '#F9C262'],
              legend: 'none',
              enableInteractivity: false,
              pieSliceText: 'none',

          };

          var chart = new google.visualization.PieChart(document.getElementById('piechart'));

          chart.draw(data, options);
      }