@extends('frontend.layouts.screen')

@section('meta')
    <meta http-equiv="refresh" content="3600">
@endsection

@section('content')

    <div class="card-carousel" style="padding: 1% 2%; height: 100%;">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <div class="carousel slide" data-ride="carousel">

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    {{--wrf 0--}}
                    <div class="item active">
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Ambathale</h3>--}}
                                    <div class="card card-raised" id='hingurana_wrf0'
                                         style='width: 330; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dehiwala</h3>--}}
                                    <div class="card card-raised" id='mahapallegama_wrf0'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Parliment Lake</h3>--}}
                                    <div class="card card-raised" id='waga_wrf0'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                    <div class="card card-raised" id='hatton_wrf0'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                    <div class="card card-raised" id='ibattara2_wrf0'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                    <div class="card card-raised" id='orugoda_wrf0'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--wrf 1--}}
                    <div class="item">
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Ambathale</h3>--}}
                                    <div class="card card-raised" id='hingurana_wrf1'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dehiwala</h3>--}}
                                    <div class="card card-raised" id='mahapallegama_wrf1'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Parliment Lake</h3>--}}
                                    <div class="card card-raised" id='waga_wrf1'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                    <div class="card card-raised" id='hatton_wrf1'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                    <div class="card card-raised" id='ibattara2_wrf1'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                    <div class="card card-raised" id='orugoda_wrf1'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--wrf 2--}}
                    <div class="item">
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Ambathale</h3>--}}
                                    <div class="card card-raised" id='hingurana_wrf2'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dehiwala</h3>--}}
                                    <div class="card card-raised" id='mahapallegama_wrf2'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Parliment Lake</h3>--}}
                                    <div class="card card-raised" id='waga_wrf2'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                    <div class="card card-raised" id='hatton_wrf2'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                    <div class="card card-raised" id='ibattara2_wrf2'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                    <div class="card card-raised" id='orugoda_wrf2'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--wrf 3--}}
                    <div class="item">
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Ambathale</h3>--}}
                                    <div class="card card-raised" id='hingurana_wrf3'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dehiwala</h3>--}}
                                    <div class="card card-raised" id='mahapallegama_wrf3'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Parliment Lake</h3>--}}
                                    <div class="card card-raised" id='waga_wrf3'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                    <div class="card card-raised" id='hatton_wrf3'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                    <div class="card card-raised" id='ibattara2_wrf3'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                    <div class="card card-raised" id='orugoda_wrf3'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--wrf 4--}}
                    <div class="item">
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Ambathale</h3>--}}
                                    <div class="card card-raised" id='hingurana_wrf4'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dehiwala</h3>--}}
                                    <div class="card card-raised" id='mahapallegama_wrf4'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Parliment Lake</h3>--}}
                                    <div class="card card-raised" id='waga_wrf4'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                    <div class="card card-raised" id='hatton_wrf4'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                    <div class="card card-raised" id='ibattara2_wrf4'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                    <div class="card card-raised" id='orugoda_wrf4'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{--wrf 5--}}
                    <div class="item">
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Ambathale</h3>--}}
                                    <div class="card card-raised" id='hingurana_wrf5'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dehiwala</h3>--}}
                                    <div class="card card-raised" id='mahapallegama_wrf5'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Parliment Lake</h3>--}}
                                    <div class="card card-raised" id='waga_wrf5'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="container-fluid">
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Dematagoda Canal</h3>--}}
                                    <div class="card card-raised" id='hatton_wrf5'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa Out</h3>--}}
                                    <div class="card card-raised" id='ibattara2_wrf5'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                                <div class="col-md-4">
                                    {{--<h3 class="h4 text-center">Kittampahuwa River</h3>--}}
                                    <div class="card card-raised" id='orugoda_wrf5'
                                         style='width: 100%; height: auto;'></div>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>

            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="col-md-6">
            <a href="#carousel-example-generic" class="btn btn-info btn-block left carousel-control-prev" role="button"
               data-slide="prev"><i class="fa fa-arrow-left"></i></a>
        </div>
        <div class="col-md-6">
            <button href="#carousel-example-generic" class="btn btn-info btn-block right carousel-control-next"
                    role="button" data-slide="next"><i class="fa fa-arrow-right"></i></button>
        </div>
    </div>

@endsection

@section('after-scripts')
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script type="text/javascript">

        Highcharts.setOptions({
            global: {
                useUTC: false
            }
        });

        $(function () {
            $(document).ready(function () {

                // wrf0 data
                // hingurana
                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana_wrf0",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF0 Forecast',
                            "data":
                                [
                                        @if($data['wrf0']['hingurana']['values'] !== null)
                                        @foreach($data['wrf0']['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // mahapallegama
                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama_wrf0",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF0 Forecast',
                            "data":
                                [
                                        @if($data['wrf0']['mahapallegama']['values'] !== null)
                                        @foreach($data['wrf0']['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // waga
                waga = new Highcharts.Chart({
                    "title": {
                        "text": 'Waga Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "waga_wrf0",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF0 Forecast',
                            "data":
                                [
                                        @if($data['wrf0']['waga']['values'] !== null)
                                        @foreach($data['wrf0']['waga']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // hatton
                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton_wrf0",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF0 Forecast',
                            "data":
                                [
                                        @if($data['wrf0']['hatton']['values'] !== null)
                                        @foreach($data['wrf0']['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // ibattara2
                ibattara2 = new Highcharts.Chart({
                    "title": {
                        "text": 'IBATTARA2 Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "ibattara2_wrf0",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF0 Forecast',
                            "data":
                                [
                                        @if($data['wrf0']['ibattara2']['values'] !== null)
                                        @foreach($data['wrf0']['ibattara2']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // orugoda
                orugoda = new Highcharts.Chart({
                    "title": {
                        "text": 'Orugodawaththa Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "orugoda_wrf0",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF0 Forecast',
                            "data":
                                [
                                        @if($data['wrf0']['orugoda']['values'] !== null)
                                        @foreach($data['wrf0']['orugoda']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                //######################################

                // wrf1 data
                // hingurana
                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana_wrf1",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF1 Forecast',
                            "data":
                                [
                                        @if($data['wrf1']['hingurana']['values'] !== null)
                                        @foreach($data['wrf1']['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // mahapallegama
                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama_wrf1",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF1 Forecast',
                            "data":
                                [
                                        @if($data['wrf1']['mahapallegama']['values'] !== null)
                                        @foreach($data['wrf1']['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // waga
                waga = new Highcharts.Chart({
                    "title": {
                        "text": 'Waga Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "waga_wrf1",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF1 Forecast',
                            "data":
                                [
                                        @if($data['wrf1']['waga']['values'] !== null)
                                        @foreach($data['wrf1']['waga']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // hatton
                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton_wrf1",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF1 Forecast',
                            "data":
                                [
                                        @if($data['wrf1']['hatton']['values'] !== null)
                                        @foreach($data['wrf1']['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // ibattara2
                ibattara2 = new Highcharts.Chart({
                    "title": {
                        "text": 'IBATTARA2 Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "ibattara2_wrf1",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF1 Forecast',
                            "data":
                                [
                                        @if($data['wrf1']['ibattara2']['values'] !== null)
                                        @foreach($data['wrf1']['ibattara2']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // orugoda
                orugoda = new Highcharts.Chart({
                    "title": {
                        "text": 'Orugodawaththa Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "orugoda_wrf1",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF1 Forecast',
                            "data":
                                [
                                        @if($data['wrf1']['orugoda']['values'] !== null)
                                        @foreach($data['wrf1']['orugoda']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });


                //####################################

                // wrf2 data
                // hingurana
                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana_wrf2",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF2 Forecast',
                            "data":
                                [
                                        @if($data['wrf2']['hingurana']['values'] !== null)
                                        @foreach($data['wrf2']['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // mahapallegama
                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama_wrf2",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF2 Forecast',
                            "data":
                                [
                                        @if($data['wrf2']['mahapallegama']['values'] !== null)
                                        @foreach($data['wrf2']['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // waga
                waga = new Highcharts.Chart({
                    "title": {
                        "text": 'Waga Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "waga_wrf2",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF2 Forecast',
                            "data":
                                [
                                        @if($data['wrf2']['waga']['values'] !== null)
                                        @foreach($data['wrf2']['waga']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // hatton
                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton_wrf2",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF2 Forecast',
                            "data":
                                [
                                        @if($data['wrf2']['hatton']['values'] !== null)
                                        @foreach($data['wrf2']['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // ibattara2
                ibattara2 = new Highcharts.Chart({
                    "title": {
                        "text": 'IBATTARA2 Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "ibattara2_wrf2",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF2 Forecast',
                            "data":
                                [
                                        @if($data['wrf2']['ibattara2']['values'] !== null)
                                        @foreach($data['wrf2']['ibattara2']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // orugoda
                orugoda = new Highcharts.Chart({
                    "title": {
                        "text": 'Orugodawaththa Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "orugoda_wrf2",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF2 Forecast',
                            "data":
                                [
                                        @if($data['wrf2']['orugoda']['values'] !== null)
                                        @foreach($data['wrf2']['orugoda']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });


                //####################################

                // wrf3 data
                // hingurana
                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana_wrf3",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF3 Forecast',
                            "data":
                                [
                                        @if($data['wrf3']['hingurana']['values'] !== null)
                                        @foreach($data['wrf3']['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // mahapallegama
                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama_wrf3",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF3 Forecast',
                            "data":
                                [
                                        @if($data['wrf3']['mahapallegama']['values'] !== null)
                                        @foreach($data['wrf3']['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // waga
                waga = new Highcharts.Chart({
                    "title": {
                        "text": 'Waga Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "waga_wrf3",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF3 Forecast',
                            "data":
                                [
                                        @if($data['wrf3']['waga']['values'] !== null)
                                        @foreach($data['wrf3']['waga']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // hatton
                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton_wrf3",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF3 Forecast',
                            "data":
                                [
                                        @if($data['wrf3']['hatton']['values'] !== null)
                                        @foreach($data['wrf3']['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // ibattara2
                ibattara2 = new Highcharts.Chart({
                    "title": {
                        "text": 'IBATTARA2 Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "ibattara2_wrf3",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF3 Forecast',
                            "data":
                                [
                                        @if($data['wrf3']['ibattara2']['values'] !== null)
                                        @foreach($data['wrf3']['ibattara2']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // orugoda
                orugoda = new Highcharts.Chart({
                    "title": {
                        "text": 'Orugodawaththa Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "orugoda_wrf3",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF3 Forecast',
                            "data":
                                [
                                        @if($data['wrf3']['orugoda']['values'] !== null)
                                        @foreach($data['wrf3']['orugoda']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });


                //#######################################

                // wrf4 data
                // hingurana
                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana_wrf4",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF4 Forecast',
                            "data":
                                [
                                        @if($data['wrf4']['hingurana']['values'] !== null)
                                        @foreach($data['wrf4']['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // mahapallegama
                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama_wrf4",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF4 Forecast',
                            "data":
                                [
                                        @if($data['wrf4']['mahapallegama']['values'] !== null)
                                        @foreach($data['wrf4']['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // waga
                waga = new Highcharts.Chart({
                    "title": {
                        "text": 'Waga Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "waga_wrf4",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF4 Forecast',
                            "data":
                                [
                                        @if($data['wrf4']['waga']['values'] !== null)
                                        @foreach($data['wrf4']['waga']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // hatton
                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton_wrf4",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF4 Forecast',
                            "data":
                                [
                                        @if($data['wrf4']['hatton']['values'] !== null)
                                        @foreach($data['wrf4']['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // ibattara2
                ibattara2 = new Highcharts.Chart({
                    "title": {
                        "text": 'IBATTARA2 Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "ibattara2_wrf4",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF4 Forecast',
                            "data":
                                [
                                        @if($data['wrf4']['ibattara2']['values'] !== null)
                                        @foreach($data['wrf4']['ibattara2']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // orugoda
                orugoda = new Highcharts.Chart({
                    "title": {
                        "text": 'Orugodawaththa Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "orugoda_wrf4",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF4 Forecast',
                            "data":
                                [
                                    @if($data['wrf4']['orugoda']['values'] !== null)
                                        @foreach($data['wrf4']['orugoda']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // wrf4 data
                // hingurana
                hingurana = new Highcharts.Chart({
                    "title": {
                        "text": 'Hingurana Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hingurana_wrf5",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF5 Forecast',
                            "data":
                                [
                                        @if($data['wrf5']['hingurana']['values'] !== null)
                                        @foreach($data['wrf5']['hingurana']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // mahapallegama
                mahapallegama = new Highcharts.Chart({
                    "title": {
                        "text": 'Mahapallegama Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "mahapallegama_wrf5",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF5 Forecast',
                            "data":
                                [
                                        @if($data['wrf5']['mahapallegama']['values'] !== null)
                                        @foreach($data['wrf5']['mahapallegama']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // waga
                waga = new Highcharts.Chart({
                    "title": {
                        "text": 'Waga Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "waga_wrf5",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF5 Forecast',
                            "data":
                                [
                                        @if($data['wrf5']['waga']['values'] !== null)
                                        @foreach($data['wrf5']['waga']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // hatton
                hatton = new Highcharts.Chart({
                    "title": {
                        "text": 'Hatton Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "hatton_wrf5",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF5 Forecast',
                            "data":
                                [
                                        @if($data['wrf5']['hatton']['values'] !== null)
                                        @foreach($data['wrf5']['hatton']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // ibattara2
                ibattara2 = new Highcharts.Chart({
                    "title": {
                        "text": 'IBATTARA2 Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "ibattara2_wrf5",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF5 Forecast',
                            "data":
                                [
                                        @if($data['wrf5']['ibattara2']['values'] !== null)
                                        @foreach($data['wrf5']['ibattara2']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

                // orugoda
                orugoda = new Highcharts.Chart({
                    "title": {
                        "text": 'Orugodawaththa Station - Rainfall'
                    },
                    "rangeSelector": {
                        allButtonsEnabled: true,
                        "buttons": [
                            {
                                "type": 'minute',
                                "count": 900,
                                "text": '15 Min',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [15]]]
                                }
                            },
                            {
                                "type": 'minute',
                                "count": 300,
                                "text": 'Hour',
                                "dataGrouping": {
                                    forced: true,
                                    "units": [['minute', [60]]]
                                }
                            },
                            {
                                "type": 'day',
                                "count": 1,
                                "text": 'Day'
                            },
                            {
                                "type": 'all',
                                "text": 'All'
                            }
                        ],
                        "buttonTheme": {
                            "width": 60
                        },
                        "selected": 3
                    },
                    "legend": {
                        "layout": "horizontal",
                        "style": {
                            'align': 'center'
                        },
                        enabled: true
                    },
                    "xAxis": {
                        "type": "datetime"
                    },
                    "yAxis": {
                        "opposite": false,
                        "title": {
                            "text": 'mm'
                        }
                    },
                    "plotOptions": {
                        "column": {
                            "minPointLength": 2
                        }
                    },
                    "chart": {
                        "defaultSeriesType": "column",
                        "renderTo": "orugoda_wrf5",
                        "height": 350
                    },
                    "credits": {
                        enabled: false
                    },
                    "series": [
                        {
                            "name": 'WRF5 Forecast',
                            "data":
                                [
                                        @if($data['wrf5']['orugoda']['values'] !== null)
                                        @foreach($data['wrf5']['orugoda']['values'] as $value)
                                    [{{ $value['time'] }},
                                        {{ $value['value'] }}],
                                    @endforeach
                                    @endif
                                ],
                            tooltip: {
                                valueDecimals: 2
                            }
                        }]
                });

            });
        });

    </script>
    <script>
        $('.carousel').carousel({
            interval: 120000
        })
    </script>
@endsection