Variable from category filter in chart wrapper options refuses to update after event

dunba...@gmail.com

unread,

Sep 29, 2015, 12:25:50 PM9/29/15

to Google Visualization API

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

Daniel LaLiberte

unread,

Sep 29, 2015, 1:24:39 PM9/29/15

to Google Visualization API

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.

--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.

--

Daniel LaLiberte - 978-394-1058

dlaliberte@Google.com 5CC, Cambridge MA

daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Nick Dunbar

unread,

Oct 1, 2015, 3:29:38 PM10/1/15

to google-visua...@googlegroups.com

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>

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>

</body>

</html>

--
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 google-visualizati...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
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.

Daniel LaLiberte

unread,

Oct 2, 2015, 10:23:17 AM10/2/15

to Google Visualization API

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>"

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAO5F7cskQfy_9VchAR4C5iyLqGUDQXbCe39deTV5SnQO9DX7JA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Nick Dunbar

unread,

Oct 2, 2015, 10:50:14 AM10/2/15

to google-visua...@googlegroups.com

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

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJOuO7YrmsDnPyAGM3APM7nVxTJUfgTF1rr6hb2NnUT_tA%40mail.gmail.com.

Daniel LaLiberte

unread,

Oct 2, 2015, 11:02:56 AM10/2/15

to Google Visualization API

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().

To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAO5F7ctqeTJFGO-q4cv1a6NCAqupMKXmobVFROQ0y41Y%3DENVHw%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

Nick Dunbar

unread,

Oct 2, 2015, 12:12:30 PM10/2/15

to google-visua...@googlegroups.com

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

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.

Reply all

Reply to author

Forward