Hi Croix,
Your problem now is that the dataCap function is only defined inside your
drawChart function, so it is not visible outside at the level of the select
element. There are various ways to fix this, but it might be easiest for
you to do the following:
- Move the function dataCap() {} outside of drawChart, either before or
after.
- Declare the three variables it uses, dataTables, chart, and options,
outside of drawChart.
- Only assign to those variables inside drawChart, so remove the 'var'
before them.
So it should look like this:
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
// Declare some global variables
var dataTables;
var chart, options;
function dataCap(){
var selected = document.getElementById("selected2").value;
document.getElementById('show').innerHTML = "This is your
selection:" + selected;
var selectedDataTable = dataTables[selected];
chart.draw(selectedDataTable, options);
}
function drawChart() {
var datatable1 = google.visualization.arrayToDataTable([
['Date', '12z NAM'],
['14/12', 6],
['14/18', 8]]);
var datatable2 = google.visualization.arrayToDataTable([
['Date', '06z NAM'],
['14/12', 2],
['14/18', 3]]);
var datatable3 = google.visualization.arrayToDataTable([
['Date', '00z NAM'],
['14/12', 23],
['14/18', 28]]);
dataTables = {
'one' : datatable1,
'two' : datatable2,
'three' : datatable2
};
var selectedDataTable = datatable1;
var columns = [];
var series = {};
current = datatable1;
for (var i = 0; i < selectedDataTable.getNumberOfColumns();
i++) {
columns.push(i);
}
var series = {
0: { color: 'blue', static: 'blue', lineWidth: 5 },
1: { color: '#2171b5', static: '#2171b5', lineWidth: 4},
}
options = {
series: series,
width: 1500,
height: 700,
title: '*** LSE *** Total Snow w/ Compaction',
pointShape: 'circle',
pointSize: 8,
hAxis: {title: 'Date', slantedText:true,
slantedTextAngle:45 },
vAxis: { title: 'Total Snow', minValue: 0, maxValue: 12},
legend: {position: 'bottom', textStyle: {color: 'black',
fontSize: 16}}
};
chart = new
google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(selectedDataTable, options);
}
On Sat, Jan 17, 2015 at 2:47 PM, Croix Christenson <
[email protected]> wrote:
> Thanks Daniel - think I am really close with your advice!
>
> However, it says that *"Uncaught ReferenceError: dataCap is not defined"*
> and as a result the data displayed on the chart does not change when
> interaction with the drop down menu occurs - any ideas on why that might be?
>
> I attached a .html for reference.
>
> Thanks!
>
> On Saturday, January 17, 2015 at 11:46:12 AM UTC-6, Daniel LaLiberte wrote:
>>
>> Hi Croix,
>>
>> I expanded on your jsfiddle to give an outline of what you need to do to
>> select different data tables:
>>
>> http://jsfiddle.net/dlaliberte/M9YrV/1/
>>
>> Note that the code doesn't work because not all the blanks are filled
>> in. But it should give you an idea how to proceed.
>>
>>
>>
>> On Sat, Jan 17, 2015 at 11:38 AM, Croix Christenson <
>> [email protected]> wrote:
>>
>>> I have a .html that is attached called "two_data_sets_toggle.html" which
>>> plots a line chart.
>>>
>>> What I would like to do is implement a drop down menu something like
>>> shown here, http://jsfiddle.net/M9YrV/ and when a new option is
>>> selected a different set of data is plotted on the google chart. The end
>>> chart will have about 6-8 data sets that I would like to be able to toggle
>>> between when the user selects a new option from the drop down menu. I've
>>> tried many solutions but still struggling to get the chart to update.
>>>
>>> I did find an example shown here (http://jsfiddle.net/asgallant/6kdvP/)
>>> that a user can input their own data...but like I said, I want there to be
>>> 6-8 different data sets and the user, via the drop down menu selects which
>>> data set to be plotted.
>>>
>>> Seems like it should be simple linking the value in select with a data
>>> set but have yet to have a breakthrough. Thanks in advance, been trying to
>>> debug this for the past few hours.
>>>
>>> Also, how do I decrease the white space between the vertical axis and
>>> the label? I'd like the plot to start as close to the left side of the
>>> browser possible.
>>>
>>> Hopefully this makes sense!
>>>
>>> --
>>>
>> --
> 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 [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton 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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
