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.
On Wednesday, August 17, 2016 at 4:09:31 PM UTC+2, Daniel LaLiberte wrote:
>
> 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.
>
> On Wed, Aug 17, 2016 at 6:41 AM, <[email protected] <javascript:>> wrote:
>
>> 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.
>>
>>
>> On Tuesday, August 16, 2016 at 8:21:06 PM UTC+2, Daniel LaLiberte wrote:
>>>
>>> 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.
>>>
>>> On Tue, Aug 16, 2016 at 1:28 PM, <[email protected]> wrote:
>>>
>>>> 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?
>>>>
>>>>
>>>>
>>>> --
>>>> 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
>>>> 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
>>>>
>>>> <https://groups.google.com/d/msgid/google-visualization-api/16af04f2-8015-45ce-b24c-aeba4dc0e60b%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>
>>> [email protected] 5CC, Cambridge MA
>>>
>>
>> On Tuesday, August 16, 2016 at 8:21:06 PM UTC+2, Daniel LaLiberte wrote:
>>>
>>> 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.
>>>
>>> On Tue, Aug 16, 2016 at 1:28 PM, <[email protected]> wrote:
>>>
>>>> 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?
>>>>
>>>>
>>>>
>>>> --
>>>> 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
>>>> 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
>>>>
>>>> <https://groups.google.com/d/msgid/google-visualization-api/16af04f2-8015-45ce-b24c-aeba4dc0e60b%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>
>>> [email protected] 5CC, Cambridge 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]
>> <javascript:>.
>> To post to this group, send email to [email protected]
>> <javascript:>.
>> 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
>>
>> <https://groups.google.com/d/msgid/google-visualization-api/67ba742d-77ae-445d-bf43-bf47eeedec4c%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>
> [email protected] <javascript:> 5CC, Cambridge 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 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.
