я пытаюсь отобразить общую стоимость диаграммы, где 'isStacked: true ' на<span></span> расположен в верхней части графика, когда я нажимаю на панель.

Моя ссылка для изучения возможностей google.visualization.events.addListener началасьВот.

Когда я нажимаю на панель, я получаю эту ошибку:

Uncaught TypeError: Cannot read property 'row' of undefined

или когда я меняюrow вcolumn

Uncaught TypeError: Cannot read property 'column' of undefined

Любые указатели действительно ценятся.

Вот'Шаблон моего Django:

   
  $(document).ready(function(){ 
  {% for staff_name, staff_id in params.items %}  
$.ajax({
      url: "{% url user_kpi %}",
      data: { user_stat: {{staff_name}} },
      success: function(responseData) { 
        if (typeof responseData=="object") {                      
          var data = new google.visualization.arrayToDataTable([
            ['Type', 'Processed Items', { role: 'style' }, 'Processed beyond Due Date', { role: 'style'}],
            ['PPP', responseData['PPP_ontime'], 'lightgreen', responseData['PPP_due'], 'red'],
            ['CP', responseData['CP_ontime'], 'gold', responseData['CP_due'], 'red'], 
            ['RSL', responseData['RSL_ontime'], 'lightblue', responseData['RSL_due'], 'red'],
            ['MOD', responseData['MOD_ontime'], 'yellow', responseData['MOD_due'], 'red' ], 
            ['STO', responseData['RECALL_ontime'], 'silver', responseData['RECALL_due'], 'red'],
            ['TP', responseData['TP_ontime'], 'orange', responseData['TP_due'], 'red'],
            ['DEMO', responseData['DEMO_ontime'], 'violet', responseData['DEMO_due'], 'red'],
            ['DUP', responseData['DUP_ontime'], 'brown', responseData['DUP_due'], 'red']]);
          google.setOnLoadCallback(drawVisualization(data, {{staff_name}}));
        }
      }
});
  {% endfor %} 

  });  
  var wrapper;
  function drawVisualization(xdata, id) { 
    // Create and draw the visualization.   
    var visual = 'visualization-'+id.toString();
    //chart = new google.visualization.BarChart(document.getElementById(visual));
    wrapper = new google.visualization.ChartWrapper({
        chartType: 'BarChart',
        dataTable: xdata,
        options: {
                  width:600, height:140,
                  vAxis: {title: null, maxValue: 3500},
                  hAxis: {title: null},

                  animation: {easing: 'in'},
                  axisTitlesPosition: "out",
                  chartArea:{left:0,top:0, right:0, width:"100%",height:"100%"},
                  focusTarget: "category",
                  fontSize: 12,
                  fontName: "Tahoma",
                  legend: {position: 'none'},
                  series: [{color: 'black', visibleInLegend: false}, {}, {},
                           {color: 'red', visibleInLegend: false}],
                  isStacked: true,
                  backgroundColor: '#eee',
                 },
        containerId: visual
    });
    google.visualization.events.addListener(wrapper, 'ready', function() {
      // grab a few details before redirecting
      google.visualization.events.addListener(wrapper.getChart(), 'select', function() {
        chartObject = wrapper.getChart();
        // checking value upon mousehover
        alert(xdata.getValue(chartObject.getSelection()[0].row, 0));
        //alert(xdata.getValue(chartObject.getSelection()[0].column, 0));
      });
    });

    wrapper.draw();
}   

Обновить: Как объяснить Асгаллант.

   
function init () {
{% for staff_name, staff_id in params.items %}
$.ajax({
    url: "{% url user_kpi %}",
    data: { user_stat: {{staff_name}} },
    success: function(responseData) { 
        if (typeof responseData=="object") {                      
            var data = new google.visualization.arrayToDataTable([
                ['Type', 'Processed Items', { role: 'style' }, 'Processed beyond Due Date', { role: 'style'}],
                ['PPP', responseData['PPP_ontime'], 'lightgreen', responseData['PPP_due'], 'red'],
                ['CP', responseData['CP_ontime'], 'gold', responseData['CP_due'], 'red'], 
                ['RSL', responseData['RSL_ontime'], 'lightblue', responseData['RSL_due'], 'red'],
                ['MOD', responseData['MOD_ontime'], 'yellow', responseData['MOD_due'], 'red' ], 
                ['STO', responseData['RECALL_ontime'], 'silver', responseData['RECALL_due'], 'red'],
                ['TP', responseData['TP_ontime'], 'orange', responseData['TP_due'], 'red'],
                ['DEMO', responseData['DEMO_ontime'], 'violet', responseData['DEMO_due'], 'red'],
                ['DUP', responseData['DUP_ontime'], 'brown', responseData['DUP_due'], 'red']
            ]);
            drawVisualization(data, {{staff_name}});
        }
    }
});
{% endfor %}
}
google.load('visualization', '1', {packages:['corechart'], callback: init});

function drawVisualization(xdata, id) { 
  // Create and draw the visualization.   
  var visual = 'visualization-'+id.toString(),
  //chart = new google.visualization.BarChart(document.getElementById(visual));
  wrapper = new google.visualization.ChartWrapper({
      chartType: 'BarChart',
      dataTable: xdata,
      options: {
                width:600, height:140,
                vAxis: {title: null, maxValue: 3500},
                hAxis: {title: null},

                animation: {easing: 'in'},
                axisTitlesPosition: "out",
                chartArea:{left:0,top:0, right:0, width:"100%",height:"100%"},
                focusTarget: "category",
                fontSize: 12,
                fontName: "Tahoma",
                legend: {position: 'none'},
                //orientation: "vertical"
                series: [{color: 'black', visibleInLegend: false}, {}, {},
                         {color: 'red', visibleInLegend: false}],
                isStacked: true,
                backgroundColor: '#eee',
               },
      containerId: visual
  });
  google.visualization.events.addListener(wrapper, 'ready', function() {
    var chart = wrapper.getChart();
    google.visualization.events.addListener(chart, 'select', function() {
        var selection = chart.getSelection();
        if (selection.length) {
            // the user selected a bar
            alert(xdata.getValue(selection[0].row, 0));
            //alert(selection.length);
        }
        else {
            alert('no selection');// the user deselected a bar
        }
    });
  });

  wrapper.draw();
}   

Ошибка: Uncaught Error: неверный индекс строки не определен. Должно быть в диапазоне [0-7].

Исправлено asgallant Поворачивая эту линиюalert(xdata.getValue(selection.row, 0)); вalert(xdata.getValue(selection[0].row, 0));