Not visible charts

[devfxplayer]

Hi, I have 8 charts in one page. The data are loaded after a request on the server from a websocket. The canvas is created but is not visible until I hover over with my mouse. Please help and do not delete. It is impossible to reproduce example without using many hours to learn those tools and add websockets to them.

Thanks

[jtblin]

Are your charts in tabs or other containers that are hidden / shown dynamically? Does the problem happen with a setTimeout instead of websockets?

[shahsagarm]

I just sorted our the same problem 2 hours ago.

I am working on a project, where I needed to show 8 charts on a single page with data loaded from the server. Also, 4 out of 8 charts were placed inside angular material tabs (md-tabs).

Now what went wrong in my case was that I didn't create an empty object for any of them(charts), instead, i was building chart object on the fly when data get loaded from the server. Which was causing the same issue like you described.

[devfxplayer]

I did @shahsagarm suggestion and now it loads the invisible charts (the ones that I have to scroll to see). My charts are in uib-tab (angular bootstrap), The setTimeout seems to work some times @jtblin but they never load all together. It always loads the last one. Thanks for any help! some code below:

<uib-tab heading="Stats">
    <div style="height: 400px; width: 50%" class="pull-left">
        {{'PerformanceChart'|translate}}
        <!--options="{showScale:true,scaleSteps:10}"-->
        <canvas id="ChartStatement" name="ChartStatement" class="chart chart-line"
                chart-data="vm.statementData" chart-labels="vm.statementLabels"
                chart-legend="false" chart-series="vm.statementSeries" height="300"
                chart-options="{showScale:false}" style="height: 300px"></canvas>
    </div>
    <div style="height: 400px; width: 50%" class="pull-right">
        {{'ROI'|translate}}
        <canvas id="ChartRoi" name="ChartRoi" class="chart chart-line"
                chart-data="vm.statementDataRoi" chart-labels="vm.statementLabelsRoi"
                chart-legend="false" chart-series="vm.statementSeriesRoi" height="300"
                chart-options="{showScale:false}" style="height: 300px"></canvas>
    </div>
  </uib-tab>

$scope.vm.statementLabels = [];
        $scope.vm.statementSeries = ['Capital'];
        $scope.vm.statementData = [];
        $scope.offCharts.push($rootScope.$on('ChartStatement', function (event, data) {
            setTimeout(function (parameters) {
                for (var a = 0; a < data.length; a++) {
                    $scope.vm.statementLabels.push(data[a].Label);
                    $scope.vm.statementData.push(data[a].Value);
                }
                $scope.log('ChartStatement');
                setTimeout(function() {
                    $scope.$apply();
                    $scope.log('$apply');
                }, 1000);
            }, 1000);                
        }));

        
        $scope.vm.statementLabelsRoi = [];
        $scope.vm.statementSeriesRoi = ['ROI'];
        $scope.vm.statementDataRoi = [];
        $scope.offCharts.push($rootScope.$on('ChartRoi', function(event, data) {
            setTimeout(function(parameters) {
                for (var a = 0; a < data.length; a++) {
                    $scope.vm.statementLabelsRoi.push(data[a].Label);
                    $scope.vm.statementDataRoi.push(data[a].Value);
                }                    
            }, 1000);                
        }));

 $scope.vm.statementLabelsDailyProfit = [];
        $scope.vm.statementSeriesDailyProfit = ['Daily Profit'];
        $scope.vm.statementDataDailyProfit = [[]];
        $scope.offCharts.push($rootScope.$on('ChartDailyProfit', function(event, data) {
            $scope.log('Loaded Daily Profit');
            $scope.$apply(function() {
                for (var a = 0; a < data.length; a++) {
                    $scope.vm.statementLabelsDailyProfit.push(data[a].Label);
                    $scope.vm.statementDataDailyProfit[0].push(data[a].Value);
                }
            });
        }));