engaging-computing / rSENSE

A data aggregation and visualization tool for classroom science
10 stars 48 forks source link

Field vis #2141

Closed bdonald25 closed 8 years ago

bdonald25 commented 9 years ago

General description: Bar chart on mobile is not visible when there are a lot of datasets.

live/dev/localhost: live iSENSE Version: v7.0 Logged in (Y or N): N/A Admin (Y or N): N/A

OS: Macintosh Browser/Version: Chrome 42.0.2311.152

Steps to Reproduce: Go to bar chart on a project with a lot of data sets.

screenshot_2015-05-20-23-29-23

393

jaypoulz commented 9 years ago

Ok so scratch the legend idea for pie charts haha. Once again real estate is a major drawback here.

asalani93 commented 9 years ago

Couldn't legends and labels be hidden on mobile? For example, you could get a label for pie chart by clicking the slice of the pie you want to investigate. Same for bar chart. I'm not too familiar with High Charts though, so I don't know if this feasible or not.

bdonald25 commented 9 years ago

It is very easy to turn off the legend with high charts. It just requires a boolean to be set to false.

fgmart-zz commented 9 years ago

this isn't just a mobile issue (see #2176).

Perhaps we can put the key in a scrolling window (at least on desktop)? I guess that's terrible, what are better ideas?

bdonald25 commented 9 years ago

I think you should hide them altogether if you have that many. There are so many colors that make it hard to pick out which bar is which anyways. In this image there are at least 11 green bars. You would still be able to see which data set a bar is by clicking on it.

jaypoulz commented 9 years ago

I agree with Bobby. That also makes this a fairly straightforward fix. Probably shouldn't be assigned to Jake though.

fgmart-zz commented 9 years ago

OK, how to operationalize "too many" ?

On Mon, Jun 8, 2015 at 5:11 PM, Jeremy Poulin notifications@github.com wrote:

I agree with Bobby. That also makes this a fairly straightforward fix. Probably shouldn't be assigned to Jake tho.

— Reply to this email directly or view it on GitHub https://github.com/isenseDev/rSENSE/issues/2141#issuecomment-110141675.

Work Ready Life Ready World Ready

Director, Engaging Computing Group http://www.cs.uml.edu/ecg Associate Professor, Computer Science http://blog.uml.edu/cs Director of Student Success, College of Sciences http://blog.uml.edu/science University of Massachusetts Lowell, 1 University Avenue, Lowell MA 01854 p: 978/934–1964 f: 978/934–2705 email: fredm@cs.uml.edu

jaypoulz commented 9 years ago

Compare the height of the div containing the fields to the size of the vis window, and if it's over some percentage value, hide it.

fgmart-zz commented 9 years ago

We probably also want a button or something to "show anyway" ? it would need some kind of indicator "key has been hidden, click to show" ?

On Mon, Jun 8, 2015 at 10:57 PM, Jeremy Poulin notifications@github.com wrote:

Compare the height of the div containing the fields to the size of the vis window, and if it's over some percentage value, hide it.

— Reply to this email directly or view it on GitHub https://github.com/isenseDev/rSENSE/issues/2141#issuecomment-110204859.

Work Ready Life Ready World Ready

Director, Engaging Computing Group http://www.cs.uml.edu/ecg Associate Professor, Computer Science http://blog.uml.edu/cs Director of Student Success, College of Sciences http://blog.uml.edu/science University of Massachusetts Lowell, 1 University Avenue, Lowell MA 01854 p: 978/934–1964 f: 978/934–2705 email: fredm@cs.uml.edu

bdonald25 commented 8 years ago

Testers: Make sure bar chart looks sane on all screen sizes. Especially when there are a lot of fields.