Google Dynamic Chart not loading data using JSON - mysql

Question

I am trying to make a dynamic google chart using information from MYSQL DB, I have to pages one draws the information from the DB using json and the other should use the information and create the chart
$query = "SELECT * FROM woodford_fuel";
$result = $conn->query($query);
$jsonArray = array();
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$jsonArrayItem = array();
$jsonArrayItem['label'] = $row['reg'];
$jsonArrayItem['value1'] = $row['consump_100'];
array_push($jsonArray, $jsonArrayItem);
}
}
$conn->close();
header('Content-type: application/json');
echo json_encode($jsonArray);
With this I get the following Result, the values I am getting is correct
[{"label":"ND230819","value1":"50.55"},{"label":"ND866941","value1":"51.15"}]
I am trying to load the Chart with the following script
function drawLineChart() {
$.ajax({
url: "chart_data.php",
dataType: "json",
type: "GET",
contentType: "application/json; charset=utf-8",
success: function (data) {
var arrSales = [['label', 'value1']]; // Define an array and assign columns for the chart.
// Loop through each data and populate the array.
$.each(data, function (label, value1) {
arrSales.push([value.label, value.value1]);
});
// Set chart Options.
var options = {
title: 'Average Consumption',
curveType: 'function',
legend: { position: 'bottom', textStyle: { color: '#555', fontSize: 14} } // You can position the legend on 'top' or at the 'bottom'.
};
// Create DataTable and add the array to it.
var figures = google.visualization.arrayToDataTable(arrSales)
// Define the chart type (LineChart) and the container (a DIV in our case).
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(figures, options); // Draw the chart with Options.
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert('Got an Error');
}
});
}
It is not showing me any chart at all