{# empty Twig template #}
<script type="text/javascript">


    var plot = {};

    jQuery(document).ready(function () {

        jQuery(function () {

            var data = [];
            var options = {
                series: {
                    lines: { show: true, fill: true,

                        fillColor: { colors: [ { opacity: 0.05 }, { opacity: 0.15 } ] }
                    },
                    points: { show: true  }
                },
                legend: { position: 'nw'},
                grid: { hoverable: true, clickable: true, borderColor: '#ccc', borderWidth: 1, labelMargin: 10 },
                xaxis: {

                    mode: "time",
                    minTickSize: [1, "{{minTickSize}}"]
                },
                yaxis: {
                    tickDecimals: 0,
                    min: 0,
            {% if maxTime %}
                    max: '{{ maxTime }}'
            {% endif %}
                }
            };

            //plot = jQuery.plot("#{{ id }}", data, options);

            jQuery('#{{ id }}').addClass('overlay_loading');

            jQuery.ajax({
                url: '{{url}}',
                type: "GET",
                dataType: "json",
                data: {'interval': '{{interval}}'},
                success: onDataReceived
            });

            alreadyFetched = {};
            function onDataReceived(series) {

                jQuery('#{{ id }}').removeClass('overlay_loading');

                for (i in series) {
                    if (series[i].data[0] && series[i].data[0][0] && series[i].data[0][1]) {
                        if (!alreadyFetched[series[i].label]) {
                            alreadyFetched[series[i].label] = true;
                            //console.log("siries", series[i]);
                            data.push(series[i]);
                        }
                    }
                }

                plot = jQuery.plot("#{{ id }}", series, options);
            }

            jQuery("<div id='tooltip'></div>").css({
                position: "absolute",
                display: "none",
                border: "1px solid #fdd",
                padding: "2px",
                "background-color": "#fee",
                opacity: 0.80
            }).appendTo("body");
            jQuery("#{{ id }}").bind("plothover", function (event, pos, item) {

                if (pos) {
                    var str = "(" + (pos.x ? pos.x.toFixed(2) : 0) + ", " + (pos.y ? pos.y.toFixed(2) : 0) + ")";
                }

                jQuery("#hoverdata").text(str);

                if (item) {
                    var x = parseInt(item.datapoint[0]),
                            y = item.datapoint[1];


                    var date = (new Date(x));
                    var year = date.getFullYear();
                    var day = date.getDate();
                    var month = date.getMonth() + 1;

                    var hours = date.getHours();
                    // Minutes part from the timestamp
                    var minutes = "0" + date.getMinutes();

                    var formattedDate = day + '.' + month + "." + year;
                    
                    var hour = ('{{interval}}' * 1) <= 7 ? " " + hours + ':' + minutes.substr(-2) : "";
                    
                    var label = "Дата: " + formattedDate + hour + "<br/> " + item.series.label + ": " + y;

                    jQuery("#tooltip").html(label)
                            .css({top: item.pageY + 5, left: item.pageX + 5})
                            .fadeIn(200);
                } else {
                    jQuery("#tooltip").hide();
                }

            });
        });

    });
</script>