Using vuejs with laravel and lavacharts and reloading chart data

[EdozdeDandez]

What Version?

3.1.11

Issue

I am trying to use it with Laravel and vuejs but I keep getting the error  {name: "ChartNotFound", message: "[Lavacharts] Chart with label "Trans" was not found."} However, when I use it directly on the blade file it works. Also I am working on live data and I need the chart to reload every 5 minutes is that possible and are there any extra functions needed?

Controller Code (chart creation code)

// paste over this
public function getTransactions()
    {
        $start = Carbon::parse("2017-08-10 21:00:00");
        $end = Carbon::parse("2017-08-10 22:00:00");
        $trans = $this->transactionRepository->gTransactions($start, $end);
//        $trans = $this->transactionRepository->getTransactions();
        $transl = \Lava::DataTable();
        $transl->addNumberColumn('Time')
            ->addNumberColumn('Transactions');
        foreach ($trans as $key => $transaction) {
            $transl->addRow([(int)$key,  $transaction->count()]);
        }
        return $transl->toJson();
    }
    public function createChart()
    {
        $transl = \Lava::DataTable();
        $transl->addNumberColumn('Time')
            ->addNumberColumn('Transactions');
        \Lava::LineChart('Trans', $transl, [
            'title' => 'Transactions'
        ]);
    }

View Code

<div id="trans_div"></div>
<?= \Lava::render('LineChart', 'Trans', 'trans_div') ?>

<script>
    $(document).ready(function() {
        lava.ready(function() {
            $.getJSON('http://localhost:8888/transaction_logs/api/getTransactions', function (dataTableJson) {
                lava.loadData('Trans', dataTableJson, function (chart) {
                    console.log(chart);
                });
            });
        });
    });
</script>

The above does not have an error but if I move the script to vuejs there is an error

<script>
    let lava = require('../../../../vendor/khill/lavacharts/javascript/src/lava/Lava.js');
    export default {
        mounted: function() {
            // lava.ready(function() {
                $.getJSON('http://localhost:8888/transaction_logs/api/getTransactions', function (dataTableJson) {
                    lava.loadData('Trans', dataTableJson, function (chart) {
                        console.log(chart);
                    });
                });
            // });
            // });
            // window.setInterval(() => {
            //     this.countDown();
            // },60000);
        },
        methods: {
            countDown: function () {

            }
        }
    }
</script>

[kevinkhill]

So I think the error is coming from this:

You are creating the lava javscript object yourself, and then trying to access a chart in it, that hasn't been stored yet.

1. The library works by first collecting all the charts into the singleton Lavacharts php class (I called it the Volcano object internally because I thought it was clever :laughing:)
2. Then the library outputs the Lava.js module
3. Then it loops though the Volcano and uses all the information you provided in php chart classes and applies it to this javascript template
4. This template is what creates the javascript version of the chart and stores it in Lava.js

So the reason why in your Vue attempt, the chart is not found, is because your manual inclusion of Lava.js never had lava.store() called with a chart, and therefore, cannot find your chart.

[hrcadm]

Hey @kevinkhill , could you elaborate it more, please? I have the exact same problem while trying your package. What is the right approach to this then?

I'm trying to fetch the Laravel API resource and output it in Vue component.

[kevinkhill]

I haven't abandoned this package, but once my daughter was born, I lost all free time to work on it. 😂

This was the direction I was taking Lavacharts before then, splitting it into a php and js library that worked together or separate.

https://github.com/lavacharts/lava.js

[kevinkhill]

I have been using Vue a lot more lately, and I really want to make a component/library for lavacharts in vue. I have no promises or timelines, but it is a todo of mine.