Using HighCharts with LARAVEL

Question

I would like to use Highchart for laravel but i don't know how to pass data from controller to blade with the correct syntax. Actually i'm using static data and the graph is displayed correctly.

statistiche.blade.php

<div class="row">
    <div class="col-md-12">
        <div id="container2" style="height: 400px; min-width: 310px"></div>
    </div>
</div>

<script>
// Create the chart
        Highcharts.stockChart('container2', {

            rangeSelector: {
                selected: 1
            },

            title: {
                text: 'AAPL Stock Price'
            },

            plotOptions: {
                spline: {
                    marker: {
                        enabled: true
                    }
                }
            },

            series: [{
                name: 'Richieste scadute',
                data: [
                    [Date.UTC(1970, 9, 21), 0],
                    [Date.UTC(1970, 10, 4), 0.28],
                    [Date.UTC(1970, 10, 9), 0.25],
                    [Date.UTC(1970, 10, 27), 0.2],
                    [Date.UTC(1970, 11, 2), 0.28]
                ]
            }, {
                name: 'Richieste evase',
                data: [
                    [Date.UTC(1970, 9, 29), 0],
                    [Date.UTC(1970, 10, 9), 0.4],
                    [Date.UTC(1970, 11, 1), 0.25],
                    [Date.UTC(1971, 0, 1), 1.66],
                    [Date.UTC(1971, 0, 10), 1.8]
                ]
            }, {
                name: 'Richieste in attesa',
                data: [
                    [Date.UTC(1970, 10, 25), 0],
                    [Date.UTC(1970, 11, 6), 0.25],
                    [Date.UTC(1970, 11, 20), 1.41],
                    [Date.UTC(1970, 11, 25), 1.64],
                    [Date.UTC(1971, 0, 4), 1.6]
                ]
            }]
        });

I would to use controller for extract data and pass there into the blade. Some advice?

shukshin.ivan · Accepted Answer · 2018-03-02 13:28:08Z

1

There are two ways to pass data to a highcharts graph.

1) Use $.getJSON to get data and fill in the series.

$.getJSON("{{ route('get-json-route') }}", function(chart){
    var hashObj = {};
    var seriesObj = {};

    var graphs = {'dd':'graph dd', 'ld' : 'graph ld title'};

    for(var nam in graphs) {
        seriesObj['visible'] = 1;
        seriesObj['color'] = '#00CC00';
        seriesObj['name'] = chart[nam]['name'] + ' stats';
        seriesObj['data'] = chart[nam]['data'];
        highcharts.addSeries(seriesObj);
    }
    highcharts.redraw();
});

2) Pass data directly into your blade template using json_encode:

seriesObj['data'] = {!! json_encode($data) !!};

answered Mar 2, 2018 at 13:28

shukshin.ivan

11.4k4 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adam Kozlowski · Accepted Answer · 2018-03-02 13:24:54Z

0

Hey Dude use special library: https://github.com/julles/laravel-highcharts

Just install and work:

composer require muhamadrezaar/highcharts

answered Mar 2, 2018 at 13:24

Adam Kozlowski

5,9064 gold badges37 silver badges55 bronze badges

Collectives™ on Stack Overflow

Using HighCharts with LARAVEL

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related