Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

responsive charts #78

Closed
mg1075 opened this issue Nov 19, 2016 · 3 comments
Closed

responsive charts #78

mg1075 opened this issue Nov 19, 2016 · 3 comments

Comments

@mg1075
Copy link

mg1075 commented Nov 19, 2016

It would be awesome if smoothie charts could be updated to be responsive. Looks like there have been a few investigations into this in the past, yet nothing has come of it.

@mg1075
Copy link
Author

mg1075 commented Nov 22, 2016

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

The smoothie charts builder page on the smoothie website sort of has a responsive nature in how you can customize the width and the height of a chart.

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 );
  });

The problem with this approach is the width is not truly responsive: the width does adjust, and the line is not distorted, but the line remains static and does not update to the new width.

@ChisholmKyle
Copy link

I'm not sure if changing the attribute is any different from changing the width property of the canvas element directly in Javascript, but I made a CodePen that adjusts the chart width for a window.onresize event and scale teh height to a quarter of the width: http://codepen.io/anon/pen/MpWvjX
This implementation doesn't seem to have the problem you describe. It does flicker during the resize if you move it around a lot though.

drewnoakes added a commit that referenced this issue May 2, 2017
The old behaviour (still the default) is to size the element to
the canvas size. This doesn't work with dynamically sized,
responsive applications.

See issues #64, #70, #78, #81
drewnoakes added a commit that referenced this issue May 2, 2017
When selected, size canvas to its element size.

The old behaviour (still the default) is to size the element to
the canvas size. This doesn't work with dynamically sized,
responsive applications.

Closes issues #64, #70, #78, #81
@drewnoakes
Copy link
Collaborator

This is now supported. See http://smoothiecharts.org/examples/responsive.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants