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

  • 1
  • Idea
  • Updated 3 years ago
var $ = skuid.$,
	charts = $(document.getElementsByClassName('sk-chart-container'));

    $.each(charts,function(c,chart){
        $(chart).highcharts().reflow();
    });
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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.
(Edited)
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
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.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
What do you mean by "...or publish the ui.reflow event."?
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
Well, this one's on me for not writing it up for the documentation staff. For the publish event, this is what I mean.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
er ... uh .... never done anything like this. What is this publish event actually do? Can you provide an example using my snippet?
Photo of J.

J., Official Rep

  • 7,470 Points 5k badge 2x thumb
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?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Yup. I think I get but can you provide a bare bones example with the chart and my snippet?