testchart
<!DOCTYPE html>
<html>
<head>
<!– Load the Google Charts library –>
<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js“></script>
<script type=”text/javascript”>
// Load the Visualization API and the corechart package.
google.charts.load(‘current’, {‘packages’:[‘gauge’]});
// Set up the dashboard and create the gauges.
google.charts.setOnLoadCallback(drawDashboard);
function drawDashboard() {
// Create a data table with placeholder data.
var data = google.visualization.arrayToDataTable([
[‘Label’, ‘Value’],
[‘Block 1’, 80],
[‘Block 2’, 60],
[‘Block 3’, 40],
[‘Block 4’, 70],
[‘Block 5’, 90],
[‘Block 6’, 50]
]);
// Set options for the gauges.
var options = {
width: 400,
height: 120,
redFrom: 90,
redTo: 100,
yellowFrom: 75,
yellowTo: 90,
greenFrom: 0,
greenTo: 75,
minorTicks: 5
};
// Create and draw the gauges.
var chart1 = new google.visualization.Gauge(document.getElementById(‘gauge1’));
var chart2 = new google.visualization.Gauge(document.getElementById(‘gauge2’));
var chart3 = new google.visualization.Gauge(document.getElementById(‘gauge3’));
var chart4 = new google.visualization.Gauge(document.getElementById(‘gauge4’));
var chart5 = new google.visualization.Gauge(document.getElementById(‘gauge5’));
var chart6 = new google.visualization.Gauge(document.getElementById(‘gauge6’));
chart1.draw(data, options);
chart2.draw(data, options);
chart3.draw(data, options);
chart4.draw(data, options);
chart5.draw(data, options);
chart6.draw(data, options);
}
</script>
</head>
<body>
<!– Create div elements to hold the gauges –>
<div id=”gauge1″></div>
<div id=”gauge2″></div>
<div id=”gauge3″></div>
<div id=”gauge4″></div>
<div id=”gauge5″></div>
<div id=”gauge6″></div>
</body>
</html>
