Круговая диаграмма с использованием mysql и php

Question

Я использую этот код из Интернета. Но в этом данные статичны, но я хочу нарисовать диаграмму с моими записями в базе данных. можно сказать, у меня, как добавить данные MySQL в этом коде

<div class="hellcontainer"> 
 

 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<dcript type="text/javascript"> 
 
google.load("visualization","1",{packages:["corechar"]}); 
 
google.setOnLoadCallback(drawChart); 
 
function drawChart() 
 
{ 
 
\t var data=google.visualization.arrayToDataTable([ 
 
\t ['Languages','speakers(in millions)'], 
 
\t ['Assamese,13'],['Punjabi',45]]); 
 
\t var options = { 
 
\t \t title:'' 
 
\t }; 
 
\t var chart=new google.visualization.PieChart(document.getElementById('chart_div')); 
 
\t chart.draw(data,options); 
 
\t 
 
} 
 
</script>

Answer 1

Вот примерный код, чтобы сделать это в PHP, вы можете изменить его в соответствии с вашими потребностями:

<?php 
$servername = "localhost"; 
$username = "username"; 
$password = "password"; 
$db = "dbname"; 

$conn = mysqli_connect($servername, $username, $password, $db); // update your connection params 

$query = "SELECT state, lang_number FROM state"; //update your query as needed 

$results = mysqli_query($conn, $query); 
$pieData = array(); 

while ($row = mysqli_fetch_array($results)) { 
    $acc_type = $row ['state']; 
    $acc_num = $row ['lang_number']; 
    $pieData[] = array($row['state'], $row['lang_number']); 
} 
?> 

<div class="hellcontainer"> 
    <div id="chart_div"></div> 
</div> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 

<script type="text/javascript"> 
google.load("visualization","1",{packages:["corechart"]}); 
google.setOnLoadCallback(drawChart); 
function drawChart() 
{ 

    var data = new google.visualization.DataTable(); 
    data.addColumn('string', 'State'); 
    data.addColumn('number', 'speakers(in millions)'); 
    data.addRows(<?php echo json_encode($pieData, JSON_NUMERIC_CHECK); ?>); 

    var options = {'title':'Language spoken', 
          'width':400, 
          'height':300}; 

    var chart=new google.visualization.PieChart(document.getElementById('chart_div')); 
    chart.draw(data,options); 

} 
</script> 

Надеюсь, что помогает.

Answer 2

<div class="hellcontainer"> 
 

 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
 
<dcript type="text/javascript"> 
 
google.load("visualization","1",{packages:["corechar"]}); 
 
google.setOnLoadCallback(drawChart); 
 
function drawChart() 
 
{ 
 
\t var data=google.visualization.arrayToDataTable([ 
 
\t ['Languages','speakers(in millions)'], 
 
\t ['Assamese,13'],['Punjabi',45]]); 
 
\t var options = { 
 
\t \t title:'' 
 
\t }; 
 
\t var chart=new google.visualization.PieChart(document.getElementById('chart_div')); 
 
\t chart.draw(data,options); 
 
\t 
 
} 
 
</script>