Is it possible to do this? I want to be able to change values and change
the view window on the same chart with different buttons. The scripts I am
using for each function look like this:
To change Data Values:
<script type="text/javascript">
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawChart1);
function drawChart1() {
var rowData3 = [['Month', 'Offering1', 'Offering2', 'Offering3'],
['Oct 11', 0, 1, 0],
['Nov 11', 1, 2, 1],
['Dec 11', 0, 0, 0],
['Jan 12', 0, 1, 0],
['Feb 12', 0, 1, 1],
['Mar 12', 0, 5, 0],
['Apr 12', 4, 1, 0],
['May 12', 3, 0, 1] ];
var rowData4 = [['Month', 'Dollars'],
['Oct 11', 10000],
['Nov 11', 5000],
['Dec 11', 600],
['Jan 12', 7000],
['Feb 12', 1000],
['Mar 12', 0],
['Apr 12', 8000],
['May 12', 15000] ];
// Create and populate the data tables.
var data = [];
data[0] = google.visualization.arrayToDataTable(rowData3);
data[1] = google.visualization.arrayToDataTable(rowData4);
var options = {
width: 600,
height: 400,
vAxis: {title: "Contracts"},
hAxis: {title: "Month", slantedText:true, slantedTextAngle:45 },
series: [{color:'#4682B4', visibleInLegend: true}, {color:'#C0C0C0',
visibleInLegend:true},{color:'#2A4C6A', visibleInLegend:true}],
animation:{
duration: 1000,
easing: 'out'
}
};
var current = 0;
// Create and draw the visualization.
var chart = new
google.visualization.ColumnChart(document.getElementById('Chart1'));
var button = document.getElementById('Chart1Button');
function drawChart() {
// Disabling the button while the chart is drawing.
button.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
button.disabled = false;
button.value = 'Change to Value';
});
options['title'] = 'Monthly ' + (current ? 'Dollars' : ' Number') ;
chart.draw(data[current], options);
}
drawChart();
button.onclick = function() {
current = 1 - current;
drawChart();
}
}
</script>
To Change View Window:
<script type='text/javascript'>
google.load('visualization', '1.1', {packages: ['corechart']});
google.setOnLoadCallback(drawExample5);
function drawExample5() {
var options = {
width: 600,
height: 400,
animation: {
duration: 1000,
easing: 'in'},
title: 'Monthly Revenue',
vAxis: {title: "$ in 000s"},
series: [{color:'#4682B4', visibleInLegend: true}, {color:'#C0C0C0',
visibleInLegend:true}],
hAxis: {title: 'Month', slantedText:true, slantedTextAngle:45,
viewWindow:{min:12, max:20}}};
var chart = new google.visualization.ColumnChart(
document.getElementById('Chart'));
var data = google.visualization.arrayToDataTable([
['Month', 'Revenue', 'Budgeted Revenue'],
[DATA]
var MAX = 20;
for (var i = 0; i < MAX; ++i) {
var changeZoomButton = document.getElementById('Chart');
function drawChart() {
// Disabling the button while the chart is drawing.
changeZoomButton.disabled = true;
google.visualization.events.addListener(chart, 'ready',
function() {
changeZoomButton.disabled = false;
});
chart.draw(data, options);
}}
var zoomed = false;
changeZoomButton.onclick = function() {
if (zoomed) {
options.hAxis.viewWindow.min = 12;
options.hAxis.viewWindow.max = 20;
} else {
options.hAxis.viewWindow.min = 0;
options.hAxis.viewWindow.max = 20;
}
zoomed = !zoomed;
drawChart();
}
drawChart();
}
</script>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-visualization-api/-/Lz6Lc6Rb8aIJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-visualization-api?hl=en.
