[Chartjs]-Google Pie Chart php mysql

by

2👍

Google Pie chart only supports 2 columns refer Google Pie Chart

The first one is the slice label and the second one is the slice value.

If you wish to add more information to your chart, you can make use of the tooltip which is displayed on hover.

For more information on columns and roles, refer Column Roles

By default only the slice label and slice value with percentage will be shown in the tooltip of the chart.

This can be customized by passing data in the below format

Data format

    var data = google.visualization.arrayToDataTable([
      ['Pizza', 'Popularity', {type:'string', role:'tooltip'}],
      ['Pepperoni', 33, "Most popular"],
    ]);

If you wish to customize the rendering of the tooltip, it can be achieved by passing HTML data as the content of the tooltip.

For more information on tooltips and customizing HTML content, refer Tooltips

Example

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

function drawChart() {
  var data = google.visualization.arrayToDataTable([
    ['Pizza', 'Popularity', {type:'string', role:'tooltip'}],
    ['Pepperoni', 33, "Most popular"],
    ['Hawaiian', 26, "Popular"],
    ['Mushroom', 22, "Somewhat popular"],
    ['Sausage', 10, "Less popular"]
  ]);
  
  var options = {
    title: 'Pizza Popularity'
  };

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

  chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart" style="width: 900px; height: 500px;"></div>

Leave a comment