Graphs aren't getting drawn in a closed Accordion drawer

Question

I have a view with several UI-Bootstrap accordions on it, each with it's first drawer showing a bunch of graphs (I used the tc-angular-chartjs library).

Now the first drawer of the first accordion is always open on page load and it always loads and draws the graphs on it. However the first drawer of the second accordion is always closed on page load and when I open the drawer I can see that it's graphs were never drawn.

The funny part is when I change the code to always open the drawer on page load the graphs always start.

EDIT: this is the markup, the accordion is generated inside a data-ng-include

<accordion data-ng-model="machine.accordionOptions.oneAtATime" close-others="machine.accordionOptions.oneAtATime">
                        <!-- STATUS -->
                        <accordion-group is-open="machine.accordionOptions.isFirstOpen">

                            <accordion-heading>
                                <i class="glyphicon" data-ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 
                                <span class="paused">Status:</span> Low Hit ration since {{2}} hours ago. High machine load average since {{2}} hours ago.
                            </accordion-heading>
                            <!-- data-ng-include body -->
                            <div data-ng-include="'angular/templates/dashboard/status.tmpl.html'"></div>                         
                        </accordion-group>

                        <!-- more drawers-->

                        </accordion-group>
                    </accordion>

and inside the 'angular/templates/dashboard/status.tmpl.html' I have several of these ..

<div data-ng-repeat="chart in rpDataLinecharts" class="col-lg-4 grid-box">
<strong>{{chart.title}}</strong> <span style="color: #aaaaaa;">{{chart.hint}}</span>

<div>
    <canvas data-tc-chartjs-line data-chart-options="linechart_options" data-chart-data="linechart_data[$index]" data-auto-legend></canvas>
</div>

What am I missing here ?

http://stackoverflow.com/questions/29395853/chart-js-in-angularjs-tabset-does-not-render this may be of use to other visitors — Murray Greig, Mar 02 '16 at 09:16

score 0 · Answer 1 · edited Jul 07 '17 at 20:57

0

The tc-angular-charts didn't draw because of a known issue with the Bootstrap Accordion and Canvas, if it's not showing it shouldn't draw and when the accordion drawer opens to reveal the charts, nothing tells the canvas code to run. In the end I've replaced them with Angular-nvd3 charts which use SVG, and everything went fine from then on.

edited Jul 07 '17 at 20:57

Graham

7,431
18
59
84

answered May 12 '15 at 15:54

svarog

9,477
4
61
77

Graphs aren't getting drawn in a closed Accordion drawer

1 Answers1