Hey Bernd, did you see my response in another thread: https://groups.google.com/forum/#!topic/google-visualization-api/ixgrUl0NX-8
On Wed, Feb 4, 2015 at 2:09 PM, Bernd <[email protected]> wrote: > Hi Daniel, > > I thought I had an elegant solution with a selection in the query part of > the draw function (see code below) but no chart appears on screen. My > programming experience is quite rusty, I must admit. > > Thanks > > Bernd > > google.load("visualization", "1.1", {packages:["corechart"]}); > google.setOnLoadCallback(drawChart); > > var dataCap =2014"; > > function dataCap(){ > dataCap = document.getElementById("selectedYear").value; > } > > function drawChart() { > if (dataCap == "2012") { > var query = new google.visualization.Query( > ' > https://docs.google.com/spreadsheets/d/1kBZYgsclc4QNvwIKhVWzLbVcXQMaGRS1cYNib3wQ_jM/edit?usp=sharing'); > > query.send(handleQueryResponse); > }; > if (dataCap == "2013") { > var query = new google.visualization.Query( > ' > https://docs.google.com/spreadsheets/d/19ffnmpK2yWdr09szg65OiL_a3pXVCcDoTbiZ7gOU8uk/edit?usp=sharing' > ); > query.send(handleQueryResponse); > }; > if (dataCap == "2014") { > var query = new google.visualization.Query( > ' > https://docs.google.com/spreadsheets/d/17mPmD7pFJ386xRerGIQcAUT0uVYRC57KnPgk40pQedw/edit?pli=1#gid=0'); > > query.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:1400, > 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">ICSOC 2014, Paris</option> > <option value="2013">ICSOC 2013, Berlin</option> > <option value="2012">ICSOC 2012, Shanghai</option> > </select> > <div id="columnchart"></div> > </body> > > > Hi Bernd, >> >> I can usually address the specialized questions here pretty quickly, but I >> strive to also be a generalist. >> >> First of all, your drawChart() function is calling all three queries, one >> after the other, and handling them with the same function, >> handleQueryResponse, which then takes the data from the response and draws >> it. So you would end up with just one chart being drawn, the last one, and >> no ability to select. >> >> You *could* put all your data in one table, if it has a similar >> structure, but then you would need to set up either a filter to select the >> correct subset of the data, or create different DataViews that select the >> correct columns or rows (depending on how you do it). But it looks like >> separate tables would be more appropriate, and perhaps easier to use. >> >> Doing all the queries one after the other is fine, if you want to have >> the data available to switch between quickly, though it will take that much >> more time up front to fetch all the data. But you'll need to change how >> you handle the queries rather than draw the data immediately. >> >> What you need to do, to allow selection, could be very similar to the >> code I included in my last message. You just need to populate the >> dataTables in your handleQueryResponse, and then you can draw the >> corresponding table from your select onchange handler. >> >> >> On Mon, Jan 26, 2015 at 1:31 PM, Bernd <[email protected]> wrote: >> >>> >>> >>> 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("selec >>>> ted2").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. >>>>> >>>> >>>> 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] 5CC, Cambridge MA >>>> [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. >>> >> >> >> >> -- >> Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> >> - 978-394-1058 >> [email protected] 5CC, Cambridge MA >> [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. > -- 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.
