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


