Google 시각화 -Click 이벤트를 barchart isStacked : true

Question

바를 클릭하면 차트 상단에있는 <span>에 'isStacked : true'가있는 곳에 barchart의 합계 값을 표시하려고합니다.

Uncaught TypeError: Cannot read property 'row' of undefined 

또는 내가 rowcolumn에 변경 때 나는이 오류를 받았습니다은 A 표시 줄을 클릭하면 google.visualization.events.addListener의 기능을 탐구하는

내 참조

here. 시작

Uncaught TypeError: Cannot read property 'column' of undefined 

모든 포인터는 정말 감사하겠습니다.

<script type="text/javascript"> 
    $(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(); 
} 

이

이 업데이트 :으로는 asgallant에 의해 설명

여기 내 장고 템플릿입니다.

<script type="text/javascript"> 
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(); 
} 

오류 : catch되지 않은 오류 : 정의되지 않은 잘못된 행 인덱스입니다. [0-7] 범위 내에 있어야합니다. asgallant에 의해 Corrrected

이

가 alert(xdata.getValue(selection[0].row, 0));에이 라인 alert(xdata.getValue(selection.row, 0)); 켜기

Answer 1

첫째, 당신은 AJAX 이것이 보장 (안 문서 준비 핸들러에서, 구글 로더에서 콜백 내에서해야한다 호출 것을 시각화 API

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}); 

그런 다음 drawVisualization 기능, 당신은 몇 가지 문제가 있습니다 : 당신이) API 구성 요소를 사용하려고 할 때 사용할 수 있습니다로 시작을 wrapper는 글로벌 O 형 bject, 그래서 당신이 drawVisualization 전화 할 때마다 덮어 씁니다; 이것은 하나의 차트에 대해 "선택"이벤트가 발생하지만 문제의 주된 원인입니다. 그러나 wrapper은 클릭 한 차트가 아니라 마지막으로 그려진 차트를 나타냅니다. 따라서 wrapper.getChart().getSelection() 호출은 빈 배열을 반환합니다. 빈 배열은 undefined이고 undefined에는 행 또는 열 속성이 없습니다. 래퍼를 전역이 아닌 drawVisualization 함수 대신 로컬로 만들어야합니다. 이 라인 삭제 :

var wrapper; 

을이 행의 시작 부분에 var을 추가 한 사용자로,

wrapper = new google.visualization.ChartWrapper({ 

이 그럼 당신은 선택의 배열의 길이를 테스트하는 이벤트 핸들러를 조정해야 할 수 막대를 두 번 클릭합니다. 막대를 선택했다가 선택 취소하면 배열이 비어지고 같은 오류가 발생합니다. 이벤트 처리기는 다음과 같아야합니다.

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)); 
     } 
     else { 
      // the user deselected a bar 
     } 
    }); 
});