andrewwatts/flot_v_raphael.html

## flot_v_raphael.html
<!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.5: (img at: http://skitch.com/andrewwatts/nxgwp/600pt-results)


                flot = 291
                raphael = 82


                1800pts in FF3.5: (img at: http://skitch.com/andrewwatts/nxgwa/1800pt-results)

                flot = 2564
                raphael = 85
            -->
        </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);
        }

        f_start = new Date().getTime();
        $.plot(f, f_data);
        f_delta = new Date().getTime() - f_start;

        r_start = new Date().getTime();
        r.g.linechart(0, 0, 600, 300, rx_data, [ry_data]);
        r_delta = new Date().getTime() - r_start;

        $('#results').html('flot = ' + f_delta + '<br>raphael = ' + r_delta);
    })(jQuery);
    </script>
</html>
	<!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.5: (img at: http://skitch.com/andrewwatts/nxgwp/600pt-results)


	flot = 291
	raphael = 82


	1800pts in FF3.5: (img at: http://skitch.com/andrewwatts/nxgwa/1800pt-results)

	flot = 2564
	raphael = 85
	-->
	</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);
	}

	f_start = new Date().getTime();
	$.plot(f, f_data);
	f_delta = new Date().getTime() - f_start;

	r_start = new Date().getTime();
	r.g.linechart(0, 0, 600, 300, rx_data, [ry_data]);
	r_delta = new Date().getTime() - r_start;

	$('#results').html('flot = ' + f_delta + '<br>raphael = ' + r_delta);
	})(jQuery);
	</script>
	</html>