Render a static chart using Smoothie Charts

by Drew Noakes

HTML

<script src="http://smoothiecharts.org/smoothie.js"></script>

<canvas id="chart" width="400" height="200"></canvas>

JavaScript

// Create the chart
var chart = new SmoothieChart({scaleSmoothing:1});
var timeSeries = new TimeSeries();
chart.addTimeSeries(timeSeries, {lineWidth:2,strokeStyle:'#00ff00'});

// Build some sample data
var endTime = Date.now();
for (var i = 0; i < 100; i++)
{
    timeSeries.append(new Date(endTime - i*500), Math.random()*10-5);
}

// Render it
var canvas = document.getElementById('chart');
chart.render(canvas, endTime);