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..
<html> <body style="background-color:dodgerblue;"></body> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Daily GP', 80], ['MTD GP', 55], ['Open RO', 68], ['NPS', 68], ['Charging Eff', 68] ]); var options = { width: 800, height: 200, greenFrom: 90, redTo: 60, yellowFrom:60, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); setInterval(function() { data.setValue(3, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); setInterval(function() { data.setValue(4, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } </script> </head> <body> <div id="chart_div" style="width: 800px; height: 200px;"></div> </body> </html>
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:
#chart_div { position: absolute; top: 50%; left: 10%; }
<!DOCTYPE html> <html> <body style="background-color:dodgerblue;"></body> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages': ['gauge'] }); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Daily GP', 80], ['MTD GP', 55], ['Open RO', 68], ['NPS', 68], ['Charging Eff', 68] ]); var options = { width: 800, height: 200, greenFrom: 90, redTo: 60, yellowFrom: 60, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); setInterval(function() { data.setValue(3, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); setInterval(function() { data.setValue(4, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } </script> </head> <body> <div id="chart_div" style="width: 800px; height: 200px;"></div> </body> </html>
Without positioning:
<html> <body style="background-color:dodgerblue;"></body> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['gauge']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Label', 'Value'], ['Daily GP', 80], ['MTD GP', 55], ['Open RO', 68], ['NPS', 68], ['Charging Eff', 68] ]); var options = { width: 800, height: 200, greenFrom: 90, redTo: 60, yellowFrom:60, yellowTo: 90, minorTicks: 5 }; var chart = new google.visualization.Gauge(document.getElementById('chart_div')); chart.draw(data, options); setInterval(function() { data.setValue(0, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 13000); setInterval(function() { data.setValue(1, 1, 40 + Math.round(60 * Math.random())); chart.draw(data, options); }, 5000); setInterval(function() { data.setValue(2, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); setInterval(function() { data.setValue(3, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); setInterval(function() { data.setValue(4, 1, 60 + Math.round(20 * Math.random())); chart.draw(data, options); }, 26000); } </script> </head> <body> <div id="chart_div" style="width: 800px; height: 200px;"></div> </body> </html>