Im building a basic dashboard and using google charts to do so. I have successfully embedded my gauge charts on the webpage. I am now trying to position them.
I have read that this needs to be done using css positioning.
My question is if this is the solution , how can I use this within my code.
Im trying to split, so I will have 3 gauges on top and 2 underneath..
I have tried using <div style = "position:relative; left:?; top:?px </div> in differant positions but I cant get it to work..
JavaScript
x
59
59
1
<html>2
<body style="background-color:dodgerblue;"></body>3
<head>4
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>5
<script type="text/javascript">6
google.charts.load('current', {'packages':['gauge']});7
google.charts.setOnLoadCallback(drawChart);8
9
function drawChart() {10
11
var data = google.visualization.arrayToDataTable([12
['Label', 'Value'],13
['Daily GP', 80],14
['MTD GP', 55],15
['Open RO', 68],16
['NPS', 68],17
['Charging Eff', 68]18
]);19
20
var options = {21
width: 800, height: 200,22
greenFrom: 90, redTo: 60,23
yellowFrom:60, yellowTo: 90,24
minorTicks: 525
};26
27
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));28
29
chart.draw(data, options);30
31
setInterval(function() {32
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));33
chart.draw(data, options);34
}, 13000);35
setInterval(function() {36
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));37
chart.draw(data, options);38
}, 5000);39
setInterval(function() {40
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));41
chart.draw(data, options);42
}, 26000);43
setInterval(function() {44
data.setValue(3, 1, 60 + Math.round(20 * Math.random()));45
chart.draw(data, options);46
}, 26000);47
setInterval(function() {48
data.setValue(4, 1, 60 + Math.round(20 * Math.random()));49
chart.draw(data, options);50
}, 26000);51
52
}53
</script>54
</head>55
<body>56
<div id="chart_div" style="width: 800px; height: 200px;"></div>57
</body>58
</html>59
Advertisement
Answer
Just style your chart_div with CSS using position: absolute; and then position it using the top and left properties. For example:
With positioning:
JavaScript
1
5
1
#chart_div {2
position: absolute;3
top: 50%;4
left: 10%;5
}JavaScript
1
68
68
1
<!DOCTYPE html>2
<html>3
4
<body style="background-color:dodgerblue;"></body>5
6
<head>7
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>8
<script type="text/javascript">9
google.charts.load('current', {10
'packages': ['gauge']11
});12
google.charts.setOnLoadCallback(drawChart);13
14
function drawChart() {15
16
var data = google.visualization.arrayToDataTable([17
['Label', 'Value'],18
['Daily GP', 80],19
['MTD GP', 55],20
['Open RO', 68],21
['NPS', 68],22
['Charging Eff', 68]23
]);24
25
var options = {26
width: 800,27
height: 200,28
greenFrom: 90,29
redTo: 60,30
yellowFrom: 60,31
yellowTo: 90,32
minorTicks: 533
};34
35
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));36
37
chart.draw(data, options);38
39
setInterval(function() {40
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));41
chart.draw(data, options);42
}, 13000);43
setInterval(function() {44
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));45
chart.draw(data, options);46
}, 5000);47
setInterval(function() {48
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));49
chart.draw(data, options);50
}, 26000);51
setInterval(function() {52
data.setValue(3, 1, 60 + Math.round(20 * Math.random()));53
chart.draw(data, options);54
}, 26000);55
setInterval(function() {56
data.setValue(4, 1, 60 + Math.round(20 * Math.random()));57
chart.draw(data, options);58
}, 26000);59
60
}61
</script>62
</head>63
64
<body>65
<div id="chart_div" style="width: 800px; height: 200px;"></div>66
</body>67
68
</html>Without positioning:
JavaScript
1
58
58
1
<html>2
<body style="background-color:dodgerblue;"></body>3
<head>4
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>5
<script type="text/javascript">6
google.charts.load('current', {'packages':['gauge']});7
google.charts.setOnLoadCallback(drawChart);8
9
function drawChart() {10
11
var data = google.visualization.arrayToDataTable([12
['Label', 'Value'],13
['Daily GP', 80],14
['MTD GP', 55],15
['Open RO', 68],16
['NPS', 68],17
['Charging Eff', 68]18
]);19
20
var options = {21
width: 800, height: 200,22
greenFrom: 90, redTo: 60,23
yellowFrom:60, yellowTo: 90,24
minorTicks: 525
};26
27
var chart = new google.visualization.Gauge(document.getElementById('chart_div'));28
29
chart.draw(data, options);30
31
setInterval(function() {32
data.setValue(0, 1, 40 + Math.round(60 * Math.random()));33
chart.draw(data, options);34
}, 13000);35
setInterval(function() {36
data.setValue(1, 1, 40 + Math.round(60 * Math.random()));37
chart.draw(data, options);38
}, 5000);39
setInterval(function() {40
data.setValue(2, 1, 60 + Math.round(20 * Math.random()));41
chart.draw(data, options);42
}, 26000);43
setInterval(function() {44
data.setValue(3, 1, 60 + Math.round(20 * Math.random()));45
chart.draw(data, options);46
}, 26000);47
setInterval(function() {48
data.setValue(4, 1, 60 + Math.round(20 * Math.random()));49
chart.draw(data, options);50
}, 26000);51
52
}53
</script>54
</head>55
<body>56
<div id="chart_div" style="width: 800px; height: 200px;"></div>57
</body>58
</html>