Highchart disappears after data update

#1

I am trying to generate a highchart using livewire model. I have a datepicker input from which the user can select the date range of the chart. Initially the chart loads, but when I change the date range, the chart disappears.

I have used the redraw() and yAxis[0].isDirty = true methods of the hightcharts API, but it does not seem to work.

below is my render method.

public function render()
{
    return view('livewire.reserves', [
        'dates' => $this->getDates(),
        'chartData' => $this->getChartData(),
    ]);
}

Has anyone come across this issue?

#2

When you save the form, livewire reloads the livewire component. Currently, you are probably only loading highchart when the doc is initially ready.

On your dateUpdate event of your date picker, emit an event like this in the livewire component:

$this->emitUp('datesUpdated');

or like this in your JavaScript:

<script>
    window.livewire.emit('datesUpdated')
</script>

And then in your javascript, add a listener for the event like:

<script>
window.livewire.on('datesUpdated' => {
    // Highchart init code goes here
});
</script>

This should load highchart on the newly updated component code. (https://laravel-livewire.com/docs/events)

2 Likes
#3

I think you should add wire:ignore on the datepicker input, to avoid livewire from interferring with javascript.

#4

Thank you Ken. It worked.

#5

Hi ken,

There is one more issue. Even the chart loads after changing the dates, the data in highchart does not update. I even try to echo data inside javascript code, but the data i get is previous data, However, if i echo the data outside the script tag, I get the updated data. Please note that I even emit the “datesUpdated” after querying the new data.

#6

I’d need to see the section of your view file that handles this to understand what’s happening.

#7

Hi ken,

Sorry for the late reply.
I have this code in my home.blade.php livewire component blade file. I am using a laravel blade template to load the chart.

<x-charts.line id="chart1" title="Total Outstanding By Participant Category (MVR)" :chart- 
    data="$chartData->nineteenth" :x-values="$chartDates" y-axis-label="In Rufiyaa" stack="true"/>
 
<script>
    window.livewire.emit('dataUpdated');
</script>

In my blade template file line.blade.php, the following code is there

<div class="rounded-lg relative">

//updated data prints here correctly
dd($data);

<script language='javascript'>

    //updated data does not print here. it prints the data loaded previously
    console.log('{{$data}}');

    // chart code goes here
            
</script>

The issue is that updated data does not print inside <script> tag. thus the chart does not show updated data.

#8

I’m going to assume that you’ve updated to Livewire v2.x by now.

class LineChart extends Component
{

    ...

    public function dataUpdated() {
        
        ...

        $this->emit('dataUpdated', ['dates' => $this.dates, 'chartData' => $this->chartData]);
    }

    public function render()
    {
        return view('livewire.reserves', [
            'dates' => $this->getDates(),
            'chartData' => $this->getChartData(),
        ]);
    }
}

In your JavaScript:

<div class="rounded-lg relative">

    //updated data prints here correctly
    dd($data);

    <script language='javascript'>
        var myHighchartData = [ ];

        window.dataUpdated('dataUpdated', event => {
            myHighchartData = event.detail.hcData)
        })

        console.log(myHighchartData);

        // chart code goes here
        
    </script>

There’s probably a better way to do this but I think this will work. Basically, you’re passing the updated data through the emit and then setting your global JavaScript variable to the new data.

#9

Hi ken,

Thank you so much. Finally this solution worked.