Can smoothie charts be responsive?

Ollie Rex

unread,

Jan 15, 2015, 7:09:09 AM1/15/15

to smoothi...@googlegroups.com

I have a fairly standard chart, however the site will also be used on mobile/tablet devices. Is it possible to make a smoothie chart responsive?

btw, thanks for the amazing library :)

Drew Noakes

unread,

Jan 21, 2015, 7:03:14 PM1/21/15

to smoothie-charts

I've wondered about this too. The challenge lies in sizing the chart properly.

I suspect that to do this properly we'd need to remove the ability to size the canvas via the SmoothieChart object. That is, the element's size would be completely controlled via CSS/DOM-layout, and the render loop inspects clientHeight/clientWidth/devicePixelRatio to adjust the backing raster's height/width in the render loop. This would allow responsive layouts to operate on the canvas element. Unfortunately it would also break the API a little bit for current smoothie users.

Anyone have any further thoughts on this?

On 15 January 2015 at 12:09, Ollie Rex <olli...@gmail.com> wrote:

I have a fairly standard chart, however the site will also be used on mobile/tablet devices. Is it possible to make a smoothie chart responsive?
btw, thanks for the amazing library :)

--
You received this message because you are subscribed to the Google Groups "Smoothie Charts" group.
To unsubscribe from this group and stop receiving emails from it, send an email to smoothie-char...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

anonymous

unread,

Nov 22, 2016, 11:13:24 AM11/22/16

to Smoothie Charts

What about how the smoothie charts builder page on the smoothie charts website

allows you to dynamically change the width of the chart? (I am looking for responsive width.)

What if a window resize listener or some such event was added to dynamically change the width of the chart?
Even if do-able, not ideal.

Smoothie is nice, and it would be so much more useful if it was responsive!

anonymous

unread,

Nov 22, 2016, 11:28:58 AM11/22/16

to Smoothie Charts

This is a proposed hack in a very simplistic form...

Now, if the requirement is to have responsive width for a chart, how about listening to the window resize event, and then adjusting the chart width attribute on resize?

  $( window ).resize(function() {
    var y = $( window).width();
    $('#chart').attr('width', y-50 );
  });

On Thursday, January 15, 2015 at 6:09:09 AM UTC-6, Ollie Rex wrote:

Reply all

Reply to author

Forward