| 1 | | {{{ |
| 2 | | #!html |
| 3 | | <script type="text/javascript" src="https://www.google.com/jsapi"></script> |
| 4 | | <script type="text/javascript"> |
| 5 | | |
| 6 | | // Load the Visualization API and the piechart package. |
| 7 | | google.load('visualization', '1.0', {'packages':['corechart']}); |
| 8 | | |
| 9 | | // Set a callback to run when the Google Visualization API is loaded. |
| 10 | | google.setOnLoadCallback(drawChart); |
| 11 | | |
| 12 | | // Callback that creates and populates a data table, |
| 13 | | // instantiates the pie chart, passes in the data and |
| 14 | | // draws it. |
| 15 | | function drawChart() { |
| 16 | | |
| 17 | | // Create the data table. |
| 18 | | var newPapersData = new google.visualization.DataTable(); |
| 19 | | newPapersData.addColumn('string', 'Year'); |
| 20 | | newPapersData.addColumn('number', 'Number of New Papers'); |
| 21 | | newPapersData.addRows([ |
| 22 | | ['2005', 2], |
| 23 | | ['2006', 5], |
| 24 | | ['2007', 5], |
| 25 | | ['2008', 13], |
| 26 | | ['2009', 17], |
| 27 | | ['2010', 22], |
| 28 | | ['2011', 19] |
| 29 | | ]); |
| 30 | | |
| 31 | | // Create the data table. |
| 32 | | var citationsData = new google.visualization.DataTable(); |
| 33 | | citationsData.addColumn('string', 'Year'); |
| 34 | | citationsData.addColumn('number', 'Number Citations'); |
| 35 | | citationsData.addRows([ |
| 36 | | ['2006', 6], |
| 37 | | ['2007', 11], |
| 38 | | ['2008', 21], |
| 39 | | ['2009', 49], |
| 40 | | ['2010', 53], |
| 41 | | ['2011', 48] |
| 42 | | ]); |
| 43 | | |
| 44 | | // Set chart options |
| 45 | | var newPapersOptions = {'title':'New Papers by WARP Users', |
| 46 | | width:450, height:250, |
| 47 | | axisTitlesPosition:'none', |
| 48 | | legend:{'position':'none'}, |
| 49 | | colors:['blue']}; |
| 50 | | |
| 51 | | var citationsChartOptions = {'title':'WARP Citations', |
| 52 | | width:450, height:250, |
| 53 | | axisTitlesPosition:'none', |
| 54 | | legend:{'position':'none'}, |
| 55 | | colors:['green']}; |
| 56 | | |
| 57 | | // Instantiate and draw our chart, passing in some options. |
| 58 | | var newPapersChart = new google.visualization.ColumnChart(document.getElementById('div_newPapersChart')); |
| 59 | | var citationsChart = new google.visualization.ColumnChart(document.getElementById('div_citationsChart')); |
| 60 | | |
| 61 | | newPapersChart.draw(newPapersData, newPapersOptions); |
| 62 | | citationsChart.draw(citationsData, citationsChartOptions); |
| 63 | | } |
| 64 | | </script> |
| 65 | | }}} |
| 66 | | |
| 67 | | {{{ |
| 68 | | #!html |
| 69 | | <div id="div_newPapersChart"></div> |
| 70 | | <div id="div_citationsChart"></div> |
| 71 | | }}} |
| | 1 | [[Include(wiki:PapersandPresentations/Charts)]] |
