Twitter Timeline Javascript

This snippet draws a bar graph that tells you your twitter posting frequency per hour in the last 24 hours.

Screenshot

Instructions

1. Download Twitter Timeline Javascript v0.2 (Requires PlotKit and MochiKit).
2. Edit TwitterTimeline.js and change the userid variable to your user-id. You'll find your user-id at http://twitter.com/account/badge.
3. You will need to include the javascript files:

   <script type="text/javascript" src="/js/MochiKit/MochiKit.js"></script>
   <script type="text/javascript" src="/js/PlotKit/Base.js"></script>
   <script type="text/javascript" src="/js/PlotKit/Layout.js"></script>
   <script type="text/javascript" src="/js/PlotKit/Canvas.js"></script>
   <script type="text/javascript" src="/js/PlotKit/SweetCanvas.js"></script>
   <script type="text/javascript" src="/js/TwitterTimeline.js"></script>
   

4. Next, add the following lines where you want the Timeline to appear:

   <script type="text/javascript" src="/js/TwitterTimeline.js"></script>
   <div><canvas id="graph" height="200" width="400"></canvas></div>
   

For your reference, TwitterTimeline.js:

 1 <script type="text/javascript">
 2 <!--
 3 /*
 4  * Twitter Timeline Javascript v0.2 (March 20, 2007)
 5  * Pravin Paratey (http://www.dustyant.com)
 6  * Andrei Virlan  (http://its.squeak.in)
 7  *
 8  * Released under Creative Commons Attribution 2.5 Licence
 9  * http://creativecommons.org/licenses/by/2.5/
10  *
11  * Changelog:
12  * 0.2 (Mar 20, 2007) - Moved to PlotKit to draw graphs
13  * 0.1 (Feb 23, 2007) - Initial Release
14  */
15 
16 var userid = '754023'; // Change this value to your user-id
17 
18 var timelineArray = new Array();
19 function drawGraph() {
20     var layout = new PlotKit.Layout("bar", {});
21     layout.addDataset("sqrt", timelineArray);
22     layout.evaluate();
23     var canvas = MochiKit.DOM.getElement("graph");
24     var plotter = new PlotKit.SweetCanvasRenderer(canvas, layout, {});
25     plotter.render();
26 }
27 
28 function twitterCallback(obj) {
29 	// Create an array to hold the 24 hours of the day
30 	var hourArray = new Array(24);
31 
32 	// Initialize array
33 	for(var i=0; i<24; i++) {
34 		hourArray[i] = 0;
35 	}
36 
37 	for (var i=0; i<obj.length; i++) {
38 		// Get date
39 		var created_at = new Date(obj[i].created_at);
40 		if(obj[i].user.id == userid) {
41 			// Increment the hour
42 			hourArray[created_at.getHours()]++;
43 		}
44 	}
45 
46 	// Construct the timeline
47 	for(var i=0; i<24; i++) {
48 		timelineArray[i] = new Array(i, hourArray[i]);
49 	}
50 	MochiKit.DOM.addLoadEvent(drawGraph);
51 }
52 // Makes the twitter call
53 document.write('<scr'+'ipt type="text/javascript"' +
54 	'src="http://twitter.com/statuses/friends_timeline/' +
55 	userid + '.json?callback=twitterCallback"></scr'+'ipt>');
56 -->
57 </script>