I posted the wrong code. Sorry. Yes, I am trying to get the separate containers (DIVs) working for just that reason. Here is the code I'm using, but nothing displays at all. I can't find what is missing/wrong:
<html> <head> <center> <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([ // The '0' values below are where the gauge needles start before animation. ['Label', 'Value'], ['LAG', 0], ['LEAD(now)', 0], ['LEAD(last)', 0] ]); var options = { // The width and height setting below are the pixel size of the entire graphic. width: 190, height: 190 } <div id="chart_div1" style="width: 600px; height: 200px;"> var chart1 = new google.visualization.Gauge(document.getElementById('chart_div1')); chart1.draw(data, { redFrom: 0, redTo: 25, redColor: '#ff0000', yellowFrom: 25, yellowTo: 75, yellowColor: '#eeee00', greenFrom: 75, greenTo: 100, greenColor: '#00cd00', // The minor ticks number below changes the number of small ticks in a quarter circle. minorTicks: 5, // The min & max numbers below sets the lower & upper limits on the gauge dial. min: 0, max: 100 }); setInterval(function() { // Change the right-most number below to change the first gauge reading. data.setValue(0, 1, 25); chart1.draw(data, options) // Change the number below to set the delay before the gauge needle moves. }, 1000); </div> <div id="chart_div2" style="width: 600px; height: 200px;"> var chart2 = new google.visualization.Gauge(document.getElementById('chart_div2')); chart2.draw(data, { redFrom: 30, redTo: 25, redColor: '#ff0000', yellowFrom: 25, yellowTo: 75, yellowColor: '#eeee00', greenFrom: 75, greenTo: 200, greenColor: '#00cd00', // The minor ticks number below changes the number of small ticks in a quarter circle. minorTicks: 5, // The min & max numbers below sets the lower & upper limits on the gauge dial. min: 30, max: 200 }); setInterval(function() { // Change the right-most number below to change the second gauge reading. data.setValue(1, 1, 50); chart2.draw(data, options) // Change the number below to set the delay before the gauge needle moves. }, 1500); </div> <div id="chart_div3" style="width: 600px; height: 200px;"> var chart3 = new google.visualization.Gauge(document.getElementById('chart_div3')); chart3.draw(data, { redFrom: 10, redTo: 25, redColor: '#ff0000', yellowFrom: 25, yellowTo: 75, yellowColor: '#eeee00', greenFrom: 75, greenTo: 90, greenColor: '#00cd00', // The minor ticks number below changes the number of small ticks in a quarter circle. minorTicks: 5, // The min & max numbers below sets the lower & upper limits on the gauge dial. min: 10, max: 90 }); setInterval(function() { // Change the right-most number below to change the third gauge reading. data.setValue(2, 1, 75); chart3.draw(data, options) // Change the number below to set the delay before the gauge needle moves. }, 2000); </div> } </script> </center> </head> </html> On Tuesday, March 29, 2016 at 8:40:55 AM UTC-5, Daniel LaLiberte wrote: > > Hi Mason, > > You didn't say what doesn't work. If you want each Gauge to have > different scale and maximum, then you will need to generate a separate > chart for each, since the options are otherwise shared between the multiple > gauges in one chart. Each separate chart needs its own unique container > element id. > > On Tue, Mar 29, 2016 at 2:40 AM, <mason...@gmail.com <javascript:>> wrote: > >> Can you help with this? >> I'm looking for 3 gauges, each with different dial ranges and maximum >> dial numbers. >> Please help. >> >> <html> >> <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([ >> >> // The '0' values below are where the gauge needles start before >> animation. >> ['Label', 'Value'], >> ['LAG', 0], >> ['LEAD(now)', 0], >> ['LEAD(last)', 0] >> ]); >> >> var chart = new >> google.visualization.Gauge(document.getElementById('chart_div')); >> >> chart.draw(data, { >> width: 190, height: 190, >> redFrom: 0, redTo: 25, redColor: '#ff0000', >> yellowFrom: 25, yellowTo: 75, yellowColor: '#eeee00', >> greenFrom: 75, greenTo: 100, greenColor: '#00cd00', >> minorTicks: 5, >> min: 0, >> max: 100 >> }); >> >> setInterval(function() { >> // Change the right-most number below to change the first gauge reading. >> data.setValue(0, 1, 60); >> chart.draw(data, { >> width: 590, height: 190, >> redFrom: 0, redTo: 25, redColor: '#ff0000', >> yellowFrom: 25, yellowTo: 75, yellowColor: '#eeee00', >> greenFrom: 75, greenTo: 100, greenColor: '#00cd00', >> minorTicks: 5, >> min: 0, >> max: 100 >> }); >> // Change the number below to set the delay before the gauge needle moves. >> }, 1000); >> setInterval(function() { >> // Change the right-most number below to change the second gauge reading. >> data.setValue(1, 1, 176); >> chart.draw(data, { >> width: 190, height: 190, >> redFrom: 100, redTo: 125, redColor: '#ff0000', >> yellowFrom: 125, yellowTo: 175, yellowColor: '#eeee00', >> greenFrom: 175, greenTo: 200, greenColor: '#00cd00', >> minorTicks: 5, >> min: 100, >> max: 200 >> }); >> // Change the number below to set the delay before the gauge needle moves. >> }, 1500); >> setInterval(function() { >> // Change the right-most number below to change the third gauge reading. >> data.setValue(2, 1, 25); >> chart.draw(data, { >> width: 190, height: 190, >> redFrom: 0, redTo: 10, redColor: '#ff0000', >> yellowFrom: 10, yellowTo: 20, yellowColor: '#eeee00', >> greenFrom: 20, greenTo: 30, greenColor: '#00cd00', >> minorTicks: 5, >> min: 0, >> max: 30 >> }); >> // Change the number below to set the delay before the gauge needle moves. >> }, 2000); >> } >> </script> >> </head> >> <body> >> <center> >> <div id="chart_div" style="width: 200px; height: 200px;"></div> >> </center> >> </body> >> </html> >> >> >> On Wednesday, July 20, 2011 at 7:44:09 AM UTC-5, NA wrote: >>> >>> Post a code snippet and we can take a look. Off the top of my head, >>> make sure you're using two different div ids for the gauges. If >>> you're doing a copy and paste, that can sometimes get missed. >>> >>> Otherwise, snippet would be helpful. It's certainly possible to use >>> multiple gauges in a single page. >>> >>> >>> >>> On Jul 20, 6:04 am, David Rodger <drod...@dafl.co.uk> wrote: >>> > Hi there >>> > >>> > I am looking to display several of the gauge charts on single page of >>> > our website. I am using the code from the google playground as a >>> > basis. The problem I am having is when I duplicate the first chart and >>> > paste the code below it (ie - display 2 copies of the chart) it simply >>> > shows one chart. >>> > >>> > I have tried several css positioning calls as a I initially thought >>> > the second chart was overlaying the first (but this was not the case). >>> > >>> > Is there anything I can do to work around this. Would displaying on a >>> > dashboard work? >>> > >>> > Thanking you >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Google Visualization API" group. >> To unsubscribe from this group and stop receiving emails from it, send an >> email to google-visualization-api+unsubscr...@googlegroups.com >> <javascript:>. >> To post to this group, send email to google-visua...@googlegroups.com >> <javascript:>. >> Visit this group at >> https://groups.google.com/group/google-visualization-api. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-visualization-api/acde59e4-df6c-41cb-b95c-b5823784c9bf%40googlegroups.com >> >> <https://groups.google.com/d/msgid/google-visualization-api/acde59e4-df6c-41cb-b95c-b5823784c9bf%40googlegroups.com?utm_medium=email&utm_source=footer> >> . >> >> For more options, visit https://groups.google.com/d/optout. >> > > > > -- > Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> > dlali...@google.com <javascript:> 5CC, Cambridge MA > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/70f7ccf4-aa0f-4316-a6d0-89e6949d7dc1%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
