Mobile Charts

I spent all day yesterday making this really nice graph in a spreadsheet, but as I was getting ready for bed, it occurred to me that my masterpiece is probably not very mobile-friendly. :anguished:

The problem, I think, is that it is a line graph which is rectangular in shape because I am showing data over a period of time, and so it is wider than it is tall. While it looks awesome on my laptop, on an iPhone4 I will probably have issues.

How do you make graphs and charts “responsive”?

Try making the image width 100% and let the user browse in landscape mode which will fill the screen.

Usually you would convert horizontal data into a vertical representation for mobile. Something like this example (that’s just one I found at random but there are other examples about).

It’s similar to how you would linearise tables for mobile by making them vertical rather than horizontal.

If the chart must remain horizontal then you could put the element in a box with overflow:scroll so that mobile users could at least scroll it sideways without it breaking the layout. (A similar example is seen here for table data)

Sorry, but that strips all meaning from the bar chart. (I don’t even know how to read it.)

I was thinking of making my line graph less rectangular in my spreadsheet first - very doable. Then I was thinking what John mentioned about making the width 100% or at least scalable.

I guess it depends on the particular graph/chart and how it looks as you decrease screen size?

Another option would be to make two graphs - one that is rectangular for desktop and one that is closer to square for mobile.

Thoughts?

That was just an example but it shouldn’t be too far a stretch to have the horizontal bars have various widths so that you get a vertical bar graph instead of a horizontal one thus keeping some integrity to the display,[quote=“mikey_w, post:4, topic:210866”]
Another option would be to make two graphs - one that is rectangular for desktop and one that is closer to square for mobile.
[/quote]

I’m always against doing things twice as that means twice the maintenance and twice the code. Sometimes you can’t avoid it but it would be my last choice. I would look for other solutions first.

For mobile you really need to linearise the data to make it usable. Shrinking charts to a microscopic size so they fit is not much good and in those cases sideways scrolling would be better.

Do you have an example of the chart you are working with?

This is the sort of thing I was talking about.

That’s just a rough mock up but the sort of thing I’d be looking at. (Click ‘edit on codepen’ to see the example more easily and then resize your browser window.)

The inline styles are there so that the back end can write the values into them easily to produce the display when the page loads.

That’s odd. When I Run the Pen, or go into Edit Pen, I don’t see the bar heights in the landscape view. In the preview, before you hit “Run Pen” they show, and in the portrait view the widths show. :confused:

Thanks, I guess you were using Firefox as Chrome and IE are ok.

Firefox needs some help which I have now added so try now.:slight_smile:

1 Like

Yes, it’s Firefox.
It’s working now.

What I saw was what appeared to be a bunch of rectangles touching - almost like a bunch of buttons crammed together.

If what I was supposed to see was a horizontal bar chart, then that is different, although the orientation of the bars is somewhat independent of the issue.

From my experience, bar charts are less likely to be an issue, but a line graph/chart where you are tracking data over a long period of time would be an issue. (For example, stock prices o ver the last 100 years.)

Yeah, I guess that defeats the purpose of being responsive.

True.

I will try and post one today.

For a bar chart, I think that solution works well.

Is that done all using CSS or does it rely on JavaScript?

Again, my (potential) problem is with a line graph which is different. Let me try and post an example today and that may help.

Regardless, I am intrgued by your responsive bar chart and would like to learn how to make those on my own! :slight_smile:

That’s just html/css.

That’s the point of CodePen, you can examine the source code easily, and alter it yourself. you can see there’s no js.

Line graphs are awkward because you can’t do them automatically in css and you need to use either js or svg to create them and of course would need js to dynamically joint the dots as it were. (You can’t actually do line graphs at all in pure css unless you use transforms and rotate boxes so that a top border fits the points you want. There are a couple of other trick methods using mitred borders or sprite images but they are less than satisfactory and need millions of calculations to get right).

You would be better of using an existing library or similar as line graphs soon get very complicated. There are a number here with this one looking good although I haven’t tested any.

Maybe someone else can suggest something better.

@PaulOB,

Here is a contrived example…

(Looks great on a desktop, but would require some adaptation for a smartphone.)

As far as line graphs go, is it a sin to take a screen-shot like I am doing here and place that in my webpage?

And what about @John_Betong’s idea of using width:100% on such an image?

That is a simple solution, as he said, mobile users can turn their device and view in landscape orientation if they want to.

I’ve seen people do that with tables, in that case, Yes. For bar charts, Paul’s looks like a good semantic, machine readable solution. But as mentioned, line charts are harder to make dynamically, it really needs some scripting.
Overall I prefer a dynamic chart/graph, because you can keep it up to date by pulling the data from a database and letting it redraw itself.
I have used Highcharts before for line graphs. I found the initial setup difficult, because I’m not that good the js, but did manage to get it working. In my case the data gets pulled from an sql database via php and is fed to the js in an array.
The result is an svg, which may not be as machine readable as Paul’s table, but certainly better than a static image. For one, the data can be dynamically updated, but it also lets you zoom on the chart axies for a closer look.

If all you are placing is an image of a line graph then we are simply talking about images and you would scale them in the same way that you do for all images so you should have no problem making them smaller for mobile except that they may get a little too small. Just set max-width:100% and height:auto on the image (assuming it sits in a fluid container ) and it will scale.

Of course if the line graph is meant to be important data then its not very accessible and you would need to use some text to explain what the image represents unless of course its just decoration.

In another thread, @TechnoBear suggested adding supporting data to my graphs and charts. I am open to that idea, but if I have a large table/dataset that makes the graph or chart, where should I put it?

For instance, if I have a two page article on something and my line graph was on page one, adding a table tot he article that in itself is 3 pages long would totally trash the original content’s flow.

Do I just add a note and append it to the end of the article? Is there some HTML/CSS trick I should use?

Anything I graph or chart is for critical analysis, and so I want people to not only see the numbers behind the “pretty picture”, but be able to scrutinize them. At the same time, I don’t want to mess up the appearance or readablility of the original article - which is why people use graphs and charts in the first place!!

You can add more information about an image using the longdesc attribute but there have been raging discussions about its use over the years and whether its accessible or not. It was removed from html5 but re-instated so you would need to read up on it and check whether it is still a viable alternative (@Stomme_poes would be the one to know).

I suppose you could use a real table and just place a background image over the table and thus keep the integrity of the data in the html. Something like this perhaps although you would probably need to limit the height and width of the table to match the image more closely rather than stretching the image over the table as in my example.

I haven’t really thought about the implications of the background image method as it was just an idea I had but as the table is in the html and the html is not hidden in any way then I guess it would be available to screen readers and the like as well as seo.

Just thinking out loud really :slight_smile:

@PaulOB,

Maybe this is a case where using JavaScript to hide/expand the data table would be useful? By default the table would be collapsed, but inquisitive minds could expand it if they wanted to see the actual data. Either way, the data would be in the HTML and therefore able to be seen by screen-readers and spiders, right?

Have you a test page that members can view and pass their comments? If you are reluctant to show the page I can recommend creating a free domain using “dot.tk” and running your free domain from your server or even a free web-hosting service.

I assume you do not have a smartphone. Do you know anyone that does have a smartphone and can show the results?

Have you created a test page and tried one of numerous “online iphone emulators” to view the page?

One very important point I failed to mention was the smartphone’s ability to pinch and zoom allowing possible small text to be magnified.