Am Sonntag, 18. Januar 2015 23:10:25 UTC+1 schrieb Daniel LaLiberte:
>
> 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]
> <javascript:>> 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]
>> <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> Visit this group at
>> http://groups.google.com/group/google-visualization-api.
>> For more options, visit https://groups.google.com/d/optout.
>>
>
> Hi Daniel,
you seem to be a specialist. I have a similar problem but I want to import
the data to be drawn from different spreadsheets, each indicating the
statistics for a different year. The user should be able select by year.
I do not fully understand how to relate the proper query to the selection
(see code below). Or should I save all data in one spreadsheet, import it
and then just select the proer row?
Thanks
Bernd
>
> google.load("visualization", "1.1", {packages:["corechart"]});
> google.setOnLoadCallback(drawChart);
>
> function dataCap(){
> var dataCap = document.getElementById("selectedYear").value;
> document.getElementById('show').innerHTML = "This is your selection:"
> + dataCap;
> }
>
> function drawChart() {
>
> var query2012 = new google.visualization.Query(
>
> 'https://docs.google.com/spreadsheets/d/1kBZYgsclc4QNvwIKhVWzLbVcXQMaGRS1cYNib3wQ_jM/edit?usp=sharing');
>
>
> query2012.send(handleQueryResponse);
> var query2013 = new google.visualization.Query(
>
> 'https://docs.google.com/spreadsheets/d/19ffnmpK2yWdr09szg65OiL_a3pXVCcDoTbiZ7gOU8uk/edit?usp=sharing');
> query2013.send(handleQueryResponse);
> var query2014 = new google.visualization.Query(
>
> 'https://docs.google.com/spreadsheets/d/17mPmD7pFJ386xRerGIQcAUT0uVYRC57KnPgk40pQedw/edit?pli=1#gid=0');
>
>
> query2014.send(handleQueryResponse);
>
>
> }
>
> function handleQueryResponse(response) {
> if (response.isError()) {
> alert('Error in query: ' + response.getMessage() + ' ' +
> response.getDetailedMessage());
> return;
> }
>
> var data = response.getDataTable();
> var chart = new
> google.visualization.ColumnChart(document.getElementById('columnchart'));
> var options = {
> width:1200,
> height:500,
> hAxis: {
> slantedText:true,
> slantedTextAngle:70
> },
> };
>
> chart.draw(data, options)
> }
> </script>
> <title>ICSOC Statistics</title>
> </head>
>
> <body>
> <select id="selectedYear" onchange="dataCap()">
> <option value="2014">query2014</option>
> <option value="2013">query2013</option>
> <option value="2012">query2012</option>
> </select>
> <span id='columnchart'></span>
> --
> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2>
> - 978-394-1058
> [email protected] <javascript:> 5CC, Cambridge MA
> [email protected] <javascript:> 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.
