谷歌饼图php mysql

Question

**

I used Google Pie chart using PHP MySQL. If I put my mouse on the chart it only shows 2 column data from the row. But there are three columns in that table & I want to show all the columns from the row. I have written this code to show 3rd column but it doesn't work.

**

var data = google.visualization.arrayToDataTable([
            ['Problems', 'Sufferer', 'Solutions'],

            <?php

            while($row = $res->fetch_assoc()){
                echo "['".$row['Problems']."',".$row['sum(Sufferer)'].", '".$row['Solutions']."'],";
            }

            ?>

        ]);

How can I solve this problem? picture of my Pie Chart output example

Answer 1

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>