Indeed, but it doesn't belong there with your divs in the middle of the scripts. Script tags can only have script code in them.
On Tue, Mar 29, 2016 at 1:42 PM, <masonco...@gmail.com> wrote: > It's at the bottom of the page: > </script> > </center> > </head> > </html> > > On Tuesday, March 29, 2016 at 12:37:16 PM UTC-5, Daniel LaLiberte wrote: >> >> If this is your actual code, you are missing the close script tag after >> your script. So you will probably see a javascript syntax error in your >> browser javascript debugger. >> >> On Tue, Mar 29, 2016 at 12:45 PM, <mason...@gmail.com> wrote: >> >>> 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> 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. >>>>> To post to this group, send email to google-visua...@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/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 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-visua...@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 >>> <https://groups.google.com/d/msgid/google-visualization-api/70f7ccf4-aa0f-4316-a6d0-89e6949d7dc1%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 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/2586b999-4dc0-457a-8373-c4c6a8133a38%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/2586b999-4dc0-457a-8373-c4c6a8133a38%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> dlalibe...@google.com <dlalibe...@google.com> 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/CAOtcSJPcjr9k%3D1hjMdnjSB05RZ5Gh7KJ5EC3rcEEYRZpbcPqbg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
