Pie Chart.JS Test

by Ricardo Zambon

HTML

<script src="https://rawgit.com/chartjs/Chart.js/master/dist/Chart.bundle.min.js"></script>
<div id="divGraficoPlanoAcao">
  <div id="divGraficoPlanoAcao">
    <canvas></canvas>
  </div>
  <div id="legend"></div>
</div>

CSS

#divGraficoPlanoAcao {
  border: 1px solid #8ba0bc;
  height: 212px;
}

#divGraficoPlanoAcao canvas {
  width: 100%;
}

#chartjs-tooltip {
  opacity: 0;
  position: absolute;
  background: rgba(0, 0, 0, .7);
  color: white;
  padding: 3px;
  border-radius: 3px;
  -webkit-transition: all .1s ease;
  transition: all .1s ease;
  pointer-events: none;
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

JavaScript

var Chart1;

function CreateChart(datasets) {
  //alert('Creating the chart.');
  try {
    var config = {
      type: 'pie',
      data: datasets,
      options: {
        responsive: true,
        legend: {
          position: 'bottom',
          labels: {
            fontSize: 10,
            padding: 5
          },
          //onClick: function(event, legendItem) {
          //  var index = legendItem.index;
          //  var chart = Chart1;
          //  var i, ilen, meta;

          //  for (i = 0, ilen = (chart.data.datasets || []).length; i < ilen; ++i) {
          //    meta = chart.getDatasetMeta(i);
          //    meta.data[index].hidden = !meta.data[index].hidden;
          //  }

          //  chart.update();
          //}
        },
        tooltips: {
          mode: 'label',
          callbacks: {
            title: function(tooltipItem, data) {
              return data.labels[tooltipItem[0].index];
            },
            label: function(tooltipItem, data) {
              var amount = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
              var total = eval(data.datasets[tooltipItem.datasetIndex].data.join("+"));
              
              var chart = Chart1;
            	var i, ilen;
            	for (i = 0, ilen = (chart.data.datasets[tooltipItem.datasetIndex].data || []).length; i < ilen; ++i)
              	if (Chart1.getDatasetMeta(tooltipItem.datasetIndex).data[i].hidden)
              		total -= data.datasets[tooltipItem.datasetIndex].data[i];
                  
              return amount + ' / ' + total + ' ( ' + parseFloat(amount * 100 / total).toFixed(1) + '% )';
            },
            //footer: function(tooltipItem, data) { return 'Total: 100 planos.'; }
          }
        },
        hover: {
          mode: 'label'
        }
      }
    };

    Chart1 = new Chart($("#divGraficoPlanoAcao canvas"), config);
  } catch (exception) {
    alert(exception.message);
  }
}

function InsertDataFromJSON() {
 ...