how to reload charts automatically

[haqktd]

What Version?

3.1

Issue

I am looking for an example to reload chart automatically on regular interval. Currently I don't find any code example to help on this issue.

Controller Code (chart creation code)

// paste over this

View Code

// paste over this

[kevinkhill]

If you are not going to put forth effort in your request, then I am not going to put effort into my reply.

[haqktd]

@kevinkhill , sorry to bother you I would like to reopen this issue. I am new on this section with laravel. Expecting your feedback.

[kevinkhill]

Sorry if that was blunt before, but there's an entire website full of examples and documentation. I would like you to at least attempt it yourself first. I am happy to help debug, but I don't have time to just write it for you.

[haqktd]

Thanks for your time, I think you are mentioning Ajax Data Loading part

Will check that part

[haqktd]

Done, please check below example and let me know, if need any update on below flow //Controller

public function updateTemperature()
    {
        $temps = Lava::DataTable('America/Los_Angeles');
        $temps->addDateColumn('Date')
            ->addNumberColumn('Max Temp')
            ->addNumberColumn('Mean Temp')
            ->addNumberColumn('Min Temp');

        foreach(range(1, 30) as $day) {
            $temps->addRow(array(
                '2014-10-'.$day,
                rand(50,90),
                rand(50,90),
                rand(50,90)
            ));
        }
        return $temps->toJson();
    }

    public function getTemperature()
    {
        $temps = Lava::DataTable('America/Los_Angeles');
        $temps->addDateColumn('Date')
            ->addNumberColumn('Max Temp')
            ->addNumberColumn('Mean Temp')
            ->addNumberColumn('Min Temp');

        foreach(range(1, 30) as $day) {
            $temps->addRow(array(
                '2014-09-'.$day,
                rand(50,90),
                rand(50,90),
                rand(50,90)
            ));
        }
        $lava=Lava::ColumnChart('Temp', $temps, [
            'title' => 'Temperature'
        ]);

        return view('chart',compact('lava'));
    }

//View

<div id="trans_div"></div>
                    <?= Lava::render('ColumnChart', 'Temp', 'trans_div') ?>

<script>
        $(document).ready(function() {
            lava.ready(function() {
                setInterval(function(){
                $.getJSON('/chart/updateTemperature', function (dataTableJson) {
                    lava.loadData('Temp', dataTableJson, function (chart) {
                        console.log(chart);
                    });
                });
                }, 3000);
            });

        });
    </script>

[kevinkhill]

Done, please check below example and let me know, if need any update on below flow

Controller

// I would pull the duplicated code into its own method.
private function getDataTable()
{
    $temps = \Lava::DataTable('America/Los_Angeles');
    $temps->addDateColumn('Date')
          ->addNumberColumn('Max Temp')
          ->addNumberColumn('Mean Temp')
          ->addNumberColumn('Min Temp');

    return $temps;
}

public function updateTemperature()
{
    $temps = $this->getDataTable();

    foreach(range(1, 30) as $day) {
        $temps->addRow([
            '2014-10-'.$day,
            rand(50,90),
            rand(50,90),
            rand(50,90)
        ]);
    }

    return $temps->toJson();
}

public function getTemperature()
{
    $temps = $this->getDataTable();

    foreach(range(1, 30) as $day) {
        $temps->addRow([
            '2014-09-'.$day,
            rand(50,90),
            rand(50,90),
            rand(50,90)
        ]);
    }

   // You don't need to store anything in a variable
    /*$lava=Lava::ColumnChart('Temp', $temps, [*/
    \Lava::ColumnChart('Temp', $temps, [
        'title' => 'Temperature'
    ]);

    // Nothing needs to be passed to the view
    /*return view('chart,compact('lava'));*/
    return view('chart');
}

View

<div id="trans_div"></div>
<!-- Take advantage of the blade template helpers -->
@columnchart('Temp', 'trans_div')
<!--<?= Lava::render('ColumnChart', 'Temp', 'trans_div') ?>-->

<script>
    $(function() { // This is the same as below, just a short hand ^_^
        /*$(document).ready(function() {*/
            lava.ready(function() {
                setInterval(function(){
                $.getJSON('/chart/updateTemperature', function (dataTableJson) {
                    lava.loadData('Temp', dataTableJson, function (chart) {
                        console.log(chart);
                    });
                });
                }, 3000);
            });

        });
    </script>

This is what I did:

• laravel new testapp
• composer require khill/lavacharts
• php artisan make:controller tester
• copied your code into the controller
• copied your view code into welcome.blade.php

[kevinkhill]

If I had time I'd make a gif of the output, but I have a dance chart in my browser 👍

[haqktd]

I put only 3 seconds interval for test :) I had the same in my office project and working well with 5 minutes interval. Thanks for your great effort in lavacharts library

[kevinkhill]

Happy to help and I'm glad you got it working 👍🏻