Changes between Version 9 and Version 10 of PapersandPresentations/Charts


Ignore:
Timestamp:
Feb 22, 2012, 2:22:51 PM (12 years ago)
Author:
murphpo
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • PapersandPresentations/Charts

    v9 v10  
    11{{{
    22#!html
    3 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    4     <script type="text/javascript">
     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(drawCharts);
     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 drawCharts() {
     16       
     17                var query = new google.visualization.Query(
     18                'https://docs.google.com/spreadsheet/tq?range=A1%3AC20&key=0AheWVEgfgX69dF9hbWNQT3RGUGJkYjhMRGdvSEFqVHc&gid=0&headers=1');
     19               
     20                // Send the query with a callback function.
     21                query.send(handleQueryResponse);
     22        }
     23       
     24        function handleQueryResponse(response) {
     25                if (response.isError()) {
     26                        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
     27                        return;
     28                }
     29       
     30                var rawData = response.getDataTable();
     31                var newPapersData = rawData.clone();
     32                var citationsData = rawData.clone();
     33               
     34                newPapersData.removeColumn(2);
     35                citationsData.removeColumn(1);
     36       
     37                // Set chart options
     38                var newPapersOptions = {'title':'New Papers by WARP Users',
     39                width:300, height:200,
     40                axisTitlesPosition:'none',
     41                legend:{'position':'none'},
     42                colors:['blue'],
     43                chartArea:{left:'25',top:'25',width:'100%',height:'75%'}};
     44               
     45                var citationsChartOptions = {'title':'WARP Citations',
     46                width:300, height:200,
     47                axisTitlesPosition:'none',
     48                legend:{'position':'none'},
     49                colors:['green'],
     50                chartArea:{left:'25',top:'25',width:'100%',height:'75%'}};
     51       
     52                // Instantiate and draw our chart, passing in some options.
     53                var newPapersChart = new google.visualization.ColumnChart(document.getElementById('div_newPapersChart'));
     54                var citationsChart = new google.visualization.ColumnChart(document.getElementById('div_citationsChart'));
     55               
     56                newPapersChart.draw(newPapersData, newPapersOptions);
     57                citationsChart.draw(citationsData, citationsChartOptions);
     58        }
     59        </script>
     60       
    561
    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           ['2005', 2],
    37           ['2006', 6],
    38           ['2007', 11],
    39           ['2008', 21],
    40           ['2009', 49],
    41           ['2010', 53],
    42           ['2011', 48]
    43         ]);
    44 
    45         // Set chart options
    46         var newPapersOptions = {'title':'New Papers by WARP Users',
    47                         width:300, height:200,
    48                         axisTitlesPosition:'none',
    49                         legend:{'position':'none'},
    50                         colors:['green'],
    51                         chartArea:{left:'25',top:'25',width:'100%',height:'75%'}};
    52 
    53         var citationsChartOptions = {'title':'WARP Citations',
    54                         width:300, height:200,
    55                         axisTitlesPosition:'none',
    56                         legend:{'position':'none'},
    57                         colors:['blue'],
    58                         chartArea:{left:'25',top:'25',width:'100%',height:'75%'}};
    59 
    60         // Instantiate and draw our chart, passing in some options.
    61         var newPapersChart = new google.visualization.ColumnChart(document.getElementById('div_newPapersChart'));
    62         var citationsChart = new google.visualization.ColumnChart(document.getElementById('div_citationsChart'));
    63 
    64         newPapersChart.draw(newPapersData, newPapersOptions);
    65         citationsChart.draw(citationsData, citationsChartOptions);
    66       }
    67     </script>
    6862}}}
    6963