@extends('admin-panel.layout')
@section('page-title', 'Dashboard')
@section('page-content')

    <div class="row">
        <div class="col-lg-6">
            <canvas id="graph-1" height="200" data-initialized="false" data-colors="#1abc9c,#f1556c"></canvas>
        </div>
        <div class="col-lg-6">
            <canvas id="graph-2" height="200" data-initialized="false" data-colors="#1abc9c,#f1556c"></canvas>
        </div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", (event) => {

            let data = {
                labels: [],
                datasets: [{
                    label: '# of Votes',
                    data: [],
                    borderWidth: 1
                }]
            };

            let config = {
                type: 'line',
                data,
                options: {
                    borderColor: '#ff8000',
                    scales: {
                        x: {
                            type: 'realtime',
                            realtime: {
                                onRefresh: chart => {
                                    chart.data.datasets.forEach(dataset => {
                                        dataset.data.push({
                                            x: Date.now(),
                                            y: Math.random() * 10
                                        });
                                    });
                                }
                            }
                        },
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            }

            let myChart = new Chart(
                document.getElementById('graph-1'),
                config
            );

        });
    </script>

@endsection