Ha, I feel like I'm one of those Zen parables where the newbie monk enters the monastery and approaches the master...
Now I see it. Copying and pasting the entire chart wrapper inside the selectHandler() function seems to do the trick. As for the DataView, I have spent a lot of time trying to do it that way but could not get it to work. However, I haven't tried setDataTable() because I wasn't sure of the syntax, and this wasn't clear to me from the documentation. So I ended up doing things the clunky way you observed. I agree it would be very cool if I could use DataView for many reasons. All tips appreciated. Thank you again for your help on this. Nick On Fri, Oct 2, 2015 at 4:02 PM, 'Daniel LaLiberte' via Google Visualization API <[email protected]> wrote: > Ah... well that's not how JavaScript works. You are not actually passing > variables into the chart options, but instead, you are passing in the > result of evaluating the expressions, which happen to be variables. So you > only get the values of the variables at the time you constructed the > options and passed the options into the chart wrapper. > > You should modify and set the options on the chart wrapper each time the > control is changed and you update the data. > > By the way, in your loop over all rows to change the data, you should > probably not do it that way. It would be better to construct a new > DataView and set the columns with setColumns(), and then set the chart > wrapper data table to this data view with setDataTable(). > > > On Fri, Oct 2, 2015 at 10:50 AM, Nick Dunbar <[email protected]> > wrote: > >> Dan, >> >> The jsfiddle has the same issue that I am trying to solve, namely that >> two chart titles ( on the vAxis and hAxis) don't update when a control >> event occurs. So it initialises with vAxis = 'J' and hAxis = 'D', but these >> don't change when the dashboard selection is made. The two variables label1 >> and label2 that I passed into chart options should be doing that. >> >> Thanks again for your help, >> >> Nick >> >> On Fri, Oct 2, 2015 at 3:23 PM, 'Daniel LaLiberte' via Google >> Visualization API <[email protected]> wrote: >> >>> Nick, >>> >>> Your code seems to work as expected for me. >>> http://jsfiddle.net/dlaliberte/o7oo4jLr/ >>> >>> I don't see that you are changing the options for the chart, so that >>> would explain why the axis titles don't change. But the tick values are >>> changing according to the range of the data. >>> >>> Note that when using jsfiddle, you typically need to change the options >>> on the left to "No wrap - in <body>" >>> >>> On Thu, Oct 1, 2015 at 3:29 PM, Nick Dunbar <[email protected]> >>> wrote: >>> >>>> Hi Dan, >>>> Thanks for offering to take a look. I've tried putting this in a >>>> JSFiddle but can't get it to work. I hope you don't mind if I paste the >>>> code below. >>>> I really appreciate your help. >>>> Best, >>>> Nick >>>> >>>> <html> >>>> <head> >>>> <script type="text/javascript" src="https://www.google.com/jsapi >>>> "></script> >>>> <script src="http://code.jquery.com/jquery-1.10.1.min.js";></script> >>>> <script type="text/javascript"> >>>> >>>> google.load('visualization', '1', {packages: ['controls']}); >>>> google.setOnLoadCallback(drawChart); >>>> >>>> >>>> function drawChart () { >>>> var query = new google.visualization.Query(' >>>> https://docs.google.com/spreadsheets/d/1-McDAQ_77-WnqjMcka1eu9ZO_U35kzcy3C-idbbqJ8Y/edit?usp=sharing' >>>> ); >>>> query.send(handleQueryResponse); >>>> function handleQueryResponse(response) { >>>> if (response.isError()) { >>>> alert('Error in query: ' + response.getMessage() + ' ' + >>>> response.getDetailedMessage()); >>>> return; >>>> } >>>> >>>> >>>> var data = response.getDataTable(); >>>> var columnsTable = new google.visualization.DataTable(); >>>> var initState={selectedValues: []}; >>>> var members = data.getNumberOfRows(); >>>> console.log(members); >>>> var numberofmetrics = (data.getNumberOfColumns()-3)/2; >>>> console.log(numberofmetrics); >>>> var metrics = new Array(numberofmetrics); >>>> for (var i = 0;i<numberofmetrics;i++) { >>>> metrics[i] = data.getValue(i,data.getNumberOfColumns()-1); >>>> console.log(metrics[i]); >>>> } >>>> var label1 = data.getColumnLabel(4); >>>> var label2 = data.getColumnLabel(4 + numberofmetrics); >>>> var label3 = data.getColumnLabel(data.getNumberOfColumns()-2); >>>> var label4 = data.getColumnLabel(1); >>>> columnsTable.addColumn('string', 'member'); >>>> columnsTable.addColumn('number', label1); >>>> columnsTable.addColumn('number', label2); >>>> columnsTable.addColumn('string', label3); >>>> columnsTable.addColumn('number', label4); >>>> columnsTable.addColumn({type: 'string',role: 'style'}); >>>> >>>> console.log(metrics); >>>> for (var i=0; i<members; i++) { >>>> columnsTable.addRow([ data.getValue(i,0), data.getValue(i,4), >>>> data.getValue(i,4 + numberofmetrics), >>>> data.getValue(i,data.getNumberOfColumns()-2),data.getValue(i,1),'']); >>>> } >>>> console.log(columnsTable.getNumberOfRows()); >>>> initState.selectedValues.push(metrics[0]); >>>> >>>> >>>> >>>> var Filter1 = new google.visualization.ControlWrapper({ >>>> controlType: 'CategoryFilter', >>>> containerId: 'Filter1_div', >>>> dataTable: data, >>>> options: { >>>> filterColumnLabel: 'metrics', >>>> ui: { >>>> label: 'Metric', >>>> allowTyping: false, >>>> allowMultiple: false, >>>> allowNone: false, >>>> selectedValuesLayout: 'aside', >>>> 'caption': 'Choose metric', >>>> cssClass: 'columnFilter_class' >>>> } >>>> }, >>>> state: initState >>>> }); >>>> >>>> >>>> var chart = new google.visualization.ChartWrapper({ >>>> chartType: 'BubbleChart', >>>> containerId: 'chart_div', >>>> dataTable: columnsTable, >>>> options: { >>>> title: 'Dashboard test', >>>> width: 800, >>>> height: 500, >>>> backgroundColor: 'transparent', >>>> interpolateNulls: true, >>>> animation:{ >>>> duration: 500, >>>> easing: 'out' >>>> }, >>>> vAxis: {format: '###,###.#', textStyle: {fontSize: 12},title: label2}, >>>> hAxis: {title: label1}, >>>> bubble: {textStyle: {color: "none"}}, >>>> sizeAxis: {minSize: 3}, >>>> series: { >>>> "Bill": {color: 'blue'}, >>>> "Ann": {color: 'red'}, >>>> "Kevin": {color: 'green'}, >>>> "Sally": {color: 'orange'} >>>> }, >>>> cssClass: 'BubbleChart_class', >>>> } >>>> }); >>>> >>>> function selectHandler() { >>>> var state1 = Filter1.getState(); >>>> console.log(state1.selectedValues[0]); >>>> var metricindex = metrics.indexOf(state1.selectedValues[0]); >>>> console.log(metricindex); >>>> label1 = data.getColumnLabel(metricindex+1); >>>> label2 = data.getColumnLabel(metricindex+1 + numberofmetrics); >>>> for (var i=0; i<members; i++) { >>>> columnsTable.setValue(i,1,data.getValue(i,metricindex+1)); >>>> columnsTable.setValue(i,2,data.getValue(i,metricindex+1 + >>>> numberofmetrics)); >>>> columnsTable.setColumnLabel(1,label1); >>>> columnsTable.setColumnLabel(2,label2); >>>> } >>>> >>>> chart.draw(); >>>> >>>> var formatter = new google.visualization.NumberFormat({ >>>> pattern: '\u00A3###,### ', >>>> fractionDigits: 1 >>>> }); >>>> var formatter2 = new google.visualization.NumberFormat({ >>>> pattern: '##.# percent', >>>> }); >>>> for (var i=0;i<numberofmetrics;i++) { >>>> if (i<numberofmetrics-2) { >>>> formatter.format(data, i, i+numberofmetrics); >>>> } else { >>>> formatter2.format(data, i); >>>> } >>>> } >>>> } >>>> google.visualization.events.addListener(Filter1, 'statechange', >>>> selectHandler); >>>> >>>> Filter1.draw(); >>>> >>>> selectHandler(); >>>> >>>> // Need to find a way to make this update when control changes >>>> var state1 = Filter1.getState(); >>>> document.getElementById("title").innerHTML = state1.selectedValues; >>>> $(document).ready(function(){ >>>> $("Filter1_div").change(function(){ >>>> document.getElementById("title").innerHTML = >>>> state1.selectedValues; >>>> }); >>>> }); >>>> >>>> } >>>> } >>>> </script> >>>> >>>> </head> >>>> >>>> <body> >>>> <div id="dashboard"> >>>> <div id="Filter1_div"></div> >>>> <h4 id="title"></h4> >>>> >>>> <div id="chart_div"></div> >>>> >>>> </div> >>>> </body> >>>> </html> >>>> >>>> On Tue, Sep 29, 2015 at 6:24 PM, 'Daniel LaLiberte' via Google >>>> Visualization API <[email protected]> wrote: >>>> >>>>> Nick, >>>>> >>>>> The particular way you are getting the label and passing it to chart >>>>> wrapper options could make a difference. Can you point us to a page that >>>>> demonstrates what you are seeing? It would be best if you can put it in >>>>> something like a jsfiddle. >>>>> >>>>> On Tue, Sep 29, 2015 at 12:25 PM, <[email protected]> wrote: >>>>> >>>>>> I am using category filters from the controls package to redraw line >>>>>> charts and bubble charts based on different datasets each with a >>>>>> different >>>>>> filterColumnLabel. >>>>>> >>>>>> The charts redraw fine when the listener event occurs, but when I get >>>>>> the label via getState() and pass it as a variable into the chart wrapper >>>>>> options, it only uses it the first time the chart is drawn, but not >>>>>> subsequent times. Even when I try to force it to redraw, it doesn't >>>>>> re-render the chart axes and titles. >>>>>> >>>>>> Why is this? Is there a fix? >>>>>> >>>>>> Thanks, Nick >>>>>> >>>>>> -- >>>>>> 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. >>>>>> To view this discussion on the web visit >>>>>> https://groups.google.com/d/msgid/google-visualization-api/47bd3b7d-07e9-4245-ba78-2d92b2e7360d%40googlegroups.com >>>>>> <https://groups.google.com/d/msgid/google-visualization-api/47bd3b7d-07e9-4245-ba78-2d92b2e7360d%40googlegroups.com?utm_medium=email&utm_source=footer> >>>>>> . >>>>>> 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 a topic in the >>>>> Google Groups "Google Visualization API" group. >>>>> To unsubscribe from this topic, visit >>>>> https://groups.google.com/d/topic/google-visualization-api/XnWG0YvbDDc/unsubscribe >>>>> . >>>>> To unsubscribe from this group and all its topics, 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. >>>>> To view this discussion on the web visit >>>>> https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPLt9GPWDy_iWNHbxZYOrvsyxHh1Tq_P%2BRfSxZ27D5G1w%40mail.gmail.com >>>>> <https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPLt9GPWDy_iWNHbxZYOrvsyxHh1Tq_P%2BRfSxZ27D5G1w%40mail.gmail.com?utm_medium=email&utm_source=footer> >>>>> . >>>>> >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> -- >>>> 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. >>>> To view this discussion on the web visit >>>> https://groups.google.com/d/msgid/google-visualization-api/CAO5F7cskQfy_9VchAR4C5iyLqGUDQXbCe39deTV5SnQO9DX7JA%40mail.gmail.com >>>> <https://groups.google.com/d/msgid/google-visualization-api/CAO5F7cskQfy_9VchAR4C5iyLqGUDQXbCe39deTV5SnQO9DX7JA%40mail.gmail.com?utm_medium=email&utm_source=footer> >>>> . >>>> >>>> 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 a topic in the >>> Google Groups "Google Visualization API" group. >>> To unsubscribe from this topic, visit >>> https://groups.google.com/d/topic/google-visualization-api/XnWG0YvbDDc/unsubscribe >>> . >>> To unsubscribe from this group and all its topics, 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. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOuO7YrmsDnPyAGM3APM7nVxTJUfgTF1rr6hb2NnUT_tA%40mail.gmail.com >>> <https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOuO7YrmsDnPyAGM3APM7nVxTJUfgTF1rr6hb2NnUT_tA%40mail.gmail.com?utm_medium=email&utm_source=footer> >>> . >>> >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> -- >> 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. >> To view this discussion on the web visit >> https://groups.google.com/d/msgid/google-visualization-api/CAO5F7ctqeTJFGO-q4cv1a6NCAqupMKXmobVFROQ0y41Y%3DENVHw%40mail.gmail.com >> <https://groups.google.com/d/msgid/google-visualization-api/CAO5F7ctqeTJFGO-q4cv1a6NCAqupMKXmobVFROQ0y41Y%3DENVHw%40mail.gmail.com?utm_medium=email&utm_source=footer> >> . >> >> 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 a topic in the > Google Groups "Google Visualization API" group. > To unsubscribe from this topic, visit > https://groups.google.com/d/topic/google-visualization-api/XnWG0YvbDDc/unsubscribe > . > To unsubscribe from this group and all its topics, 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. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMhH_zMqrhk%2BJzJrCRWC6_om1_8Yv70wfy1Tz%2BK%3DH5%3DJQ%40mail.gmail.com > <https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJMhH_zMqrhk%2BJzJrCRWC6_om1_8Yv70wfy1Tz%2BK%3DH5%3DJQ%40mail.gmail.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- 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. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAO5F7cvP%2B%2BV-U9NP8ec_c-v-vx8WtAsg9NYL6FU%2BVE3KAE-dqw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
