Tutorial: Connect Google Charts Candlestick with php

This is a tutorial on how to connect Google Charts with php. Google already has a tutorial on this, but it's not enough and it doesn't cover areas such as candlestick charts. You can see that tutorial here: code.google.com/apis/chart/interactive/docs/php_example.html

Page 1. The main page where the chart is shown
This is a candlestick chart as in: code.google.com/apis/chart/interactive/docs/gallery/candlestickchart.html

<!-- This is where the chart is displayed -->
<div id="chart_div" style="width: 900px; height: 500px;"></div>

<!--Load jQuery (needed for $.ajax) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
<!--Load the AJAX API-->
<script src="https://www.google.com/jsapi"></script>

<script>

//Load the Visualization API and the candlestick package. 1.0 is always the current production version
google.load('visualization', '1.0', {packages: ['corechart']});
    
    
function drawVisualization() {

//Get data to the table from php returns dataArray which is a javascript array
$.ajax({
url: "http://www.yoursite.com/getData.php",
dataType: "script",
async: false
});

//Create the data table. 'false' means that the first column is a label column
var data = google.visualization.arrayToDataTable(dataArray, true);

//Set chart options.
var options = {
legend: 'none',
colors: ['green'],
chartArea: {width: '95%', height: '95%'},
enableInteractivity: false,
vAxis: {textPosition: 'none'},
reverseCategories: true
};

//Instantiate an instance of the chart class
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));

//Draw the chart
chart.draw(data, options);

}

//Set a callback to run when the Google Visualization API is loaded. Runs the drawVisualization function
google.setOnLoadCallback(drawVisualization);
    
</script>

Page 2. Get data - getData.php
It only shows the javascript array you need - not how to get the values from a file.

<?php
//This is the basic javascript array you need
echo '
var dataArray = [
["", 20, 28, 38, 45],
["", 31, 38, 55, 66],
["", 31, 38, 55, 66]
];
';
?>

But if you need to combine javascript and php, you can do something like this to get the same result as above

<?php
//Create the javascript array from a php array
$row = 1;

echo 'var dataArray = [';

while($row <= $number_of_rows) {

echo '["",'.
$data_array['low'][$row-1]
.','.
$data_array['open'][$row-1]
.','.
$data_array['close'][$row-1]
.','.
$data_array['high'][$row-1]
.'],
';

$row = $row + 1;

}

echo '];';
?>