Google pie chart with ajax and php not working - php

Question

I am trying to create a google pie chart using ajax and php. But its not working for me. Please anyone help me. The code is given below.
My first page is piechart.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
function get_piechart()
{
$("#std").load("get_piechart.php");
}
</script>
<input type="button" value="piechart" onClick="get_piechart();"/>
<div id="std">
</div>
My ajax page is get_piechart.php
<div id="chart_div" style="width: 900px; height: 500px;"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(load_chart_data);
function load_chart_data() {
$.ajax({
url: 'getData1.php', // provide correct url
type: 'POST',
data: {get_chart: true},
dataType: 'JSON', // <-- since youre expecting JSON
success: function(chart_values) {
console.log(chart_values); // take a peek on the values (browser console)
draw_chart(chart_values); // call your drawing function!
}
});
}
function draw_chart(chart_values) {
var data = google.visualization.arrayToDataTable(chart_values);
var options = {
title: 'Your super chart!',
vAxis: {title: 'Hours Per Day', titleTextStyle: {italic: false}},
hAxis: {title: 'Task', titleTextStyle: {italic: false}},
};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
data file is getData1.php
<?php
if(isset($_POST['get_chart'])) {
$values = array(
array('Task', 'Hours Per Day'),
array('Booking', 11),
array('Pending', 89),
);
echo json_encode($values);
exit;
}
?>
On clicking the piechart button i got the error Uncaught ReferenceError: google is not defined. Please help me to solve this problem