<script type="text/javascript">
    function showTooltip(x, y, contents) {
        jQuery('<div id="tooltip" class="tooltipflot">' + contents + '</div>').css({
            position: 'absolute',
            display: 'none',
            top: y + 5,
            left: x + 5
        }).appendTo("body").fadeIn(200);
    }


    var plot = {};

    jQuery(function () {

        var data = [];


        function plotWithOptions(d1) {


            var stack = 0,
                bars = true,
                lines = true,
                steps = true;

            jQuery.plot("#{{ id }}", [d1], {
                series: {
                    stack: stack,
                    lines: {
                        show: lines,
                        fill: true,
                        steps: steps,
                        color: "red"
                    },
                    bars: {
                        show: bars,
                        barWidth: 0.3
                    }
                },
                legend: {
                    show: true,
                    position: "ne"
                },
                grid: {
                    clickable: true,
                    hoverable: true
                },
                colors: ["#cb4b4b"],
                yaxis: {
                    autoScale: 'none',
                    tickDecimals: 0,
                    min: 0
                },
                xaxis: {
                    autoScale: 'none',
                    mode: "time",
                    minTickSize: [1, "day"]
                }
            });


            jQuery("<div id='tooltip{{ id }}'></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 (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 = "";

                    var label = "Дата: " + formattedDate + hour + "<br/> Размер: " +item.datapoint[1];

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


        }


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

        alreadyFetched = {};

        function onDataReceived(series) {

            var d1 = [];
            for (var i = 0; i <= 10; i += 1) {
                d1.push([i, parseInt(Math.random() * 30)]);
            }

            plotWithOptions(series);
        }




    });
</script>