Google Charts, PHP und Ajax

Question

Das ist mein HTML:

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.charts.load('current', {'packages':['corechart']}); 
google.charts.setOnLoadCallback(load_chart_data); 

function load_chart_data() { 
$.ajax({ 
    url: "serv.php", 
    type: "POST", 
    dataType: "JSON", 
    data: {get_chart: true}, 
    success: function(chart_values) { 
     draw_chart(chart_values); 
    } 
}); 
} 

function drawChart(chart_values) { 
    var data = google.visualization.arrayToDataTable(chart_values); 

    var options = { 
     title: 'Company Performance', 
     hAxis: {title: 'Year', titleTextStyle: {color: '#333'}}, 
     vAxis: {minValue: 0} 
    }; 

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

</script> 

<div id="chart2"></div> 

und das ist mein serv.php

<?php 

if(isset($_POST['get_chart'])) { 
$values = array(
    array('Task', 'Hours Per Day'), 
    array('Work', 11), 
    array('Eat', 2), 
    array('Commute', 2), 
    array('Watch TV', 2), 
    array('Sleep', 7), 
); 

echo json_encode($values); 
} 
?> 

Dieser Code haben eine Google-Diagramm zu erstellen, aber etwas ist falsch. Bitte, helfen Sie. Interessant zu beachten, dass json arbeitet und das Array von serv.php haben

Answer 1

Ich weiß nicht geladen, warum, aber dieser Code funktioniert (aber es ist ein Linechart - nicht Areachart):

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

function load_chart_data() { 

    $.ajax({ 
     url: 'serv.php', 
     type: 'POST', 
     data: {get_chart: true}, 
     dataType: 'JSON', 
     success: function(chart_values) { 
     draw_chart(chart_values); 
     } 
    }); 
} 

function draw_chart(chart_values) { 
var data = google.visualization.arrayToDataTable(chart_values); 
var options = { 
    title: 'Company Performance', 
    vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}}, 
    hAxis: {title: 'Task', titleTextStyle: {italic: false}}, 
}; 
var chart = new google.visualization.LineChart(document.getElementById('chart2')); 
chart.draw(data, options); 
} 
</script> 

Answer 2

Ihre Antwort auf Erfolg genannt Sie draw_chart Funktion

success: function(chart_values) { 
    draw_chart(chart_values); 
} 

und definiert Sie function drawChart(chart_values) { Es gibt ein diff. zwischen drawChart und draw_chart :)

ist Ihr Diagramm hier: