Создание диаграмм Google с данными MySQL - PullRequest
Новая
       8

Создание диаграмм Google с данными MySQL

0 голосов
/ 20 марта 2019

Мне нужно заполнить диаграммы Google данными MySQL.

Данные выглядят так. 

+----+-------+---------+-------+-----------+---------+------+
| id | name  | physics | maths | chemistry | biology | sst  |
+----+-------+---------+-------+-----------+---------+------+
|  1 | Name1 |      10 |    25 |        35 |      42 |   62 |
|  2 | Name2 |      80 |    45 |        45 |      45 |   25 |
|  3 | Name3 |      63 |    25 |        63 |      36 |   36 |
|  4 | Name4 |      82 |    36 |        75 |      48 |   42 |
|  5 | Name5 |      45 |    45 |        78 |      25 |   24 |
|  6 | Name6 |      36 |    36 |        15 |      75 |   36 |
|  7 | Name7 |      99 |    45 |        24 |      24 |   45 |
|  8 | Name8 |      45 |    85 |        85 |      85 |   96 |
+----+-------+---------+-------+-----------+---------+------+

Мне нужно создать диаграммы Google на основе этого, чтобы

-namewise-когда я выбираю имя, он отображает все метки субъекта с этим конкретным именем на столбчатой ​​диаграмме

-маркиз - при выборе темы он отображает все имена с метками в этой конкретной теме.

, учитывая, что данные могут быть добавлены, и я должен накапливать их также, для именного я сделал 

<?php

include("connection.php");

$query = "SELECT name FROM csv GROUP BY name DESC";

$statement = $connect->prepare($query);

$statement->execute();

$result = $statement->fetchAll();

?>
<!DOCTYPE html>
<html>
<head>
    <title>Google charts</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
    <br /><br />
    <div class="container">
      <div class="panel panel-default">
            <div class="panel-heading">
                <div class="row">
                    <div class="col-md-9">
                        <h3 class="panel-title">Student Wise Marks Data</h3>
                    </div>
                    <div class="col-md-3">
                        <select name="name" class="form-control" id="name">
                            <option value="">Select Student</option>
                        <?php
                        foreach($result as $row)
                        {
                            echo '<option value="'.$row["name"].'">'.$row["name"].'</option>';
                        }
                        ?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div id="chart_area" style="width: 1000px; height: 620px;"></div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" 
src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback();

function load_student_data(name, title)
{
var temp_title = title + ' '+name+'';
$.ajax({
    url:"fetch.php",
    method:"POST",
    data:{name:name},
    dataType:"JSON",
    success:function(data)
    {
        drawStudentwiseChart(data, temp_title);
    }
});
}

function drawStudentwiseChart(chart_data, chart_main_title)
{
var jsonData = chart_data;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Physics');
data.addColumn('number', 'Maths');
data.addColumn('number', 'Chemistry');
data.addColumn('number', 'Biology');
data.addColumn('number', 'SST');
$.each(jsonData, function(i, jsonData){
    var Physics = jsonData.Physics;
    var Maths = jsonData.Maths;
    var Chemistry = jsonData.Chemistry;
    var Biology = jsonData.Biology;
    var SST = jsonData.SST;

    data.addRows([[Physics,Maths,Chemistry,Biology,SST]]);
});
var options = {
    title:chart_main_title,
    hAxis: {
        title: "Subjects"
    },
    vAxis: {
        title: 'Percentage'
    }
};

var chart = new google.visualization.ColumnChart(document.getElementById('chart_area'));
chart.draw(data, options);
}

</script>

<script>

$(document).ready(function(){

$('#name').change(function(){
    var name = $(this).val();
    if(name != '')
    {
        load_student_data(name, 'Student wise marks data');
    }
});

});

</script>

и для получения данных 

// fetch.php

<?php
include('connection.php');
if(isset($_POST["name"]))
{
 $query = "
 SELECT * FROM csv
 WHERE name = '".$_POST["name"]."'
 ORDER BY id ASC
 ";
 $statement = $connect->prepare($query);
 $statement->execute();
 $result = $statement->fetchAll();
 foreach($result as $row)
 {
  $output[] = array(
  'Physics'   => $row["Physics"],
   'Maths'   => $row["Maths"],
   'Chemistry'   => $row["Chemistry"],
   'Biology'   => $row["Biology"],
   'SST'   => $row["SST"],

  );
 }
 echo json_encode($output);
}

?>

он отображает пустоестр.

однако, когда я играю с единичными значениями, т. Е. По одному предмету за раз, отображается нормально

...