search

txbm / angular-chartjs

Directive set for the ChartJS library. Supports data bindings and attribute-level specification for chart specific options. The only Angular ChartJS module that supports ALL chart options as HTML5 attributes :)
MIT License
146 stars 37 forks source link

Resize? #3

Closed linagee closed 10 years ago

linagee commented 10 years ago

Are you planning on adding a resize listener so the canvas gets redrawn on resize? This is for Responsive Web Design. http://en.wikipedia.org/wiki/Responsive_web_design

https://github.com/lgsilver/angles/blob/master/angles.js is doing this now, just wondering if this connector will have it or not. Thanks.

txbm commented 10 years ago

This is useful. I will try and implement this as soon as I can.

txbm commented 10 years ago

@linagee this has been merged into master. The option "autofit" = "true|false" has been added to the directive.

Keep in mind that this implementation will not redraw unless it is actually necessary on account of a dimension change for a specific graph. This is more efficient than redrawing each graph every time the browser is resized regardless of whether dimensions on a particular graph have been changed.

If you need to force a redraw, I can expose a function to do that in the controller scope but I cannot think of a use case for that so I have not included it so far.

commodoretyler commented 10 years ago

I think you removed the autofit option with this commit

txbm commented 10 years ago

@commodoretyler

Yes I did. It is no longer needed.

Use this native option now:

<canvas responsive="true"></canvas>
leriel commented 10 years ago

Would you mind adding 'responsive' option back into readme example, where previously autofit option was mentioned? It would make it so much easier to find.

txbm commented 10 years ago

@leriel The responsive option is actually a Chart.js native option, along with many (20+) other default chart options you can choose from.

I encourage you to read the Chart.js documentation for these options as the directives provided by this angular plugin simply pass the options straight through to the native Chart object.

I will not be duplicating the Chart.js documentation here since that would mean keeping it up to date.

leriel commented 10 years ago

@petermelias good point. I didn't earlier understand what you meant by native. Thanks for the reply.