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 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/CAOtcSJOuO7YrmsDnPyAGM3APM7nVxTJUfgTF1rr6hb2NnUT_tA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
