webxl/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.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>
	<!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>