chart reflow snippet for those times when charts are conditional rendered and goes haywire.

Pat VachonPat Vachon ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
edited June 25, 2020 in Ideas
var $ = skuid.$,   charts = $(document.getElementsByClassName('sk-chart-container'));        $.each(charts,function(c,chart){          $(chart).highcharts().reflow();      });


1
1 votes

Awaiting Review ยท Last Updated

Comments

  • Pat VachonPat Vachon ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited June 25, 2020
    This won't work out of the box without Banzai. Needs to be tweaked in order to work with pre-Banzai as the classย sk-chart-container didn't exist then. You can use the classย highcharts-container and target the parent in order to get the same div.
  • J.J. ๐Ÿ’Ž
    edited June 25, 2020
    Pat,

    Putting aside everything else I'm about to say in this response, we should handle chart reflows and conditional rendering so that you don't have to write snippets like this. With Banzai we made some improvements, but we'll take a look at that situation you're demoing in the video. Anyway...

    This is yet another thing that I need to write up for our documentation team, but in Banzai, the Charts JavaScript API got some (much needed) feature improvements. One improvement is an officially supported component method to reflow a given Chart. To trigger a reflow of a single Chart in Banzai, get a reference to the Component and simply call reflow()ย like...
    var $ = skuid.$,  myChart = skuid.$C('MyChartComponentID');  myChart.reflow(); 
    If you want to reflow all charts on the screen via a snippet, this should do it...
    var $ = skuid.$;  $.each(skuid.component.getByType('skuidvis__chart'),function(){   this.reflow(); }); 
    ...or publish the ui.reflow event.
  • Pat VachonPat Vachon ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited January 5, 2016
    Double or triple your documentation staff. The amount of features being released is far outpacing documentation.
  • Pat VachonPat Vachon ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited January 5, 2016
    What do you mean by "...or publish theย ui.reflowย event."?
  • J.J. ๐Ÿ’Ž
    edited December 9, 2016
    Well, this one's on me for not writing it up for the documentation staff. For the publish event, this is what I mean.
  • Pat VachonPat Vachon ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited January 5, 2016
    er ... uh .... never done anything like this. What is this publish event actually do? Can you provide an example using my snippet?
  • J.J. ๐Ÿ’Ž
    edited December 9, 2016
    Oops! Sorry, that was the Actions Framework example, and we're in snippet land here. Here'sย the docs on the events API. There's are good examples of publishing/subscribing to events at the bottom there. Does that help?
  • Pat VachonPat Vachon ๐Ÿ’Ž๐Ÿ’Ž๐Ÿ’Ž
    edited January 5, 2016
    Yup. I think I get but can you provide a bare bones example with the chart and my snippet?
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!