Morris chart redraw bij nieuwe tab?

Status
Niet open voor verdere reacties.

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
Beste lezers,

Ik probeer twee morris charts op een pagina weer te geven waarbij elke chart op een aparte tab getoond wordt (bootrstrap). De charts werken prima, echter is er een probleempje. Omdat chart nummer twee op een tabblad zit dat nog niet geladen is, probeert het morris script waarschijnlijk de chart te tonen op een 0x0 resolutie. Als ik tabblad 2 daarna open, zie je dat de chart niet getekend is. Echter, als je de browser van de zijkant iets kleiner maakt en weer groter, dan komt hij tevoorschijn. Ik moet dus een redraw forceren op het moment dat het tabblad wordt gewijzigd.

Het morris script ziet qua data zo u
Code:
<script>
                    $(function() {

                    Morris.Area({
                        element: 'morris-area-chart-<?php echo $auto_id; ?>',
                        data: [{ <?php 
                            foreach ($datum as $index => $data) {
                            echo "period: '" . $data . "',";
                            echo "verbruik: " . $gem[$index];
                            if($index < $aantal) {
                                echo "}, {";
                            } else if($index == $aantal){
                                echo "}],";
                            }
                            }
                        ?>
                        xkey: 'period',
                        ykeys: ['verbruik'],
                        labels: ['Verbruik'],
                        pointSize: 4,
                        hideHover: 'auto',
                        ymax: <?php echo ROUND(max($gem) * 1.05, 0); ?>,
                        ymin: <?php echo ROUND(min($gem) * 0.90, 0); ?>,
                        resize: true
                    });
    
                });
                </script>

Nu heb ik op Stackoverflow meerdere mensen gevonden met dit probleem, echter waren de oplossingen die waren gegeven voor mij niet de oplossing, of ik doe het niet goed. Een oplossing was bijvoorbeeld https://stackoverflow.com/questions/40517038/morris-js-chart-not-working-inside-of-a-bootstrap-tab
Als ik echter een var maak van de hele boel voor de 'Morris.Area({' dan werkt de chart niet meer.

Iemand tips over hoe dit het beste aangepakt kan worden? Mocht er meer informatie nodig zijn dan hoor ik dat graag.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan