Untitled

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="Chart.js"></script>
</head>
<body>
    <canvas id="myChart" width="600" height="200"></canvas>
    <script type="text/javascript">
        var data = {
            labels : [],
            datasets : [ {
                fillColor : "rgba(220,220,220,0.3)",
                strokeColor : "rgba(220,220,220,1)",
                pointColor : "rgba(220,220,220,1)",
                pointStrokeColor : "#fff",
                data : []
            }, {
                fillColor : "rgba(120,220,220,0.3)",
                strokeColor : "rgba(120,220,220,1)",
                pointColor : "rgba(120,220,220,1)",
                pointStrokeColor : "#fff",
                data : []
            }, {
                fillColor : "rgba(220,220,20,0.3)",
                strokeColor : "rgba(220,220,20,1)",
                pointColor : "rgba(220,220,20,1)",
                pointStrokeColor : "#fff",
                data : []
            } ]
        }
        //Get the context of the canvas element we want to select
        var ctx = document.getElementById("myChart").getContext("2d");
        var chart = new Chart(ctx);
        // fake live data
        setInterval(function() {
            var d = new Date();
            var l = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
            data.labels.push(l)
            while (data.labels.length > 10)
                data.labels.shift();
            for ( var i in data.datasets) {
                data.datasets[i].data.push(Math.random());
                while (data.datasets[i].data.length > 10)
                    data.datasets[i].data.shift();
                chart.Line(data, {
                    animation : false
                });
            }
        }, 1000);
    </script>
</body>
</html>