<html><head><title>column chart</title>
<!--Load the AJAX API-->
<?php
// http://www.thaiall.com/php/google_ajax_api_column.htm
if(isset($_GET["sam"]) && $_GET["sam"] == "2") {
$title = "Density of Precious Metals, in g/cm^3";
$ar = array('["Copper", 8.94, "#b87333"]','["Silver", 10.49, "silver"]','["Gold", 19.30, "gold"]','["Platinum", 21.45, "color: #e5e4e2"]');
} else {
$title = "GPA";
$ar = array('["63/1", 3.3, "#ffffdd"]','["63/2", 2.9, "#ddddff"]','["64/1", 3.11, "gold"]','["64/2", 3.51, "color: gray"]','["65/1", 3.53, "color: red"]');
}
?>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
["Element", "Density", { role: "style" } ],
<?php echo join(",",$ar); ?>
]);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: "stringify",
sourceColumn: 1,
type: "string",
role: "annotation"
},2]);
var options = {
title: "<?php echo $title; ?>",
width: 600,
height: 400,
bar: {groupWidth: "95%"},
legend: { position: "none" },
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
</script>
</head>
<body style="background-color:yellow">
<center>
<br/><a href="google_ajax_api_column.htm">google_ajax_api_column.htm</a>
<br/><a href="google_ajax_api_column.txt">google_ajax_api_column.txt</a>
<br/><a href="google_ajax_api_column.php?sam=1">google_ajax_api_column.php?sam=1</a>
<br/><a href="google_ajax_api_column.php?sam=2">google_ajax_api_column.php?sam=2</a>
</center>
<div id="columnchart_values" style="margin:auto; width: 600px; height: 400px;"></div>
</body>
</html>