- https://developers.google.com/chart/interactive/docs/gallery
- https://developers.google.com/chart/interactive/docs/events
- https://developers.google.com/chart/interactive/docs/basic_interactivity
- https://google-developers.appspot.com/chart/interactive/docs/gallery/table
Let's take the previous example, with pie chart (adding 'pieHole': 0.5 option to get a like-donut pie chart) ; if you would like to add a listener to catch the click event, you will have to add the following code in 'orange' :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>
//https://google-developers.appspot.com/chart/interactive/docs/quick_start
//https://google-developers.appspot.com/chart/interactive/docs/gallery/table
//https://developers.google.com/chart/interactive/docs/gallery
function drawChart() {
var json = $.ajax({
url: "http://localhost/angularjs/get_repartition_order_status_todaygoogle_pie.php?type=graph",
dataType:"json",
async: false
}).responseText;
jsondata = eval(json);
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows(jsondata);
// Set chart options
var options = {'title':'Order Status for today ',
'width':500, 'pieHole': 0.5,
'height':400};
//var options = {'title':'Order Status for today ','width':600, 'pieHole': 0.5,'height':600, 'is3D': true};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
google.visualization.events.addListener(chart, 'select', selectHandler);
// Notice that e is not used or needed.
function selectHandler(e) {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, 0);
alert('The user selected ' + value);
};
}
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="table_div"></div>
</body>
</html>
Now, I would like to trigger a draw of an associated table according to the selected value:
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type='text/javascript'>
function drawChart() {
var json = $.ajax({
url: "http://localhost/angularjs/get_repartition_order_status_todaygoogle_pie.php?type=graph",
dataType:"json",
async: false
}).responseText;
jsondata = eval(json);
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows(jsondata);
// Set chart options
var options = {'title':'Order Status for today ',
'width':500, 'pieHole': 0.5,
'height':400,'margin' : 0};
//var options = {'title':'Order Status for today ','width':600, 'pieHole': 0.5,'height':600, 'is3D': true};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
// orgChart is my global orgchart chart variable.
google.visualization.events.addListener(chart, 'select', selectHandler);
// Notice that e is not used or needed.
function selectHandler(e) {
var selectedItem = chart.getSelection()[0];
if (selectedItem) {
var value = data.getValue(selectedItem.row, 0);
// alert('The user selected ' + value);
google.setOnLoadCallback(drawTable(value));
};
}
}
function drawTable(etat) {
var json = $.ajax({
url: "http://localhost/angularjs/get_repartition_order_status_todaygoogle_pie.php?type=table&status=" + etat,
dataType:"json",
async: false
}).responseText;
JSONObject = eval(json);
var new_json = "[";
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
new_json += "['" + JSONObject[key]["order_id"] + "'";
new_json += ",'" + JSONObject[key]["store_id"] + "'";
new_json += ",'" + JSONObject[key]["purchase_serial_number"] + "'";
new_json += ",'" + JSONObject[key]["purchase_creation_date"] + "'";
new_json += ",'" + JSONObject[key]["lastmod"] + "'";
new_json += ",'" + JSONObject[key]["status"] + "'],";
}
}
//console.log(new_json.length);
new_json=new_json.substring(0,new_json.length - 1)
new_json += "]";
//console.log(eval(new_json));
var options = {'showRowNumber': true};
var data = new google.visualization.DataTable();
data.addColumn('string', 'order_id');
data.addColumn('string', 'store_id');
data.addColumn('string', 'PSN');
data.addColumn('string', 'Creation Date');
data.addColumn('string', 'Modif. Date');
data.addColumn('string', 'Status');
data.addRows(eval(new_json));
var table = new google.visualization.Table(document.getElementById('table_div'));
table.draw(data, options);
}
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart','table']});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
<div id="table_div"></div>
</body>
</html>
The result is the following one :
