Create Animated Line Graph with HTML and JQuery

Here is a Very Simple and Basic Example to Create Animated Line Graph with HTML and JQuery. Learning Curve of Advanced Js can be Quite Steep. Not everyone can master the methods for the commonly used charting javascript and modify them to use for own work.

Create Animated Line Graph : Just Embed All

 

This Guide to Create Animated Line Graph with HTML and JQuery is Intended For a Starter. We will use two javascript – one is fixed, another you’ll change. Rest is the HTML. You can embed all the stuffs in your WordPress or any HTML webpage. The best way to test is to use Jsfiddle like service. Flot is a pure JavaScript plotting library for jQuery. It depends on JQuery. We provided you the name of a bit advanced library. We will use Smoothie Charts in this guide. This Smoothie Charts is most easy to understand. You can easily use Flot later after understanding the basics.

Advertisement

---

 

Create Animated Line Graph : No JQuery Example

 

We do not need Jquery with Smoothie Charts. In real World, you will get data from a WebSocket, we can use random generator for example. This is Smoothie :

Vim

https://raw.githubusercontent.com/joewalnes/smoothie/master/smoothie.js

1	https://raw.githubusercontent.com/joewalnes/smoothie/master/smoothie.js

wget it and include it with script tag in this way :

smoothie.js

Vim

// MIT License: ... ;(function(exports) { var Util = { extend: function() { arguments[0] = arguments[0] || {}; for (var i = 1; i < arguments.length; i++) { ... })(typeof exports === 'undefined' ? this : exports);

1 2 3 4 5 6 7 8 9 10 11

// MIT License: ... ;(function(exports) {     var Util = {     extend: function() {       arguments[0] = arguments[0] || {};       for (var i = 1; i < arguments.length; i++)       { ...         })(typeof exports === 'undefined' ? this : exports);

There is no need to include the commented out lines. This script is a constant. Next constant is the HTML part. That, for default example will be like :

HTML

Vim

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

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

Next is the variable, this is the variable, we can include it with script tag, a basic example :

Vim

var chart = new SmoothieChart(); var timeSeries = new TimeSeries(); chart.addTimeSeries(timeSeries, { strokeStyle: 'green', lineWidth: 1 }); chart.streamTo(document.getElementById('chart'), 100); setInterval(function() { timeSeries.append(new Date().getTime(), Math.random()); }, 100); document.getElementById('button').onclick = function() { timeSeries.data = []; };

1 2 3 4 5 6 7 8 9 10 11 12

var chart = new SmoothieChart(); var timeSeries = new TimeSeries(); chart.addTimeSeries(timeSeries, { strokeStyle: 'green', lineWidth: 1 }); chart.streamTo(document.getElementById('chart'), 100); setInterval(function() {     timeSeries.append(new Date().getTime(), Math.random()); }, 100); document.getElementById('button').onclick = function() {     timeSeries.data = []; };

We have added a clear button with this :

Vim

document.getElementById('button').onclick = function() { timeSeries.data = []; };

1 2 3 4

document.getElementById('button').onclick = function() {     timeSeries.data = []; };

Click Result :

we have used this variable javascript :

Vim

var chart = new SmoothieChart({ grid: { strokeStyle:'rgb(125, 0, 0)', fillStyle:'rgb(60, 0, 0)', lineWidth: 1, millisPerLine: 250, verticalSections: 11, }, labels: { fillStyle:'rgb(255, 255, 255)' } }); var timeSeries = new TimeSeries(); chart.addTimeSeries(timeSeries, { strokeStyle: 'yellow', lineWidth: 2 }); chart.streamTo(document.getElementById('chart'), 100); setInterval(function() { timeSeries.append(new Date().getTime(), Math.random()); }, 100); document.getElementById('button').onclick = function() { timeSeries.data = []; };

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var chart = new SmoothieChart({   grid: { strokeStyle:'rgb(125, 0, 0)', fillStyle:'rgb(60, 0, 0)',           lineWidth: 1, millisPerLine: 250, verticalSections: 11, },   labels: { fillStyle:'rgb(255, 255, 255)' } }); var timeSeries = new TimeSeries(); chart.addTimeSeries(timeSeries, { strokeStyle: 'yellow', lineWidth: 2 }); chart.streamTo(document.getElementById('chart'), 100); setInterval(function() {     timeSeries.append(new Date().getTime(), Math.random()); }, 100); document.getElementById('button').onclick = function() {     timeSeries.data = []; };

The stuffs are set in the way so that we can emulate it in real on LED screen.

Tagged With animated jquery line graph , create an animated interest line graph for video , html animated graphs , jquery animated graph