M
M
Maxim Timofeev2015-11-17 14:11:05
PHP
Maxim Timofeev, 2015-11-17 14:11:05

How to put Chart.js in tabs or modal window?

Project on yii2. I took the widget for charts https://github.com/2amigos/yii2-chartjs-widget , which renders www.chartjs.org/docs

With normal rendering, everything is ok. As soon as I hide it in tabs or try to insert it in a modal window, it doesn't load. There are no errors in the console. In the code only:
<canvas id="w0" width="400" height="400"></canvas>
How have not tried. And render->ajax and form right inside the modal:

<?php Modal::begin([
        'id'=>'get-stat',
        'size'=>'modal-lg',
        'header' => '<h2>Статистика за сегодня</h2>',
    ]);?>
    <?= \common\components\chart\ChartJs::widget([
        'type' => 'Line',
        'options' => [
            'height' => 400,
            'width' => 400
        ],
        'data' => [
            'labels' => ["00", "01:00", "02:00", "03:00", "04:00", "05:00", "06:00","07:00", "08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00","16:00", "17:00", "18:00", "19:00", "20:00", "21:00","22:00", "23:00"],
            'datasets' => [
                [
                    'fillColor' => "rgba(220,220,220,0.5)",
                    'strokeColor' => "rgba(220,220,220,1)",
                    'pointColor' => "rgba(220,220,220,1)",
                    'pointStrokeColor' => "#fff",
                    'data' => [1,2,3]
                ],
                [
                    'fillColor' => "rgba(151,187,205,0.5)",
                    'strokeColor' => "rgba(151,187,205,1)",
                    'pointColor' => "rgba(151,187,205,1)",
                    'pointStrokeColor' => "#fff",
                    'data' => [1,2,3]
                ]
            ]
        ]
    ])?>
    <?php
    Modal::end();
    ?>

The result is one. Tell me where to dig, what to do?

Answer the question

In order to leave comments, you need to log in

1 answer(s)
T
twopizza, 2015-11-18
@twopizza

Canvas is not rendered in hidden elements, the way out is to render on a click on a tab, opening a popup. There is a discussion here https://github.com/nnnick/Chart.js/issues/512

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question