ChartJS not rendering when div hidden

Question

I have an angular application with tabs. Those tabs show and hide the div content using the ng-show directive. Each div contains inside some canvas showing ChartJS charts.

When i swipe from tab to another, i find that my charts are not rendered until y relaod the page or make another request to my function in order to reload the charts querying my server, eventhough all the data is already loaded by a $promise.

Here, my charts are correctly rendered...

But when i change my tab without forcing a reload (the data is already loaded), this is what happens...

This is my HTML

<section style="overflow-y:hidden" class="bg-white scroller-v" ng-init="AskForToggle()">
<div class="tab-nav clearfix">
    <ul class="side-padding-3x">
        <li data-ng-class="activeSubMenu('Actividades')">
            <a class="size-12x" data-ng-click="Show('Actividades')">Actividades</a>
        </li>
        <li data-ng-class="activeSubMenu('Paginas')">
            <a class="size-12x" data-ng-click="Show('Paginas')">Compromiso</a>
        </li>
        <li data-ng-class="activeSubMenu('Videos')">
            <a class="size-12x" data-ng-click="Show('Videos')">Videos</a>
        </li>
    </ul>
</div>

<div class="col col-unpadded col-lg-2 col-md-3 col-sm-12 col-xs-12 side-menu">
    <header>Fechas</header>
    <ul class="list">
        <li><input type="date" ng-model="analyticsDateDesde" ng-change="ValidateDateDesde(analyticsDateDesde)" /></li>
        <li><input type="date" ng-model="analyticsDateHasta" ng-change="ValidateDateHasta(analyticsDateHasta)" /></li>
        <li><input type="button" ng-click="UpdateAnalytics()" value="Actualizar Fechas" style="color:white; background-color:#3c8dbc;border:#3c8dbc" /></li>
    </ul>
    <header>Alumnos</header>
    <ul class="list">
        <li data-ng-repeat="user in users">
            <a data-ng-class="activeNav(user)" data-ng-click="$parent.selectedUser = user">{{user.name}} {{user.lastName}}</a>
        </li>
    </ul>
</div>

<div id="divActividades" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
    Some charts
</div>

<div id="divPaginas" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
    Some charts
</div>

<div id="divVideos" class="col col-unpadded col-lg-10 col-md-9 col-sm-12 col-xs-12" style="overflow-y: scroll; overflow-x:hidden;height: 100%;">
    Some charts
</div>

And this my angular controller

appFlipped.controller("ClassTraceability", ["$rootScope", "$scope", "Courseware", "$timeout", "$window", function (n, t, i, to, window) {
    t.GetTypeClass = function (traza) {
        if (traza.tipoAccion == 'Video')
            return 'cd-timeline-img cd-movie';
        else if (traza.tipoAccion == 'Problem')
            return 'cd-timeline-img cd-picture';
        else
            return 'cd-timeline-img cd-location';
    }
    n.menuData = utils.courseMenu();

    t.activeNav = function (n) {
        return {
            active: t.selectedUser && t.selectedUser.id == n.id
        }
    }
    t.users = [];
    t.selectedUser = null;
    t.timeOnPlatform = null;
    t.timeOnPlatformPerDayComparison = null;
    t.timeOnPlatformPerDay = null;


    i.init(n.routeData.classId).then(function () {
        i.users.queryClass().$promise.then(function (n) {
            t.users = n;
            n.length && (t.selectedUser = n[0]);
        })
    });

    t.$watch("selectedUser", function (n) {
        n != null && t.loadTraceability();
    });

    t.UpdateAnalytics = function () {
        t.loadTraceability();
    }


    t.loadTraceability = function () {
        if (t.selectedUser != null) {
            var p = {
                userId: t.selectedUser.id,
                courseURL: n.rutaParaAnalytics,
                fechaDesde: t.analyticsDateDesde,
                fechaHasta: t.analyticsDateHasta
            };
            i.traceability.get(p).$promise.then(function (n) {
                t.Traceability = n.traceability;
                t.showTimeline = t.Traceability.length > 0 ? true : false;

                t.labelsTimeOnPlatform = n.timeOnPlatform[0];
                t.dataTimeOnPlatform = n.timeOnPlatform[1];
                t.loadPageActivity();

                t.labelsTimeOnPlatformPerDay = n.timeOnPlatformPerDay[0];
                t.dataTimeOnPlatformPerDay = n.timeOnPlatformPerDay[1];
                t.loadPageActivityPerDay();

                t.labelsTimeOnPlatformPerDayComparison = (n.timeOnPlatformPerDayComparison[0])[0];
                t.dataTimeOnPlatformPerDayComparisonClass = (n.timeOnPlatformPerDayComparison[0])[1];
                t.dataTimeOnPlatformPerDayComparisonStudent = (n.timeOnPlatformPerDayComparison[1])[1];
                t.loadPageActivityComparison();

                t.totalVideoCount = n.genericVideoAnalytics[0];
                t.userTotalVideoCount = n.genericVideoAnalytics[1];
                t.totalMinutesVideosCount = n.genericVideoAnalytics[2];
                t.usertotalMinutesVideosCount = n.genericVideoAnalytics[3];
                t.loadGenericVideoAnalytics();

                t.videoTimeLabels = n.videoTime[0];
                t.videoTimeData = n.videoTime[1];
                t.loadVideoTime();

                t.videoTimePerDayLabels = n.videoTimePerDay[0];
                t.videoTimePerDayData = n.videoTimePerDay[1];
                t.loadVideoTimePerDay();

                t.videoTimePerDayComparisonLabels = (n.videoTimePerDayComparison[0])[0];
                t.videoTimePerDayComparisonClass = (n.videoTimePerDayComparison[0])[1];
                t.videoTimePerDayComparisonUser = (n.videoTimePerDayComparison[1])[1];
                t.loadVideoTimePerDayComparison();
            });
        }
    };

    t.PaginaVisible = 'Actividades';
    t.activeSubMenu = function (pagina) {
        if (t.PaginaVisible == pagina)
            return 'active';
        else
            return '';
    }

    t.Show = function (pagina) {
        if (pagina == 'Actividades') {
            angular.element("#divActividades")[0].style.display = 'block';
            angular.element("#divPaginas")[0].style.display = 'none';
            angular.element("#divVideos")[0].style.display = 'none';
            t.PaginaVisible = 'Actividades';
        }
        if (pagina == 'Paginas') {
            angular.element("#divActividades")[0].style.display = 'none';
            angular.element("#divPaginas")[0].style.display = 'block';
            angular.element("#divVideos")[0].style.display = 'none';
            t.PaginaVisible = 'Paginas';
        }
        if (pagina == 'Videos') {
            angular.element("#divActividades")[0].style.display = 'none';
            angular.element("#divPaginas")[0].style.display = 'none';
            angular.element("#divVideos")[0].style.display = 'block';
            t.PaginaVisible = 'Videos';
        }
    }
}]);

The most wired thing is that one of all the charts is rendered!! Have anyone face the same problem?

Regards

Answer 1

A similar issue had been reported here : https://github.com/jtblin/angular-chart.js/issues/29

If the chart is contained in a div that is hidden and then appear on screen it won't render correctly (encountering the same issue right now!). Which is the case for your charts in the tabs hidden tabs with ng-show directives. A workaround would be to redraw the chart on changing tab.

This should be achievable via the myChart.update() method. And it could be triggered in your Show method for instance.

I will try different solutions for my part and will update this answer accordingly. Hope it could help a little!