The following Line chart, drawn by Smoothie.js library, is just a very basic example of what this library can do.
The source of the script for the drawing is added as plain text to a Chart Snippet. The content of the chart snippet for the above chart is as following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <canvas id="mycanvas" width="400" height="100"></canvas> <script type="text/javascript"> window.onload = function () { // Data var line1 = new TimeSeries(); var line2 = new TimeSeries(); // Add a random value to each line every second setInterval(function() { line1.append(new Date().getTime(), Math.random()); line2.append(new Date().getTime(), Math.random()); }, 1000); var smoothie = new SmoothieChart({ grid: { strokeStyle:'rgb(125, 0, 0)', fillStyle:'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6}, labels: { fillStyle:'rgb(60, 0, 0)' } }); smoothie.addTimeSeries(line1, { strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:3 }); smoothie.addTimeSeries(line2, { strokeStyle:'rgb(255, 0, 255)', fillStyle:'rgba(255, 0, 255, 0.3)', lineWidth:3 }); smoothie.streamTo(document.getElementById("mycanvas")); } </script> |
<canvas id="mycanvas" width="400" height="100"></canvas> <script type="text/javascript"> window.onload = function () { // Data var line1 = new TimeSeries(); var line2 = new TimeSeries(); // Add a random value to each line every second setInterval(function() { line1.append(new Date().getTime(), Math.random()); line2.append(new Date().getTime(), Math.random()); }, 1000); var smoothie = new SmoothieChart({ grid: { strokeStyle:'rgb(125, 0, 0)', fillStyle:'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 6}, labels: { fillStyle:'rgb(60, 0, 0)' } }); smoothie.addTimeSeries(line1, { strokeStyle:'rgb(0, 255, 0)', fillStyle:'rgba(0, 255, 0, 0.4)', lineWidth:3 }); smoothie.addTimeSeries(line2, { strokeStyle:'rgb(255, 0, 255)', fillStyle:'rgba(255, 0, 255, 0.3)', lineWidth:3 }); smoothie.streamTo(document.getElementById("mycanvas")); } </script>