Numerous Gauge charts in the same page
3,276 views
Skip to first unread message
David Rodger
Jul 20, 2011, 6:04:51 AM7/20/11
to Google Visualization API
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
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
PriestVallon
Jul 20, 2011, 6:13:23 AM7/20/11
to Google Visualization API
Are you calling the draw function on the same chart variable twice?
As in:
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
var options = {width: 400, height: 120, redFrom: 90, redTo:
100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
var options = {width: 400, height: 120, redFrom: 90, redTo:
100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
If so change the second one to:
var chart1 = new
google.visualization.Gauge(document.getElementById('chart_div1'));
var options = {width: 400, height: 120, redFrom: 90, redTo:
100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart1.draw(data, options);
Make sure you change where chart1 is drawn to.
Hope that helps
As in:
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
var options = {width: 400, height: 120, redFrom: 90, redTo:
100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
var chart = new
google.visualization.Gauge(document.getElementById('chart_div'));
var options = {width: 400, height: 120, redFrom: 90, redTo:
100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart.draw(data, options);
If so change the second one to:
var chart1 = new
google.visualization.Gauge(document.getElementById('chart_div1'));
var options = {width: 400, height: 120, redFrom: 90, redTo:
100,
yellowFrom:75, yellowTo: 90, minorTicks: 5};
chart1.draw(data, options);
Make sure you change where chart1 is drawn to.
Hope that helps
Dan Prince
Jul 20, 2011, 6:52:46 AM7/20/11
to Google Visualization API
How are you setting the chart data? From the playground sample I would
assume that rather than c+p the code for the chart (creating a new
instance of the gauge) What you want can be achieved by adding an
extra column and one more piece of data to each of the rows. This may
not be exact as I am doing it from memory. When setting the data for
your chart:
Display 3 charts
addColumn(['Gauge1','Gauge2','Gauge3']),
addRow(['32.5','45.3','32.4']),
addRow(['32.5','45.3','32.4']),
addRow(['32.5','45.3','32.4'])
Display 4 charts
addColumn(['Gauge1','Gauge2','Gauge3','Gauge4']),
addRow(['32.5','45.3','32.4','32.1']),
addRow(['32.5','45.3','32.4','32.1']),
addRow(['32.5','45.3','32.4','32.1'])
These methods should be changed depending on how you are declaring
your data, for instance if you are declaring it from an array then
each array row should have one extra item in it.
E.g.
3 charts
array[0]=['Gauge1','Gauge2','Gauge3']
4 charts
array[0]=['Gauge1','Gauge2','Gauge3','Gauge4']
Make sure that all your rows have the same number of items in or you
will most likely get a not a valid 2d array error.
Hope this helps!
Dan
assume that rather than c+p the code for the chart (creating a new
instance of the gauge) What you want can be achieved by adding an
extra column and one more piece of data to each of the rows. This may
not be exact as I am doing it from memory. When setting the data for
your chart:
Display 3 charts
addColumn(['Gauge1','Gauge2','Gauge3']),
addRow(['32.5','45.3','32.4']),
addRow(['32.5','45.3','32.4']),
addRow(['32.5','45.3','32.4'])
Display 4 charts
addColumn(['Gauge1','Gauge2','Gauge3','Gauge4']),
addRow(['32.5','45.3','32.4','32.1']),
addRow(['32.5','45.3','32.4','32.1']),
addRow(['32.5','45.3','32.4','32.1'])
These methods should be changed depending on how you are declaring
your data, for instance if you are declaring it from an array then
each array row should have one extra item in it.
E.g.
3 charts
array[0]=['Gauge1','Gauge2','Gauge3']
4 charts
array[0]=['Gauge1','Gauge2','Gauge3','Gauge4']
Make sure that all your rows have the same number of items in or you
will most likely get a not a valid 2d array error.
Hope this helps!
Dan
NA
Jul 20, 2011, 8:44:09 AM7/20/11
to Google Visualization API
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.
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.
asgallant
Jul 20, 2011, 9:23:58 AM7/20/11
to google-visua...@googlegroups.com
How you do this depends on how you want the gauges displayed. Adding additional columns to your dataTable will add additional gauges to the same div. If you want the gauges to be in separate div's, then you either need to create separate dataTables and feed them to different charts, or use dataViews to feed different columns to different charts.
David Rodger
Jul 21, 2011, 6:30:11 AM7/21/11
to Google Visualization API
Hi all
Thank you for all your responses, much appreciated.
I have pasted the code below as I have it on the page - the source of
the data is on a google spreadsheet.
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
<script type="text/javascript" src="http://www.google.com/
jsapi"></script><script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script><script type="text/javascript">
function drawVisualization() {
var query = new google.visualization.Query('https://
spreadsheets.google.com/spreadsheet/tq?range=B1:B2&key=0Ai2BdaB-
nmSmdGI3S08xSnlOWS1XbWVxTjJkekFjY0E&gid=0');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Create and draw the visualization.
new
google.visualization.Gauge(document.getElementById('visualization')).
draw(data, {
min: 0,
max: 15000
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 300px;"></
div>
</body>
</html>
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
<script type="text/javascript" src="http://www.google.com/
jsapi"></script><script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script><script type="text/javascript">
function drawVisualization() {
var query = new google.visualization.Query('https://
spreadsheets.google.com/spreadsheet/tq?range=B1:B2&key=0Ai2BdaB-
nmSmdGI3S08xSnlOWS1XbWVxTjJkekFjY0E&gid=0');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Create and draw the visualization.
new
google.visualization.Gauge(document.getElementById('visualization1')).
draw(data, {
min: 0,
max: 15000
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization1" style="width: 600px; height: 300px;"></
div>
</body>
</html>
Thank you for all your responses, much appreciated.
I have pasted the code below as I have it on the page - the source of
the data is on a google spreadsheet.
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
<script type="text/javascript" src="http://www.google.com/
jsapi"></script><script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script><script type="text/javascript">
function drawVisualization() {
var query = new google.visualization.Query('https://
spreadsheets.google.com/spreadsheet/tq?range=B1:B2&key=0Ai2BdaB-
nmSmdGI3S08xSnlOWS1XbWVxTjJkekFjY0E&gid=0');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Create and draw the visualization.
new
google.visualization.Gauge(document.getElementById('visualization')).
draw(data, {
min: 0,
max: 15000
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization" style="width: 600px; height: 300px;"></
div>
</body>
</html>
<!--
You are free to copy and use this sample in accordance with the terms
of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/
>
<title>
Google Visualization API Sample
</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></
script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script>
<script type="text/javascript">
<script type="text/javascript" src="http://www.google.com/
jsapi"></script><script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
</script><script type="text/javascript">
function drawVisualization() {
var query = new google.visualization.Query('https://
spreadsheets.google.com/spreadsheet/tq?range=B1:B2&key=0Ai2BdaB-
nmSmdGI3S08xSnlOWS1XbWVxTjJkekFjY0E&gid=0');
// Send the query with a callback function.
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' +
response.getDetailedMessage());
return;
}
var data = response.getDataTable();
// Create and draw the visualization.
new
google.visualization.Gauge(document.getElementById('visualization1')).
draw(data, {
min: 0,
max: 15000
});
}
google.setOnLoadCallback(drawVisualization);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="visualization1" style="width: 600px; height: 300px;"></
div>
</body>
</html>
asgallant
Jul 21, 2011, 10:25:14 AM7/21/11
to google-visua...@googlegroups.com
Assuming you eventually want to use different sources for your data, you'd probably be better served using chart wrappers than queries and response handlers. In that case, the javascript you want looks something like this:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['gauge']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var wrapper1 = new google.visualization.ChartWrapper({
chartType: 'Gauge',
dataSourceUrl: 'https://spreadsheets.google.com/spreadsheet/tq?range=B1:B2&key=0Ai2BdaB- nmSmdGI3S08xSnlOWS1XbWVxTjJkekFjY0E&gid=0', containerId: 'visualization1',
options: {
min: 0,
max: 15000
}
});
var wrapper2 = new google.visualization.ChartWrapper({
chartType: 'Gauge',
dataSourceUrl: 'https://spreadsheets.google.com/spreadsheet/tq?range=B1:B2&key=0Ai2BdaB- nmSmdGI3S08xSnlOWS1XbWVxTjJkekFjY0E&gid=0', containerId: 'visualization2',
options: {
min: 0,
max: 15000
}
});
wrapper1.draw();
wrapper2.draw();
}
</script>
and include 2 div's with id's "visualization1" and "visualization2"
Message has been deleted
mason...@gmail.com
Mar 29, 2016, 2:40:00 AM3/29/16
to Google Visualization API
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]
]);
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>
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>
Daniel LaLiberte
Mar 29, 2016, 9:40:55 AM3/29/16
to Google Visualization API
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.
--
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-visualizati...@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.
mason...@gmail.com
Mar 29, 2016, 12:45:56 PM3/29/16
to Google Visualization API
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>
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;">
// 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.
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)
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',
<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() {
// 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)
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',
<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() {
// 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)
chart3.draw(data, options)
// Change the number below to set the delay before the gauge needle moves.
}, 2000);
</div>
}
</script>
</center>
</head>
</html>
}
</script>
</center>
</head>
</html>
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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.
Daniel LaLiberte
Mar 29, 2016, 1:37:16 PM3/29/16
to Google Visualization API
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.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@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.
--
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-visualizati...@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.
mason...@gmail.com
Mar 29, 2016, 1:42:44 PM3/29/16
to Google Visualization API
It's at the bottom of the page:
</script>
</center>
</head>
</html>
</script>
</center>
</head>
</html>
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@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.
--
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+unsub...@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.
Daniel LaLiberte
Mar 29, 2016, 2:17:04 PM3/29/16
to Google Visualization API
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.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@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.
--
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-visualizati...@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.
--
--
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-visualizati...@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/2586b999-4dc0-457a-8373-c4c6a8133a38%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages