80 lines
2.4 KiB
PHP
80 lines
2.4 KiB
PHP
<html>
|
|
<head>
|
|
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
|
<script type="text/javascript">
|
|
google.load('visualization', '1.0', {'packages''controls']});
|
|
|
|
// Set a callback to run when the Google Visualization API is loaded.
|
|
google.setOnLoadCallback(drawDashboard);
|
|
function drawVisualization() {
|
|
// Prepare the data
|
|
var data = google.visualization.arrayToDataTable([
|
|
['Name', 'Age'],
|
|
['Michael' , 12],
|
|
['Elisa', 20],
|
|
['Robert', 7],
|
|
['John', 54],
|
|
['Jessica', 22],
|
|
['Aaron', 3],
|
|
['Margareth', 42],
|
|
['Miranda', 33]
|
|
]);
|
|
|
|
// Define a NumberRangeFilter slider control for the 'Age' column.
|
|
var slider = new google.visualization.ControlWrapper({
|
|
'controlType': 'NumberRangeFilter',
|
|
'containerId': 'control_div',
|
|
'options': {
|
|
'filterColumnLabel': 'Age',
|
|
'minValue': 0,
|
|
'maxValue': 60
|
|
}
|
|
});
|
|
|
|
// Define a bar chart
|
|
var barChart = new google.visualization.ChartWrapper({
|
|
'chartType': 'BarChart',
|
|
'containerId': 'chart_div',
|
|
'options': {
|
|
'width': 400,
|
|
'height': 300,
|
|
'hAxis': {'minValue': 0, 'maxValue': 60},
|
|
'chartArea': {top: 0, right: 0, bottom: 0}
|
|
}
|
|
});
|
|
|
|
// Create the dashboard.
|
|
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')).
|
|
// Configure the slider to affect the bar chart
|
|
bind(slider, barChart).
|
|
// Draw the dashboard
|
|
draw(data);
|
|
}
|
|
/*google.load('visualization', '1', {'packages':['corechart']});
|
|
|
|
// Set a callback to run when the Google Visualization API is loaded.
|
|
google.setOnLoadCallback(drawChart);
|
|
|
|
function drawChart() {
|
|
var jsonData = {"cols":[{"id":"brand","label":"brand","type":"string"},{"id":"size","label":"size","type":"number"},{"id":"qty","label":"qty","type":"number"}],"rows":[{"c":[{"v":"Bridgestone"},{"v":999},{"v":878}]},{"c":[{"v":"TOYO"},{"v":789},{"v":987}]},{"c":[{"v":"CUBEX"},{"v":876},{"v":777}]}]}
|
|
|
|
|
|
var data = new google.visualization.DataTable(jsonData);
|
|
|
|
|
|
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
|
|
chart.draw(data, {width: 400, height: 240});
|
|
}*/
|
|
|
|
</script>
|
|
|
|
</head>
|
|
<body>
|
|
<div id="dashboard_div">
|
|
<div id="chart_div"></div>
|
|
<div id="control_div"></div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |