angularjs - ChartJS not rendering when div hidden -
i have angular application tabs. tabs show , hide div content using ng-show directive. each div contains inside canvas showing chartjs charts.
when swipe tab another, find charts not rendered until y relaod page or make request function in order reload charts querying server, eventhough data loaded $promise.
here, charts correctly rendered...
but when change tab without forcing reload (the data loaded), happens...
this 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%;"> 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%;"> 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%;"> charts </div> and 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 wired thing 1 of charts rendered!! have face same problem?
regards
a similar issue had been reported here : https://github.com/jtblin/angular-chart.js/issues/29
if chart contained in div hidden , appear on screen won't render correctly (encountering same issue right now!). case charts in tabs hidden tabs ng-show directives. workaround redraw chart on changing tab.
this should achievable via mychart.update() method. , triggered in show method instance.
i try different solutions part , update answer accordingly. hope little!
Comments
Post a Comment