January 19, 2012

Tutorial: Update Google Charts Candlestick with a button

To update you Google Chart Candlestick with a button, you need to add this code block at the end of the drawVisialization function if you follow this code layout: code.google.com/apis/chart/interactive/docs/gallery/candlestickchart.html

//This is the button
<input type="button" value="Next day" id="next_day" />

//This is the end of the original javascript function, put the new code block after this line
chart.draw(data, options);

//This is the code block you need
document.getElementById('next_day').onclick = function () {

//This is the new array, it replaces the original array
var dataArray = [["", 31, 38, 55, 66]];

var data = google.visualization.arrayToDataTable(dataArray, true);

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

January 18, 2012

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>


//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
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

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

//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

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

echo 'var dataArray = [';

while($row <= $number_of_rows) {

echo '["",'.

$row = $row + 1;


echo '];';