Mobile Charts

[John_Betong]

@mikey_w

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.

Why not have a link, immediately following the image, that opens a new page with the “image-source-data.html”

[mikey_w]

@John_Betong

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.

Not yet.

@John_Betong

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

I hope to save up and buy a used one off of eBay this coming year, although Chrome’s device emulator - does it have a proper name? - seems to work pretty well.

@John_Betong

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

I have for my website in general, but I haven’t converted this article to a web page yet. I also have to learn how to make responsive images - I think I had a thread on this several months ago but it go put on hold because I can only learn so much at a time!

@John_Betong

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

It seems to me that if I can make the original line graph more square, that solves a lot of the issues. Then I think your width: 100% will also help. It also seems okay to force smartphone users to scroll to the right for a rectangular graph - how else could you see it if you have a rectangular graph on a square display?

Learning how to do this with JavaScript sounds cool, but since I don’t know any that is a longer term solution.

Once again, I am over my head in new learning I have to do!

[mikey_w]

@John_Betong

Why not have a link, immediately following the image, that opens a new page with the “image-source-data.html”

That is an option, but if I used JavaScript to expand/collapse it, wouldnt that be better because the data would be on the same page as the graph and there for more accessible and better for search engines?

I could also add an anchor (?) and place the table at the end of the page almost like a footenoote, so then people could view in greater detail the data, but it would be out of the way when you read the article. I think I like that.

[PaulOB]

@mikey_w

Maybe this is a case where using JavaScript to hide/expand the data table would be useful?

Yes that’s an option as long as it is hidden off screen and not with display:none etc.

You could even incorporate into my demo and just remove the image to show the table. Here’s an updated example:

http://www.pmob.co.uk/temp2/chart6.html

The above uses the checkbox hack to hide and show but could be converted to js pretty easily if required. Again its just a proof of concept without deep thought behind it yet.

@mikey_w

I could also add an anchor (?) and place the table at the end of the page almost like a footenoote, so then people could view in greater detail the data,

Yes that would be a good alternative.

[TechnoBear]

This brief paragraph from WebAIM might be helpful:

http://webaim.org/techniques/alttext/#complex

[John_Betong]

@mikey_w

It also seems okay to force smartphone users to scroll to the right for a rectangular graph - how else could you see it if you have a rectangular graph on a square display?

Try this Explanation from Apple.

Basic Zooming Using the Pinch Gestures

Edit
I think the pinch and zoom feature is enabled with a one line meta tag that I cannot access at the moment because pecking on a mobile Maybe someone could confirm if the meta tag is required or all images have this feature.

[PaulOB]

@John_Betong

Maybe someone could confirm if the meta tag is required or all images have this feature.

Pinch and zoom is available unless you have disabled user-scale in your meta tag. (If that’s what you were asking).

@mikey_w

It also seems okay to force smartphone users to scroll to the right for a rectangular graph - h

That’s the method I suggested in my first post and showed an example of how a wide table could be sideways scrolled on small screen, although the example seems to be missing the link to jquery at the moment as the edge of the table should get a shadow to indicate there is more to the side and visible scrollbars should appear. (The problem with sideways scrolling on small devices is that there is no clue that you need to scroll sideways as scrollbars don’t appear automatically like normal devices.)

[mikey_w]

@PaulOB

@mikey_w

It also seems okay to force smartphone users to scroll to the right for a rectangular graph - h

That’s the method I suggested in my first post and showed an example of how a wide table could be sideways scrolled on small screen, although the example seems to be missing the link to jquery at the moment as the edge of the table should get a shadow to indicate there is more to the side and visible scrollbars should appear.

Yes, I saw that.

@PaulOB

(The problem with sideways scrolling on small devices is that there is no clue that you need to scroll sideways as scrollbars don’t appear automatically like normal devices.)

Sounds like a good place to add a media query with text tht appears like this…

Scroll right to see entire table --->