A Pen by Alan Wynn.

index.html

<div class='wrapper'>
    <div class='title'>
        <a href="https://xboxapi.com" target="_new">XboxAPI</a> Stats Graph
    </div>
    <div class='chart' id='p1'>
        <canvas id='c1'></canvas>
    </div>
    <div class='footer'>
        <p>Cupcake ipsum dolor sit amet tootsie roll chocolate bar sweet roll jelly-o. Fruitcake cupcake I love candy canes croissant donut. Powder tiramisu I love. Icing pie sugar plum marshmallow topping cupcake. Applicake I love ice cream. Pie tootsie roll gummi bears I love macaroon.</p>
    </div>
</div>

PoC-Live-updating-Chart.js.md

PoC Live updating Chart.js

This is just a test of a chart.js line chart that changes based on updated data.

A Pen by Alan Wynn on CodePen.

License.

script.js

var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth - 40;
c1.height = parent.offsetHeight - 40;

function nearest(n, v) {
    n = n / v;
    n = (n < 0 ? Math.floor(n) : Math.ceil(n)) * v;
    return n;
}

$(document).ready(function(){
    var count = 10;
    var data = {
        labels : [],
        datasets : [
            {
                fillColor : "rgba(255,255,255,.1)",
                strokeColor : "rgba(255,255,255,1)",
                pointColor : "#b66e5d",
                pointStrokeColor : "rgba(255,255,255,1)",
                data : []
            }
        ]
    };

    var optionsAnimation = {
        //Boolean - If we want to override with a hard coded scale
        scaleOverride : true,
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        scaleSteps : 10,
        //Number - The value jump in the hard coded scale
        scaleStepWidth : 10,
        //Number - The scale starting value
        scaleStartValue : 0
    };

    // Not sure why the scaleOverride isn't working...
    var optionsNoAnimation = {
        animation : false,
        scaleFontColor : "rgba(255,255,255,1)",
        scaleLineColor : "rgba(255,255,255,1)",
        scaleGridLineColor : "transparent",
        // bezierCurve : false,

        //Boolean - If we want to override with a hard coded scale
        scaleOverride : true,
        //** Required if scaleOverride is true **
        //Number - The number of steps in a hard coded scale
        scaleSteps : 20,
        //Number - The value jump in the hard coded scale
        scaleStepWidth : 15,
        //Number - The scale starting value
        scaleStartValue : 500
    };

    var updateData = function(oldData){
        var labels = oldData["labels"];
        var dataSetA = oldData["datasets"][0]["data"];

        $.ajax({
            type: 'GET',
            url: 'https://xboxapi.com/stats/hour/',
            dataType: 'JSON',
            success: function(response) {
                dataSetA.push(response['requests']);
                // labels.push(response['time']);
                labels.push('Count: ' + response['requests']);

                if (labels.length > count) {
                    labels.shift();
                    dataSetA.shift();
                }

                optionsAnimation.scaleSteps   = nearest(Math.max.apply( Math, dataSetA), 100) / 100;
                optionsNoAnimation.scaleSteps = optionsAnimation.scaleSteps;

                optionsAnimation.scaleStartValue   = nearest(Math.max.apply( Math, dataSetA), 100) - 200;
                optionsNoAnimation.scaleStartValue = optionsAnimation.scaleStartValue;
            }
        });
    };

    setInterval(function() {
        updateData(data);
        myNewChart.Line(data, optionsNoAnimation);
    }, 1000);

    //Get the context of the canvas element we want to select
    var ctx = document.getElementById('c1').getContext("2d");
    var myNewChart = new Chart(ctx);
    myNewChart.Line(data, optionsAnimation);
});

style.scss

@import "compass";
$grey: #777;

@import url("http://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
@import url("http://weloveiconfonts.com/api/?family=fontawesome");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  &:before,
  &:after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
  }
}

html, body {
  height: 100%;
}

body {
  padding: 50px 0;
  font: 14px/1 'Open Sans', sans-serif;
  color: $grey;
  background: #ddd;
}

p {
  line-height: 1.8;
}

.wrapper {
  width: 600px;
  margin: 0 auto;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.title {
  height: 60px;
  padding: 0 30px;
  font-size: 18px;
  line-height: 60px;

  & a {
    color: $grey;
    text-decoration: none;

    &:hover,
    &:active {
      color: opacify(#d422d4, 0.1);
      text-decoration: underline;
      font-weight: bold;
    }
  }
}

.chart {
  height: 300px;
  padding: 20px;
  background: url("http://abload.de/img/bluruyu2s.jpg") #b66e5d;
  background-size: 100% 100%;
}

.footer {
  padding: 30px;
}