Skip to content

Instantly share code, notes, and snippets.

@arisetyo

arisetyo/index.html

Created July 12, 2013 16:37
Show Gist options
  • Save arisetyo/5985848 to your computer and use it in GitHub Desktop.
Save arisetyo/5985848 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. arisetyo created this gist Jul 12, 2013.
    73 changes: 73 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Galenic">
    <script src="js/jquery-1.9.1.js"></script>
    <script src="js/knockout-2.1.0.js"></script>
    <script src="js/Chart.js"></script>
    <link rel="stylesheet" href="pure-min.css">
    <link rel="stylesheet" href="custom.css">
    <title>Chart.js sample</title>
    </head>
    <body>

    <div class="pure-u-1">

    <div>
    <canvas id="canvas" height="450" width="600"></canvas>
    </div>

    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">

    function MainViewModel(data) {
    var self = this;
    var socket = io.connect('http://localhost:8070');

    self.lineChartData = ko.observable({
    labels : ["January","February","March","April","May","June","July"],
    datasets : [
    {
    fillColor : "rgba(151,187,205,0.5)",
    strokeColor : "rgba(151,187,205,1)",
    pointColor : "rgba(151,187,205,1)",
    pointStrokeColor : "#fff",
    data : [65,59,90,81,56,55,40]
    }
    ]
    });

    socket.on('pushdata', function (data) {
    self.lineChartData().datasets[0].data.shift();
    self.lineChartData().datasets[0].data.push(data);

    self.initLine();
    });

    self.initLine = function() {
    var options = {
    animation : false,
    scaleOverride : true,
    scaleSteps : 10,//Number - The number of steps in a hard coded scale
    scaleStepWidth : 10,//Number - The value jump in the hard coded scale
    scaleStartValue : 10//Number - The scale starting value
    };

    var ctx = $("#canvas").get(0).getContext("2d");
    var myLine = new Chart(ctx).Line( vm.lineChartData(), options );
    }

    }

    var vm = new MainViewModel();
    ko.applyBindings(vm);
    vm.initLine();

    </script>

    </body>
    </html>
    31 changes: 31 additions & 0 deletions server.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    var application_root = __dirname,
    express = require('express'),
    path = require("path");

    app = express();

    var server = require('http').createServer(app),
    io = require('socket.io').listen(server);

    app.configure(function () {
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.static(path.join(application_root, "public")));
    });

    ///DATA
    function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    io.sockets.on('connection', function (socket) {

    setInterval(function(){
    var data = getRandomInt(0,100);
    io.sockets.emit('pushdata', data);
    },2000);

    });

    server.listen(8070);
    console.log('Server is listening on port 8070...');