1 <html> 2 <head> 3 <script type='text/javascript' src='https://www.google.com/jsapi'></script> 4 <script type='text/javascript'> 5 google.load('visualization', '1', {'packages':['annotatedtimeline']}); 6 google.setOnLoadCallback(drawChart); 7 function drawChart() { 8 var data = new google.visualization.DataTable(), 9 chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div')); 10 data.addColumn('date', 'Year'); 11 data.addColumn('number', 'EUR-Lex documents'); 12 data.addColumn('string', 'description'); 13 <?php 14 function loadData($url) { 15 $data = json_decode(file_get_contents($url)); 16 $i = 0; 17 $out = " data.addRows([\n"; 18 $others = 0; 19 foreach($data as $item) { 20 if ($item->year < 1950 || $item->year > 2011) { 21 continue; 22 } 23 else { 24 $out .= " [new Date(".$item->year.",1,1), ".$item->number_of_documents.",null],\n"; 25 } 26 } 27 $out .= " [new Date(1973,1,1),null,'Enlargement: Denmark, Ireland and United Kingdom'], 28 [new Date(1981,1,1),null,'Enlargement: Greece'], 29 [new Date(1986,1,1),null,'Enlargement: Portugal and Spain'], 30 [new Date(1995,1,1),null,'Enlargement: Austria, Finland and Sweden'], 31 [new Date(2004,5,1),null,'Enlargement: 10 ECC countries'], 32 [new Date(2007,1,1),null,'Enlargement: Bulgaria and Romania'], 33 [new Date(2009,12,1),null,'Lisbon Treaty'], 34 [new Date(2003,2,1),null,'Treaty of Nice'], 35 [new Date(1999,5,1),null,'Amsterdam Treaty'], 36 [new Date(1993,11,1),null,'Maastricht Treaty'], 37 [new Date(1987,7,1),null,'Single European Act'], 38 [new Date(1967,7,1),null,'Merger Treaty'], 39 [new Date(1958,1,1),null,'Treaties of Rome'], 40 [new Date(2010,2,9),null,'Barrosso II Commission'], 41 [new Date(2004,11,22),null,'Barrosso I Commission'], 42 [new Date(1999,9,16),null,'Prodi Commission'], 43 [new Date(1995,1,23),null,'Santer Commission'], 44 [new Date(1985,1,null),null,'Delors Commission'], 45 [new Date(1981,1,12),null,'Thorn Commission'], 46 [new Date(1977,8,18),null,'Jenkins Commission']"; 47 $out .= "\n ]);"; 48 echo $out; 49 } 50 51 $url = 'http://api.epdb.eu/eurlex/year/?key=YOUR_API_KEY'; 52 loadData($url); 53 ?> 54 chart.draw(data, { 55 displayAnnotations: true, 56 dateFormat: 'yyyy', 57 allowRedraw: true 58 }); 59 } 60 </script> 61 <style type="text/css"> 62 body { background-color:#193F4F; text-align:center;font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, Verdana, sans-serif; font-size: 15px } 63 a {color:#fff; } 64 #chart_div { background-color:#fff;color:#333;} 65 #container { background-color:#fff;padding:10px; } 66 #content { width: 920px;margin-left:auto;margin-right:auto; } 67 </style> 68 </head> 69 <body> 70 <div id='content'> 71 <div id='container'> 72 <div id='chart_div' style='width: 900px; height: 400px;'></div> 73 </div> 74 </div> 75 <div style="color:#fff;margin-top:40px;"> 76 This example uses the <a href="http://code.google.com/apis/chart/">Google Chart Tools</a>.<br /> 77 Data is taken from the <a href="http://api.epdb.eu">API for European Union legislation</a> by <a href="http://www.buhlrasmussen.eu">Buhl & Rasmussen</a> 2011. 78 The original data source is <a href="http://eur-lex.europa.eu/">EUR-Lex</a>.<br /> 79 You can see the <a href="example03.php.html">PHP source-code</a> used to generate this example, and 80 you can find more <a href="/#examples">examples here</a>. 81 </div> 82 </body> 83 </html>