Google 시각화 오류

Question

나는 google vis datatable과 대시 보드 (제어 필터, 문자열 제어, 데이터 테이블, 차트)가 있습니다. 모든 요소는 바인딩입니다.

그래서 데이터베이스 JSON에서 gViz API로 보내 테이블, 차트 및 컨트롤을 그립니다.

하나 이상의 참가자가 ×

표가) (그릴 실패 나는 일부 데이터를 필터링 할 contols를 사용하는 경우 다음 해당 문자열에 대한 데이터가없는 경우이 같은 구글 시각화에서 오류가 행 없음 ×

및 이와 유사한 메시지. 그래서 내 애플 리케이션에서 이것은 너무 못생긴가 그래서 그것을 보여주는 방법은 무엇입니까?

#google-visualization-errors-all-3 { 
    display:none; 
} 

하지만 나에 대한 좋지 않은 솔루션 : 그래서 만약 데이터가 내가 CSS 옵션을 사용하려고 할 때 오류 ...

를 표시하지 할 수있다.

대시 보드의 경우 google visualusation API에 다른 방법이 있습니까?

UPDATE :

var slider; 
    var ajdi = ''; 
     function drawVisualization() { 

     var cssClassNames = { 
     'headerRow': 'zaglavlje', 
     'tableRow': 'red', 
     'oddTableRow': 'red1', 
     'selectedTableRow': 'orange-background large-font', 
     'hoverTableRow': 'prekoreda', 
     'headerCell': 'gold-border', 
     'tableCell': 'cell', 
     'rowNumberCell': 'underline-blue-font' 
    }; 


     var json = $.ajax({ 
        url: 'getzadaci.php', // make this url point to the data file 
        dataType: 'json', 
        async: false 
       }).responseText; 

       // Create our data table out of JSON data loaded from server. 
     var data = new google.visualization.DataTable(json); 
     //dodajemo kolonu sa kontrolama 






     // Define a category picker control for the Gender column 
     var categoryPicker = new google.visualization.ControlWrapper({ 
      'controlType': 'CategoryFilter', 
      'containerId': 'control1', 
      'options': { 
      'filterColumnLabel': 'Status', 
      'ui': { 
      'labelStacking': 'vertical', 
       'allowTyping': false, 
       'allowMultiple': true, 
          'caption': 'Status' 

      } 
      } 
     }); 

     var categoryPicker1 = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
      'containerId': 'control2', 
      'options': { 
      'filterColumnIndex': 8, 
      'ui': { 
      'labelStacking': 'horizontal', 
       'allowTyping': false, 
       'allowMultiple': true, 
       'caption': 'Parcela' 
      } 
      } 
     }); 
     var categoryPicker2 = new google.visualization.ControlWrapper({ 
     'controlType': 'CategoryFilter', 
      'containerId': 'control4', 
      'options': { 
      'filterColumnIndex': 2, 
      'ui': { 
      'labelStacking': 'horizontal', 
       'allowTyping': false, 
       'allowMultiple': true, 
       'caption': 'Vrsta zadatka' 
      } 
      } 
     }); 


     var stringFilter1 = new google.visualization.ControlWrapper({ 
      'controlType': 'StringFilter', 
      'containerId': 'control3', 
      'options': { 
         'matchType': 'any', 
      'filterColumnIndex': 1, 
      'ui': {'labelStacking': 'vertical'} 
      } 
     }); 

     var slider = new google.visualization.ControlWrapper({ 
      'controlType': 'DateRangeFilter', 
      'containerId': 'control5', 
      'options': { 
      'filterColumnLabel': 'Pocetak', 
     'ui': {'labelStacking': 'vertical'} 
      } 
     }); 

     // Define a Pie chart 



     // Define a table 
     var table = new google.visualization.ChartWrapper({ 
      'chartType': 'Table', 
      'containerId': 'chart2', 
      'cssClassNames': 'cssClassNames', 
      'view': { 'columns': [1,2,12,5,6,8,11] }, 
      'options': { 
     cssClassNames: cssClassNames, 
     allowHtml: true 
    } 
     }); 

     var timeline = new google.visualization.ChartWrapper({ 
    chartType: 'Timeline', 
    containerId: 'chart5', 
    options: { 
    height: '350', 
    timeline: { colorByRowLabel: true, 
       backgroundColor: '#ffd' }, 
    //timeline.barLabelStyle: {color: '#000', fontName: 'Arial', fontSize: '13px'}, 
    //backgroundColor: '#fff', 
    colors: ['#55c2a2', '#89d168', '#d3eb87','#8ec63e', '#FFF0BA','#FF542E', '#CFD6DE', '#ADC1D6', '#7297BA'] 
    //timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' }, 
       // barLabelStyle: { fontName: 'Garamond', fontSize: 14 } } 
    }, 
    view: { 
     // as an example, use columns "Naziv", "Vrsta", "Pocetak", and "Zavrsetak" for the timeline 
     columns: [8, 2, 5, 6] 
    }, 

}); 

      var formatter_short = new google.visualization.DateFormat({formatType: 'short'}); 
      formatter_short.format(data, 5); 
      formatter_short.format(data, 6); 


     new google.visualization.events.addListener(table, 'ready', function() { 
     google.visualization.events.addListener(table.getChart(), 'select', function() { 
      var selection = table.getChart().getSelection(); 
      // iterate over all selected rows 
      for (var i = 0; i < selection.length; i++) { 
       //$("#edit").removeClass("edit btn btn-success") 
       //$('#edit').addClass('edit btn btn-success'); 
       ajdi = table.getDataTable().getValue(selection[i].row,0); 
       $("#vrednostid").val(table.getDataTable().getValue(selection[i].row,0)); 
       $("#naziv1").val(table.getDataTable().getValue(selection[i].row,1)); 
       $("#vrsta_rada1").val(table.getDataTable().getValue(selection[i].row,2)); 
       $("#status1").val(table.getDataTable().getValue(selection[i].row,3)); 
       $("#opis1").val(table.getDataTable().getValue(selection[i].row,4)); 
       $("#usluzno1").val(table.getDataTable().getValue(selection[i].row,9)); 

       var p = new Date(table.getDataTable().getValue(selection[i].row,5)); 
       $("#dp31").datepicker("setDate", p); 

       var z = new Date(table.getDataTable().getValue(selection[i].row,6)); 
       $("#dp41").datepicker("setDate", z); 

       //$("#parcele1").val(table.getDataTable().getValue(selection[i].row,8)); 
       //$("#parcele1").select2("val", ["3","19"]); 
       var id = table.getDataTable().getValue(selection[i].row,10); 
       var naziv = table.getDataTable().getValue(selection[i].row,8); 


var idArr = (id.lastIndexOf(',') == (id.length - 1) ? id.substr(0, id.length - 1) : id).split(', '); 
var nazivArr = (naziv.lastIndexOf(',') == (naziv.length - 1) ? naziv.substr(0, naziv.length - 1) : naziv).split(', '); 
var objHold = []; 
for(var j=0,length=idArr.length;j<length;j++) 
{ 
    if(idArr[j] && nazivArr[j]) // make sure both arrays have a value 
    objHold.push({id: idArr[j], naziv: nazivArr[j]}); 
} 
$("#parcele1").select2("data", objHold); 

      } 
     }); 
    }); 




     // Create a dashboard 
     new google.visualization.Dashboard(document.getElementById('dashboard')). 
      // Establish bindings, declaring the both the slider and the category 
      // picker will drive both charts. 
    bind([categoryPicker, categoryPicker1, categoryPicker2, slider, stringFilter1], [table, timeline]). 
      // Draw the entire dashboard. 
      draw(data, {'allowHtml':true, 'cssClassNames': 'cssClassNames'});  } 
     //table.draw(data, {'allowHtml':true, 'cssClassNames': cssClassNames});  } 

function dashboardReady() { 
     // The dashboard is ready to accept interaction. Configure the buttons to 
     // programmatically affect the dashboard when clicked. 

     // Change the slider selected range when clicked. 
     document.getElementById('rangeButton').onclick = function() { 
      slider.setState({'lowValue': 2, 'highValue': 5}); 
      slider.draw(); 
     }; 

     // Change the pie chart rendering options when clicked. 
     document.getElementById('optionsButton').onclick = function() { 
      piechart.setOption('is3D', true); 
      piechart.draw(); 
     }; 
     } 



     google.setOnLoadCallback(drawVisualization);// JavaScript Document 

중요한 부분이 .ajac 기능은, 그래서 행> 0 차트를 표시 할 경우 어떻게 여기에 수를 통합, 그래서이 내 코드입니다 ???

Answer 1

Google Charts API를 사용하여 동일한 문제가 발생했습니다. 이를 해결하기 위해 필터를 통과 한 행 수를 확인해야했습니다. 1보다 크면 차트를 그립니다. 그렇지 않으면 무엇이든해야합니다. 차트를 그리거나 표시 오류를 표시하지 마십시오.

Answer 2

다른 사람들의 코드에서 GitHub 프로젝트 포크로 해결 된 솔루션을 보았습니다. 나는이를 작성하지 않았기 때문에 나는이 저장소에 연결할 수 있습니다 :

leonardean/angular-google-charts

다음은이 링크를 나누기 경우에 코드입니다 :

google.visualization.events.addListener(chartWrapper, 'error', function (err) { 
            google.visualization.errors.removeError(err.id); 
           }); 

는 것입니다 위의 링크를 클릭하면 내가 강조하고있는 라인을 보여줍니다. 기본적으로이 코드의 작성자는 오류 이벤트를 수신하는 Google 차트 api에 이벤트 수신기를 전달하고 오류 처리기에서 오류를 제거합니다. 정확하게 모범 사례는 아니지만, 여전히 콘솔에 로그인 할 것이라고 믿습니다. 그렇지 않으면 핸들러에서 직접 콘솔에 오류를 기록 할 수 있지만 못생긴 빨간색 상자를 제거합니다.

Answer 3

이 함수는 모든 Google 차트 오류 메시지를 제거합니다. DOM과 차트가로드 된 후 스크립트 태그에서 호출하십시오.

// Gets rid of all Google's error messages 
function removeGoogleErrors() { 
    var id_root = "google-visualization-errors-all-"; 
    var index = 1; 

    while (document.getElementById(id_root + index.toString()) != null) { 
     document.getElementById(id_root + index.toString()).style.display = 'none'; 
     index += 2; 
    } 
}