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

Issue

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');
 });

Solution

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
     ]);

Answered By - sanky