Can a DataView's setColumns() method be used to hide all the columns in a line chart?

108 views
Skip to first unread message

rick...@gmail.com

unread,
Aug 16, 2016, 1:28:08 PM8/16/16
to Google Visualization API
I'd like give the user the ability to hide and show lines on a line chart.  
But eventually a user will 'turn off' all the columns of a chart so I'm looking for a way to hide ALL the columns of a chart.

Given this partial pseudo code:

myDataTable.addColumn('date', 'Month');
myDataTable.addColumn('number', 'Line 1');
myDataTable.addColumn('number', 'Line 2');
myDataTable.addColumn('number', 'Line 3');
... then add appropriate data to myDataTable...

myDataView    = new google.visualization.DataView(myDataTable);
myDataView    .setColumns([0, 1, 2, 3]);
myLineChart   .draw(myDataView, myOptions);
(Shows all the columns of the chart)

But when I call this:

myDataView    .setColumns([0]);
myLineChart   .draw(myDataView, myOptions);

I get this error: 
 Not enough columns given to draw the requested chart. 

I've also tried 
myDataView    .hideColumns([1,2,3])
draw...
and get the same error message.

Is there anyway to draw a chart when all the columns need to be hidden?



Daniel LaLiberte

unread,
Aug 16, 2016, 2:21:06 PM8/16/16
to Google Visualization API
The charts are generally resistant to being draw with no columns of data, other than the domain column.  At the very least, charts won't know how to generate the target axis unless you specify the bounds with the viewWindow option.

But we haven't put much effort into drawing an empty chart because there is little demand for that.  I can see why it would be useful in special situations, however, and we should find a way at some point.

As a workaround, you might try adding a special column will all null values, which you never remove but also it won't show anything.  I'm not sure how well that will work either, but it is worth a shot.

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/16af04f2-8015-45ce-b24c-aeba4dc0e60b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

rick...@gmail.com

unread,
Aug 17, 2016, 6:41:20 AM8/17/16
to Google Visualization API
It's easy to imagine that the chart code could have a difficult time doing its job without any columns.

I tried the workaround that you suggest but the issue is that all series on a given axis must be of the same data type.  So If I add an 'always shown' column it needs to be a number (I'm drawing a line chart in this case).  That number will draw its line on the chart and add an entry in the legend. 
If you know of any way to create a valid data point for a numeric column that doesn't show anything on the chart and doesn't create a legend entry that would be helpful but I don't think that exists. At least I don't see anything like it in the docs.

The only other approach is inelegant and outside the chat api - redefine the behavior of a list of checkboxes so they never allow all of them to be turned off.  But changing the interaction of the venerable checkbox would have a negative affect on the user experience so I'm going to keep looking for some other solution.

Just for your reference, here are two use cases prompting this.

1. the user wants to compare a few of the series on the chart rather than deal with all of them at once (and sooner or later they'll turn them all off).
2. the data has outlying series that expand the vertical axis' range which visually compresses the non-outlying values.  When the chart is drawn without the outliers the vertical axis range is re-scaled so the similarities and differences of the non-outliers are more apparent.

If I find some reasonable solution I'll post it to this thread.

Thank you very much for your help.
To post to this group, send email to google-visua...@googlegroups.com.



--
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Aug 17, 2016, 10:09:31 AM8/17/16
to Google Visualization API
You can turn off the visibility of a series in the legend.  See visibleInLegend for the 'series' option.

You can make the points of a 'scatter' series invisible by setting the pointSize to 0.

It would be awkward for the user, at best, to not be able to deselect all series.  However, I can't imagine they would care much if the chart is not drawn correctly or not visible at all when there are no columns selected, so perhaps make a check for that and only draw the chart when there is one or more columns selected.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

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

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/67ba742d-77ae-445d-bf43-bf47eeedec4c%40googlegroups.com.

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



--

rick...@gmail.com

unread,
Aug 17, 2016, 1:34:20 PM8/17/16
to Google Visualization API
I followed your suggestions and have a working solution: 
users check/uncheck checkboxes and the appropriate lines on the chart appear and disappear, that's all. Very nice.
If you are interested, here are the details.

I thought about your suggestion to just clear the chart when the user unchecks the last checkbox but I realized that I wanted all the checkboxes do exactly the same thing - just hide or show a line and leave the structure of the chart unchanged.
Clearing the chart would give  last checkbox a different functionality, and that change draws too much of the user's attention.

So I followed your suggestion, added an 'always shown' column and data, then set its series object like this:

chart.options.series = { 4 : {lineWidth: 0, pointsVisible: false, visibleInLegend: false }}

I thought that I would need to manage the integer that is used as a property name for the series in question. As the user hide's and shows columns that integer changes. So I used DataView.getNumberOfColumns() to figure where the 'always shown' placeholder is at the moment, then rewrite chart.options.series with the appropriate integer instead of 4 above).

Then I realized I have enough control over the data that I can put in the placeholder column data always in column 0.  That way I can set the series object at index 0 and be done with it.

chart.options.series = { 0 : {lineWidth: 0, pointsVisible: false, visibleInLegend: false }}

Although the solution is working very well it created an issue with another part of the UI. I let users select items in the legend and 'do things' in other parts of the UI as well as the chart.  I had been relying on the selection object that the chart generates to get the necessary column index but those indexes change as columns are hidden/shown. I had to start looking-up the index of the selected column in the underlying (stable) DataTable and use that.

neededIndex = chart.DataView.getTableColumnIndex(chart.getSelection()[0].column)

Works very well,
Thank you again for your help.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

Daniel LaLiberte

unread,
Aug 17, 2016, 1:40:07 PM8/17/16
to Google Visualization API
That's a lot of extra work to allow the appearance of no series columns.  Makes a good argument for why we should strive to support it in the library.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@googlegroups.com.



--

--
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-visualization-api+unsubscr...@googlegroups.com.

To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

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

Visit this group at https://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/9f8b208a-e21c-4673-ba29-88764c1d7795%40googlegroups.com.

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



--

rick...@gmail.com

unread,
Aug 18, 2016, 4:47:07 AM8/18/16
to Google Visualization API
....setColumns([ ])  or something like it, would have been easier for sure.

Adding a column and a row of data is obviously a workaround, acceptable, but still a workaround.

(The real issue with the extra column is that the UI may not be able to add the necessary 'always shown' data before the the chart and everything else gets built.  The data may come straight from the DB, through some front end framework and used.
In my case I could re-work the data before building the chart and the rest of the UI)
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--

--
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-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at https://groups.google.com/group/google-visualization-api.



--
Reply all
Reply to author
Forward
0 new messages