[
{y: 0.74, x: 1558531380957},
{y: 0.96, x: 1558531379950},
{y: 1.08, x: 1558531378942},
{y: 1.11, x: 1558531377939},
{y: 1.13, x: 1558531376932},
{y: 1.1, x: 1558531375930},
{y: 0.59, x: 1558531374914},
{y: 0.75, x: 1558531373911},
{y: 1.25, x: 1558531372902},
{y: 0.75, x: 1558531371898},
{y: 0.85, x: 1558531370893},
{y: 0.59, x: 1558531369889},
{y: 0.4, x: 1558531368887},
{y: 1.08, x: 1558531367879},
{y: 1.31, x: 1558531366871},
{y: 0.63, x: 1558531365866},
{y: 1.19, x: 1558531364859},
{y: 1.26, x: 1558531363854},
{y: 0.92, x: 1558531362848},
{y: 1.31, x: 1558531361837},
]

$(document).ready(function() {

    var chartColors = {
        red: 'rgb(255, 99, 132)',
        blue: 'rgb(54, 162, 235)'
    };

    var color = Chart.helpers.color;

    var config = {
        type: 'line',
        data: {
            datasets: [{
                label: 'Z-Score',
                backgroundColor: color(chartColors.blue).alpha(0.75).rgbString(),
                borderColor: chartColors.red,
                fill: false,
                lineTension: 0,
                data: []
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            title: {
                display: false,
            },
            scales: {
                xAxes: [{
                    type: 'realtime',
                    realtime: {
                        duration: 60000,
                        refresh: 1000,
                        delay: 2000,
                        pause: false,
                        ttl: undefined,
                        frameRate: 48,

                        onRefresh: function(chart) {

                            var data = []

                            $.get( "{% url 'live_z_score' %}", function(zScoreJSON) {
                                data = zScoreJSON                                   Array.prototype.push.apply(chart.data.datasets[0].data, data);
                            });
                        }
                    }
                }],
                yAxes: [{
                    scaleLabel: {
                        display: true,
                        labelString: 'value'
                    }
                }]
            },
            tooltips: {
                mode: 'nearest',
                intersect: false
            },
            hover: {
                mode: 'nearest',
                intersect: false
            }
        }
    };

    var ctx = document.getElementById('myChart').getContext('2d');
    window.myChart = new Chart(ctx, config);

});