Невозможно отобразить диаграмму Google - PullRequest
Новая
       7

Невозможно отобразить диаграмму Google

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

У меня есть таблица в базе данных, из которой я получаю оценки одного конкретного студента по всем 5 предметам. Для Google Charts я читаю имя субъекта из CSV, из которого я уже заполнил таблицу базы данных. Я передаю имя субъекта и метки как объект JSON методу успеха ajax. Но я не могу получить график на экране.

Я уже пробовал отлаживать код. Но это все еще не работает. 

<?php
    $conn = mysqli_connect("localhost","root","","marks");
    $query = "select name from tblMarks";
    $result = mysqli_query($conn, $query);
?>
<!DOCTYPE html>
<html>
<head>
    <title>Graphs</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div class="container-fluid">
        <center>
        <div class="panel panel-default panel-heading">
            <h5>Choices</h5>
            <select name="name" class="from-control" id="name">
                <option value="">Select Name</option>
                <?php
                    foreach ($result as $row) {
                        echo "<option value=".$row['name'].">".$row['name']."</option>";
                    }

                ?>
            </select>
            <select name="subject" class="from-control" id="subject">
                <option value="">Select Subject</option>
                <?php
                    $handle = fopen("./upload/1.csv","r");
                    $fields = fgetcsv($handle);
                    foreach ($fields as $row){
                        if($row != 'Fields'){
                            $row = substr($row,0,strpos($row, "~"));
                            echo "<option value=".$row.">".$row."</option>";
                        }
                    }
                ?>
            </select>
        </div>
        </center>
        <div class="panel-body">
            <div id=chart-area" style="width:1000px;height:620px;"></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 loadnamewisedata(name, title){
        var temp_tile = title;
        $.ajax({
            url:"fetch.php",
            method:"POST",
            data:{name:name},
            dataType:"JSON",
            success:function(data){
                drawNameWiseChart(data, temp_tile);
            }
        });
    }
    function drawNameWiseChart(chart_data, chart_main_title){
        var jsonData = chart_data;
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Subject');
        data.addColumn('number', 'Marks');
        $.each(jsonData, function(i, jsonData){
            var subject = jsonData.subject;
            var marks = parseFloat($.trim(jsonData.marks));
            data.addRows([[subject, marks]])
        });
        var options={
            title:chart_main_title,
            hAxis:{
                title:"Subject"
            },
            vAxis:{
                title: "Marks"
            }
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_area'));
        chart.draw(data, options);
    }
</script>

<script type="text/javascript">
    $("#name").change(function(){
        document.getElementById("subject").selectedIndex = 0;
        var name = $(this).val();
        if(name != ""){
            loadnamewisedata(name, name);
        }
    });
    $("#subject").change(function(){
        document.getElementById("name").selectedIndex = 0;
    });
</script>

fetch.php 

<?php
$output = [];
include('dbc.php');
if(isset($_POST["name"])){
    $query = "select * from tblMarks where name='".$_POST["name"]."'";
    $result = mysqli_query($query);
    $handle = fopen("./upload/1.csv","r");
    $fields = fgetcsv($handle);
    $subArr = [];
    $i = 0;
    foreach ($fields as $row){
        if($row != 'Fields'){
            $row = substr($row,0,strpos($row, "~"));
            $subArr[$i] = $row;
            $i = $i + 1;
        }
    }
    $j = 0;
    while($row = mysqli_fetch_array($result)){
        while($j < count(subArr)){
            $output[] = array(
                'subject' => subArr[$j],
                'marks' => floatval($row[subArr[$j]])
            );
        }
    }
    echo $output;
}
?>

dbc.php 

<?php
    $conn = mysqli_connect("localhost","root","","marks");
?>

Я ожидаю, что результатом будет столбчатая диаграмма, но я ничего не вижу.

...