Frederic G. MARAND
91469579d5
- inventory: list of individual features in memcache.php - navigation: list of screens and their tasks - app_map: various takes on the application map (navigation) - sample*: UI tests for Google charts.
85 lines
2.5 KiB
HTML
85 lines
2.5 KiB
HTML
<html>
|
|
<head>
|
|
<style type="text/css">
|
|
#chart_div1 {
|
|
background-color: #e0e0a0;
|
|
}
|
|
#chart_div2 {
|
|
background-color: #c0c0a0;
|
|
}
|
|
</style>
|
|
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
|
|
<script type='text/javascript'>
|
|
google.load('visualization', '1', {packages:['gauge']});
|
|
google.setOnLoadCallback(drawCharts);
|
|
function drawChart1() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addRows(4);
|
|
|
|
data.addColumn('number', 'Label');
|
|
data.setValue(0, 0, 0);
|
|
data.setValue(1, 0, 5);
|
|
data.setValue(2, 0, 10);
|
|
data.setValue(3, 0, 15);
|
|
|
|
data.addColumn('number', 'Delta');
|
|
data.setValue(0, 1, 40);
|
|
data.setValue(1, 1, 45);
|
|
data.setValue(2, 1, 50);
|
|
data.setValue(3, 1, 55);
|
|
|
|
data.addColumn('number', 'Second');
|
|
data.setValue(0, 2, 85);
|
|
data.setValue(1, 2, 90);
|
|
data.setValue(2, 2, 95);
|
|
data.setValue(3, 2, 100);
|
|
|
|
var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1'));
|
|
var options = {
|
|
width: 600, height: 450,
|
|
greenFrom: 0, greenTo: 30,
|
|
redFrom: 90, redTo: 100,
|
|
yellowFrom:70, yellowTo: 90,
|
|
minorTicks: 5};
|
|
chart1.draw(data, options);
|
|
}
|
|
|
|
function drawChart2() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addRows(1);
|
|
|
|
data.addColumn('number', '11211');
|
|
data.setValue(0, 0, 0);
|
|
data.addColumn('number', '11212');
|
|
data.setValue(0, 1, 20);
|
|
data.addColumn('number', '11213');
|
|
data.setValue(0, 2, 40);
|
|
data.addColumn('number', '11214');
|
|
data.setValue(0, 3, 60);
|
|
data.addColumn('number', '11215');
|
|
data.setValue(0, 4, 80);
|
|
data.addColumn('number', '11216');
|
|
data.setValue(0, 5, 100);
|
|
|
|
var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2'));
|
|
var options = {
|
|
|
|
width: 600, height: 400,
|
|
greenFrom: 0, greenTo: 30, // greenColor: '#206020',
|
|
redFrom: 90, redTo: 100, // redColor: '#ff4040',
|
|
yellowFrom:30, yellowTo: 90, // yellowColor: '#e0e000',
|
|
minorTicks: 5}
|
|
chart2.draw(data, options);
|
|
}
|
|
function drawCharts() {
|
|
drawChart1();
|
|
drawChart2();
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id='chart_div1'></div>
|
|
<div id='chart_div2'></div>
|
|
</body>
|
|
</html>
|