- 홈페이지 : http://smoothiecharts.org/
- 다운로드 : http://github.com/joewalnes/smoothie/raw/master/smoothie.js
Example 1.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/../smoothie.js"></script>
<script type="text/javascript">
// Randomly add a data point every 500ms
var random = new TimeSeries();
setInterval(function() {
random.append(new Date().getTime(), Math.random() * 10000);
}, 500);
function createTimeline() {
var chart = new SmoothieChart();
chart.addTimeSeries(random, { strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 });
chart.streamTo(document.getElementById("chart"), 500);
}
</script>
</head>
<body onload="createTimeline()">
<p>The <em>hello world</em> of <a href="/../">Smoothie Charts</a>. View source.</p>
<canvas id="chart" width="400" height="100"></canvas>
</body>
</html>
Example 2.
- Javascript
var chart = new SmoothieChart({grid:{fillStyle:'#fcfcf5'}}),
canvas = document.getElementById('smoothie-chart'),
series = new TimeSeries();
chart.addTimeSeries(series, {lineWidth:2,strokeStyle:'#b82f1a'});
chart.streamTo(canvas, 500);
- HTML
<canvas id="smoothie-chart" width="1000" height="200">
