Login / Join
Animating a HTML chart (Sine function)
submitted on 27/07/2013 by
Codicode
+ infos
Config
Embed
Share
Animating a HTML chart (Sine function)
by
Codicode
Shifting and animating a sine function in a Html Graph with javascript, using jquery plot graph library to draw and animate the graph.
Framework 1 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
Framework 2 :
-- None --
jQuery 2.0.3
jQuery 1.9.1
jQuery 1.9.0
jQuery 1.8.0
jQuery 1.7.1
jQuery 1.6.3
jQuery UI 1.10.3
MooTools 1.4.5
AngularJS 1.0.4
Prototype 1.7.1.0
Dojo 1.8.3
Chrome Frame 1.0.3
Ext Core 3.1.0
SWFObject 2.2
WebFont Loader 1.1.2
+ Js file(s) :
//www.flotcharts.org/javascript/jquery.flot.min.js
+ Css file(s) :
Apply
Link :
Direct http link :
Fork button :
Html code :
Embed preview :
Copy the following html code to your page to embed the preview,
To include many previews on a single page, just repeat the first line.
You can change the width, height and border color (bcolor).
<div class="refork-widget" code="d6c" style="width:100%;height:200px;" bcolor="#ccc"></div>
<script type="text/javascript" src="//snippet.run/d/z.js"></script>
HTML
<div align="center"> <div id="myChart" style="width:100%;height:100%;"></div> <div>
CSS
body { background-color:#000; padding:10px; }
Javascript
var ic = 0; function getData() { var d1 = []; for (var i = 0 ; i < 19 ; i += 0.1) d1.push([i, Math.sin(i - ic)]); if (ic==12.5) {ic=0;} else {ic = ic + 0.05;} ic = Math.round(ic*100)/100; return d1; } function update() { plot.setData([getData()]); plot.draw(); } var plot = $.plot($("#myChart"), [ getData()]); var int = self.setInterval(function(){update()},50);
©2013 Copyright snippet.run
Privacy
-
Terms of use
-
About
-
Contact