1.
[Image]Not named. jpg
? 2. Code [HTML] Code
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title> HTML5 chart for FLOTR2 </title>
<script src= "Http://www.script-tutorials.com/demos/235/js/flotr2.min.js" ></script>
<!--[If Lt IE 9]>
<script type= "Text/javascript" src= "Js/flashcanvas.js" ></script>
<! [endif]-->
<style>
/* Page Layout styles */
*{
margin:0;
padding:0;
}
Header a.stuts,a.stuts:visited{
Border:none;
Text-decoration:none;
Color: #fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
Position:absolute;
top:0;
}
header. stuts span {
font-size:22px;
Font-weight:bold;
margin-left:5px;
}
. container {
Color: #000;
margin:20px Auto;
Overflow:hidden;
position:relative;
width:600px;
height:400px;
}
. Controls {
border:1px dashed gray;
Color: #000;
margin:20px Auto;
padding:25px;
position:relative;
width:550px;
}
. Controls P {
margin-bottom:10px;
}
. Controls Input {
margin-left:10px;
}
</style>
<body>
<div ><div id= "container" class= "container" ></div>
<div class= "Controls" >
<p>
<input type= "Radio" id= "Funcsin" Name= "func" value= "1" onclick= "Togglefunc (1)" Checked><label for= "Funcsin" > sin</label>
<input type= "Radio" Name= "func" id= "Funcsin2" value= "2" onclick= "Togglefunc (2)" ><label for= "funcsin2" > Sin (1/x) </lalel>
</p>
<p>
<input type= "Radio" name= "mode" value= "1" id= "VM1" onclick= "Togglemode (1)" Checked> <label for= "VM1" > #1 </label>
<input type= "Radio" name= "mode" value= "2" id= "vm2" onclick= "Togglemode (2)" > <label for= "vm2" > #2 </label >
<input type= "Radio" name= "mode" value= "3" id= "vm3" onclick= "Togglemode (3)" > <label for= "vm3" > #3 </label >
</p>
</div>
</body>
3. [Code][javascript] Code
var container = document.getElementById (' container ');
var start = (new Date). GetTime ();
var data, graph, offset, I;
var mode = 1;
var fmode = 1; 1-basic sin, 2-sin (1/x)
Toggle Mode
function Togglemode (i) {
mode = i;
}
Toggle Func
function Togglefunc (i) {
Fmode = i;
}
Draw a sine curve at time t
function Animatesine (t) {
data = [];
Data2 = [];
Little offset between steps
offset = 2 * Math.PI * (T-start)/10000;
http://www.enterdesk.com/special/meitu/?
if (Fmode = = 2 && offset > 15) {
start = t; US map
}
for (i = 0; i < 4 * MATH.PI; i + = 0.2) {
if (Fmode = = 1) {
Data.push ([I, Math.sin (I-offset)]);
Data2.push ([I, Math.sin (I*2-offset)]);
} else if (Fmode = = 2) {
Data.push ([I, Math.sin (1/(I-offset))]);
Data2.push ([I, Math.sin (1/(I*2-offset))]);
}
}
Prepare properties
var properties;
Switch (mode) {
Case 1:
Properties = {
YAxis: {
Max:2,
Min:-2
}
};
Break
Case 2:
Properties = {
YAxis: {
Max:2,
Min:-2
},
Bars: {
Show:true,
Horizontal:false,
shadowsize:0,
barwidth:0.5
}
};
Break
Case 3:
Properties = {
YAxis: {
Max:2,
Min:-2
},
Radar: {
Show:true
},
Grid: {
Circular:true,
Minorhorizontallines:true
}
};
Break
Case 4:
Properties = {
YAxis: {
Max:2,
Min:-2
},
Bubbles: {
Show:true,
Baseradius:5
},
};
Break
}
Draw graph
if (Fmode = = 1) {
Graph = Flotr.draw (container, [data, Data2], properties);
} else if (Fmode = = 2) {
Graph = Flotr.draw (container, [data], properties);
}
Main loop
SetTimeout (function () {
Animatesine (New Date). GetTime ());
}, 50);
}
Animatesine (start);
HTML5 Chart implemented with FLOTR2
