lavacharts' doesn't display chart size properly using tab (first tab is ok, second tab not ok)

Question

I'm using a package caled lavacharts from https://github.com/kevinkhill/lavacharts.

To display the simple chart, I do the following in my Controller with the method show():

   public function show($id)
   {
    $product = Product::findOrFail($id);

    $prices = \Lava::DataTable();


    $prices->addDateColumn('Month')
        ->addNumberColumn('Retailer Price')
        ->addNumberColumn('Consumer Price')


        ->addRow(array('2014-10-1', 67, 65))
        ->addRow(array('2014-10-2', 68, 65))
        ->addRow(array('2014-10-3', 68, 62))
        ->addRow(array('2014-10-4', 72, 62))
        ->addRow(array('2014-10-5', 61, 54))
        ->addRow(array('2014-10-6', 70, 58))
        ->addRow(array('2014-10-7', 74, 70))
        ->addRow(array('2014-10-8', 75, 69))
        ->addRow(array('2014-10-9', 69, 63))
        ->addRow(array('2014-10-10', 64, 58))
        ->addRow(array('2014-10-11', 59, 55))
        ->addRow(array('2014-10-12', 65, 56))
        ->addRow(array('2014-10-13', 66, 56))
        ->addRow(array('2014-10-14', 75, 70))
        ->addRow(array('2014-10-15', 76, 72))
        ->addRow(array('2014-10-16', 71, 66))
        ->addRow(array('2014-10-17', 72, 66))
        ->addRow(array('2014-10-18', 63, 62))
        ->addRow(array('2014-10-19', 63, 55))
        ->addRow(array('2014-10-20', 63, 56))
        ->addRow(array('2014-10-21', 63, 55))
        ->addRow(array('2014-10-24', 63, 33))
        ->addRow(array('2014-10-29', 63, 64))
        ->addRow(array('2014-10-30', 63, 63));

    $linechart = \Lava::LineChart('Price_History')
        ->dataTable($prices)
        ->title('Price history for: '.$product->name)
        ->legend(\Lava::Legend(array('position' => 'in')));

   // dd($product);
    return view('admin.products.show', compact('product'));
    }

In order to display from the controller in the view blade, I just put the following code in blade:

<div id="price_history_chart"></div>
{!! \Lava::render('LineChart', 'Price_History','price_history_chart') !!}

So, I put the display code in the tabs like below (using with bootstrap):

   <div  class="tab-content mar-top">
                <div id="tab1" class="tab-pane fade active in">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        First Tab
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <div class="col-md-8">
                                        <div class="panel-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped" id="users">
                                                    <tr>
                                                        <td>First Tab</td>
                                                        <td>        
                                                        <div id="price_history_chart"></div>
                                                            {!! \Lava::render('LineChart', 'Price_History','price_history_chart') !!} <!-- first tab display correctly like the screenshot -->

                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="tab2" class="tab-pane fade">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel">
                                <div class="panel-heading">
                                    <h3 class="panel-title">
                                        Second Tab
                                    </h3>
                                </div>
                                <div class="panel-body">
                                    <div class="col-md-12">
                                        <div class="panel-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped" id="users">

                                                    <tr>
                                                        <td>Second Tab</td>
                                                        <td>
                                                            <div id="price_history_chart"></div>
                                                            {!! \Lava::render('LineChart', 'Price_History','price_history_chart') !!}  <!-- second tab the size doesn't render properly like the screenshot -->

                                                        </td>
                                                    </tr>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

 </div>

PROBLEM:

http://postimg.org/image/o9gsju91f/ Screenshot 1-on first tab loaded / clicked: (display correctly)

http://postimg.org/image/k18bhfsnd/ Screenshot 2-on second tab clicked: (display incorrectly; the chart becomes smaller.)

Any idea how to fix this?

EDIT I thought of calling $(window).trigger('resize'); like below but it doesn't work

$('#tab2').on('click',function(){

    $(window).trigger('resize');
 });

score 2 · Answer 1 · edited May 23 '17 at 12:32

2

When a Google Chart is rendered, its size is determined by the size of the element it is inside. Since the second tab is hidden when the second chart is drawn, it is defaulting to the standard size. You'll need to re-size the chart when that tab is selected. Also, if you want to have the chart respond when the window changes size, you'll have to re-size it again. Check out Google chart redraw/scale with window resize for how to re-size the chart.

edited May 23 '17 at 12:32

Community

1
1

answered Jan 24 '16 at 05:09

Jeff

24,623
4
69
78

Hi, just to clarify back the code actually doesn't work. I was too confident that it actually work. the trigger('resize') never done anything. It was my clicking movement on 2nd tab which actually faster than before the chart rendered . That's why I thought it work. For the temporary, I just display this chart on the first tab. If you have the solution, please let me know. Thanks. – MaXi32 Jan 24 '16 at 19:19

sanky · Accepted Answer · 2016-03-17T14:27:21.203

I had the same issue with bootsrap modal. The fix is through config in php code although mine was in 3.0 version

Your code :

$linechart = \Lava::LineChart('Price_History')
        ->dataTable($prices)
        ->title('Price history for: '.$product->name)
        ->legend(\Lava::Legend(array('position' => 'in')));

New code :

$linechart = \Lava::LineChart('Price_History')
        ->dataTable($prices)
        ->title('Price history for: '.$product->name)
        ->width(800)//add appropriate width
        ->legend(\Lava::Legend(array('position' => 'in')));

In 3.0 the code would have been

$datatable = \Lava::DataTable();
     \Lava::LineChart('Price_History',$datatable,[
        'title'=>'Price history for: '.$product->name,
        'width'=>800
    //and you other configs
     ]);

but unable to set width in percentage :( – Rahul Sharma Apr 02 '18 at 09:52 — Rahul Sharma, Apr 02 '18 at 09:52

score 1 · Answer 3 · answered Jan 25 '16 at 13:51

Lavacharts Dev here :) So the charts should already be responsive, and resize on window resize. This was an issue that was brought up before and as far as I know, it is working. As for being resized when brought into view in the tab, I'm not certain how to handle that. I suppose adding an endpoint to the lava.js module for manually resizing, so the user could use the bootstrap event of the tab showing to activate the resize.

Thoughts?

PS: I'm fairly new here, so I can't comment, even though I know this isn't an "answer" to the question.

score 0 · Answer 4 · answered May 12 '21 at 08:53

0

Dispatch an resize event works for me, hope this help

$("your-tab").on("click", function(){
    window.dispatchEvent(new Event('resize'));
});

answered May 12 '21 at 08:53

Alex Hu

1

After 5 years, I think something has been updated. Haven't used laravel for a long time – MaXi32 May 15 '21 at 03:34

lavacharts' doesn't display chart size properly using tab (first tab is ok, second tab not ok)

4 Answers4