@extends('layouts.empty')

@section('linktext')
    <link href="{{ asset('css/displayd2.css') }}" rel="stylesheet">
@endsection

@section('content')

    <div class="container-fluid">
        <div id="chartContainer" style="height: 370px; width: 100%;"></div>
    </div>

@endsection

@section('scriptext')
    <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
    <script src="{{ asset('js/canvasjs.min.js') }}"></script>


    <script>
        var chart = null;
        var dataPoints = [];

        window.onload = function() {

            chart = new CanvasJS.Chart("chartContainer", {
                animationEnabled: true,
                theme: "light2",
                title: {
                    text: "Упаковал"
                },
                axisY: {
                    title: "Упаковок",
                    titleFontSize: 24
                },
                data: [{
                    type: "spline",
                    yValueFormatString: "#,### уп.",
                    dataPoints: dataPoints
                }]
            });
            updateData();
        }

        function callback(data) {
            for (var i = 0; i < data.orders.length; i++) {
                dataPoints.push({
                    x: new Date(data.orders[i].DATA),
                    y: data.orders[i].UNITS
                });
            }
            chart.render();
           // setTimeout(updateData, 1500);
        }

        function updateData() {
            $.getJSON("d2_ajax", callback);
        }


    </script>

@endsection