Responsive Charts

Try adding the following code to your css in the report (or in theme/skin css):

  svg { width: 100%;  } 

You set the frx:width to be the maximum size you'd want to display the graph then use the width css to scale down.

As an aside, A little known fact about graphs that are produced by phpSVGraph is that they can be styled with css in some pretty surprising ways. You can actually control legend text sizes label positioning etc using css selectors on the SVG itself!

David, your CSS suggestions above sounds interesting! Maybe you can add a little illustration of what you have in mind in the new svg_demo sample by repeating any of the included graphs there to which you then apply some of these CSS suggestions? Maybe also add a relevant link in the description of such sample about where to go for learning more about what's possible using these CSS techniques? Better still, but probably way more work for you: include it in a future video related to graphing?

MickC, would you mind sharing some of your experiences about using DataTables for making tables responsive? Is there any special action required (like some DataTables related setting somewhere), or is this all taken care of automatically if you're just using dataTables?

Thanks for adding these CSS suggestions to the svg_demo! Interesting! Solution the problem, changes the problem: the way the graphs are now shown now if you maximize your window (with the graph-description to the left of it), makes the graph details a kind of vague to see. If I resize my window, so that this graph -description is shown above the graph, the graph details are very clear. Seems a bit like a contradiction to me: a maximized window shows a smaller size of the charts, which are harder to read.

Not sure if it's the best technique to use, but I'm assuming (didn't test it yet) that changing the 48%/50% ratio in the CSS you added to something like 25%/75% might solve this vague-issue. Other option to consider might be adding a report parm to indicate if you want the graph-description to show above the chart or to the left of it.

Much of this will depend on your theme and whether the theme itself is responsive as well as how much real estate there is left to display the graph (block regions etc).

You could elect to change the size of the graph rendered as well as consider different dimensions. The whole point of responsive design is to adjust based on the size of the display so you wouldn't want to make this parameters based. That just complicates the report (and makes it not responsive). The point of this excercise was to demonstrate reponsive design and I feel like this technique does that. I wouldn't go 70/25 but 66/33 might be an option. Note that the way the demo report was originally delivered it would appear differently based on themes chosen because the table cells did not have width attributes set. So depending on browser size it would've made the text to the left really hard to read because the graph was always a fixed size.

Anyway, I'm unclear as to whether you are requesting a change or not.

Thanks for these extra explanations. 66/33 seems like a good compromise.

Maybe not really related to making it more responsive, but to reduce the amount of scrolling down: can you think of something to further refine svg_demo with a tabbed menu (using frx:menu), so that there is 1 tab for each of the graphs? Is this doable without splitting svg_demo.frx in multiple frx files with 1 file for each such tab? Note: there is no tabbed menu report sample yet, so this could be a great use case to demo that (and make this svg_demo even more impressive).

I made the change. I don't think this is an appropriate candidate for the tabs display, but I'll keep my eye out for one.

It is not really doable without splitting into multiple files althoug you could do some kind of local tabs thing in pure javascript/css, but I just don't think its worth it for this.

I'd like to keep the reports somewhat simple, as it's a lot of work to create/maintain them. Since we've delivered the example, marking this as fixed.

There is an example of a responsive graph with some media queries in the current development snapshot. We should be releasing a new beta soon. I used height:100% inside a containing div and that appears to work on Iphone and Chrome at least.

You are correct about the tables. People generally consider responsive tables to be tables that loose columns when shrunk down to phone size. If the phone size is still too small for just a couple of columns, then I'd use CSS to eliminate it altogether in the phone layout. Generally the graph is more readable on the phone than the table is IMHO.

This is actually a common problem with inline SVG. In order to get it to not preserve whitespace you the svg element must have a perserveAspectRatio="none" attribute, which currently PHP SVGGraph does not support. There are some articles that suggest that this does not work on mobile browsers as well. I could try and hack something in but I'm not sure of the value and we should probably test with other inline SVG to see if it works in enough browsers to be worth while. I've suggested patches in the past to the PHP SVGGraph maintainer and he's been somewhat receptive, so if we can sort out the best strategy he might help out.

Another option would be to use the d3.js library to dynamically transform the object on page load, but I'm not sure about the merits of either of those vs. what you've suggested. We might want to open a separate issue to collaborate on this, or alternatively move this over to a sandbox to share some code commits on this and work together to do some cross-browser testing on strategies.

IF the graph is being used as a dashboard graph and each graph is configured as a separate report, you might consider including the report as an image asset to see if it works better to gain more control over image styling:

  <img src="{site.dir}/reports/mygraph.svg"/>