Handling graphs as images on mobile?

HTML & CSS
#1

Hello. I am working on a small website that consists of statistics. For now, it will mostly have HTML tables, but some of the data is better viewed as a graph or chart.

Ultimately I am looking for a way to make dynamic charts - a topic for another thread - but for now, I want to use what I have created in LibreOffice Calc.

Where you can often look at a thumbnail and figure out what a photograph is about, the same is not true for my graphs which have lots of detail, including important labels.

So from an HTML/CSS standpoint, what is the best way to handle a screenshot .PNG file of my LibreOffice Calc graphs on desktop and mobile? (With emphasis on the mobile part!)

The simple pages that I have coded for this porject seem to be responsive, and my tables look awesome on mobile, but I am not sure what to do with my pretty graphs (PNGs) that I also want to share with people.

Thanks.

P.S. My webpages currently support down to 375px width. (So if you are on say an iPhone 5, then you have to scroll right to see my tables.)

#2

Well obviously if you have a limited viewport on a mobile device, you just have limited visibility. This is just a limitation that has to be planned around. If you have a complex image with lots of detail, just know you can’t show all that detail on a mobile device all at once.

Most people have come to expect that they can’t see a large image all at once on a mobile device. They do expect to at least be able to scroll to different parts of the image easily.

So you have two options really…

  1. Make some mobile friendly graph that perhaps only has the key details. Do all the labels need to be seen or are some just FYI? Then you can just make it a responsive image (setting a width to 100% or something similar in frameworks like Bootstrap with “imgresponsive” class.

  2. Make the image at full size, but make sure that someone can at least scroll around the image piece by piece. Now obviously the bigger you make the image, the more scrolling they will have to do and perhaps the less they will see in their phone view, but it is really the best you can do.

Maybe even do both. Make a dumbed down responsive version at first, but if they tap the image, it shows a more detailed full size version that they scroll around with. But again this is just a constraint of the device dimensions. Like I said though, users do expect to have “some” limitations when viewing content on a mobile. You should just strive to make it as easy as possible for them.

Hope that brings up some ideas. :slight_smile:

1 Like
#3

Hmmm… Actually, I’m not sure I understand how to implement that. (The solution must be HTML and CSS only.)

Let me put together a simple code example with a sample graph image and post it here and then maybe others can advise me where to go with things?

Hopefully this isn’t to hard to do with HTML/CSS?

#4

Yes everything can be done with HTML and CSS. I am not talking about anything real fancy here. When I say the graph could be mobile friendly with less detail I am only talking about when you make the graphs you make two versions.

The higher detail scrolling version is just showing the full image and then the mobile device by default would do the scrolling. That or you could put the image in a div tag with the CSS “overflow” style applied for scrolling. :slight_smile:

1 Like
#5

@Martyr2,

Trying to get back to this…

When I create a graph in LibreOffice, I simply use SnagIt to take a screenshot which I save as a PNG file.

First off, is there some better way to go from spreadsheet graph to image?

Then are you saying I need to create two sizes of image files? If so, what sizes?

I thought what would be dine is to use CSS to shrink the original screenshot image to whatever size device was viewing it?

So maybe my graph is 600px X 600px (or whatever), and CSS would simply shrink that down to the mobile size. Of course if you do that, then it’s just like you have a thumbnail which is either too small or not enough pixels to see.

(I am not a native mobile user, so things younger people take for granted on mobile are foreign to me. Personally I want to view the Internet on a laptop or bigger!)

I guess seeing my code would help here. Let me try and post a sample tonight…

#6

Attached is some sample code and a sample image/graph.

I would like to know how to make this work the best on both mobile and desktop.

Thanks!

sp_resonsive-image.zip (122.2 KB)