<script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.load('visualization', '1.0', {packages: ['charteditor']});
   </script>
   <script type="text/javascript">
     google.setOnLoadCallback(initialize);
     var chartEditor = null;
     ///////////////////////////////////////////////////////////////////////////////////////////
     // Customize this according to your needs
     var row = [['2010','year:2010'],
                        ['2011','year:2011'],
                      ['2012','year:2012'],
                      ['2013','year:2013'],
                      ['2014','year:2014'],
                      ['2015','year:2015'],
                      ['2016','year:2016']]
     var column = [['Article','typ:PUB:(DE-HGF)16'],
                           ['Preprint','typ:PUB:(DE-HGF)25']]
     var p = '%(row)s and %(column)s'
     //
     // This will create first a table with the years in the head row
     // Next row will be the label "Article" and then the numbers of results using the search
     // 'p' where in 'p' %(row)s and %(column)s is replaced by the content of row and column
     // e.g. column "Article" , row "2010" yields to p = 'typ:PUB:(DE-HGF)16 and year:2010'
     ///////////////////////////////////////////////////////////////////////////////////////////
                  
     var options = {
             width: 600,
               height: 400,
               legend: { position: 'top', maxLines: 3 },
               bar: { groupWidth: '75%' },
isStacked: true,
               title: 'Publications',
               hAxis: {
                 title: 'Year',
               },
               vAxis: {
                 title: 'Number'
               }
             };
       var dataSourceUrl = '//bib-pubdb1.desy.de/PubExporter.py'+ '?'
                           + 'column=' + encodeURIComponent(JSON.stringify(column))
                               + '&row=' + encodeURIComponent(JSON.stringify(row))
                         + '&p=' + encodeURIComponent(JSON.stringify(p));
       var data = "";
    

     function loadEditor() {
       // Draw inital Diagramm
       // Create the chart to edit.
       var wrapper = new google.visualization.ChartWrapper({
          'chartType':'ColumnChart',
          'dataTable': data,
          'options': options,
       });

       chartEditor = new google.visualization.ChartEditor();
       google.visualization.events.addListener(chartEditor, 'ok', redrawChart);
       chartEditor.openDialog(wrapper, {});
     }

     // On "OK" save the chart to a <div> on the page.
     function redrawChart(){
       chartEditor.getChartWrapper().draw(document.getElementById('vis_div'));
     }
    
     function initialize() {
         var opts = {sendMethod: 'auto'};
         // Replace the data source URL on next line with your data source URL.
         var query = new google.visualization.Query(dataSourceUrl, opts);
      
         // Optional request to return only column C and the sum of column B, grouped by C members.
         // query.setQuery('select C, sum(B) group by C');
      
         // Send the query with a callback function.
         query.send(handleQueryResponse);
}

    
     function handleQueryResponse(response) {

         if (response.isError()) {
           alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
           return;
         }

         data = response.getDataTable();
         var chart = new google.visualization.ColumnChart(document.getElementById('vis_div'));
         chart.draw(data, options);
           // To allow users to change the chart uncomment the next line
         //loadEditor();
     }

   </script>
<div id="vis_div" style="height: 400px; width: 600px;"></div>