Skip to content

Instantly share code, notes, and snippets.

@webxl
Forked from andrewwatts/flot_v_raphael.html
Created October 19, 2010 04:16
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save webxl/633593 to your computer and use it in GitHub Desktop.
Correcting for additional default charting options in flot
<!DOCTYPE HTML>
<html>
<head>
<title>flot vs raphael</title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.flot.min.js"></script>
<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="g.raphael-min.js"></script>
<script type="text/javascript" src="g.line-min.js"></script>
</head>
<body>
<div id="results">
<!--
600pts in FF3.6:
flot = 11
raphael = 43
1800pts in FF3.6:
flot = 21
raphael = 48
-->
</div>
<div id="flot_graph" style="width: 600px; height: 300px;"></div>
<div id="raphael_graph"></div>
</body>
<script type="text/javascript">
(function($){
var number_of_points = 600,
f = $('#flot_graph'),
f_data = [[]],
r = Raphael("raphael_graph"),
rx_data = [],
ry_data = [],
f_start, f_delta, r_start, r_delta;
for(var x=0; x<number_of_points; x++){
var y = Math.floor(Math.random()*100);
f_data[0].push([x,y]);
rx_data.push(x);
ry_data.push(y);
}
// need to turn off the extra things flot does by default:
ao_opts = {
legend: { show: false },
series: { lines: { show: true, lineWidth: 1 }, shadowSize: 0 },
xaxis: { ticks: [] },
yaxis: { ticks: []},
grid: { show: false, borderWidth: 0 }
};
$.plot(f, f_data, ao_opts);
f_start = new Date().getTime();
$.plot(f, f_data, ao_opts);
f_delta = new Date().getTime() - f_start;
r_start = new Date().getTime();
r.g.linechart(0, 0, 600, 300, rx_data, [ry_data], { width: 1 });
r_delta = new Date().getTime() - r_start;
$('#results').html('flot = ' + f_delta + '<br>raphael = ' + r_delta);
})(jQuery);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment