javascript - Google visualisation errors -
i have google vis datatable , dashboard (control filters, string control, datatable, charts). element bind.
so database json , send gviz api draw table, chart , control. when use contols filter data , if there no data string error google visualisation this:
one or more participants failed draw()×
table has no rows.×
and similar messages. in app ugly there way not showing it? if there no data not show error...
i try css option:
#google-visualization-errors-all-3 { display:none; } but not solution me.
is there other way, maybe in google visualusation api dashboard?
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 url point data file datatype: 'json', async: false }).responsetext; // create our data table out of json data loaded server. var data = new google.visualization.datatable(json); //dodajemo kolonu sa kontrolama // define category picker control 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 pie chart // define 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: { // example, use columns "naziv", "vrsta", "pocetak", , "zavrsetak" 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 on selected rows (var = 0; < 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 value objhold.push({id: idarr[j], naziv: nazivarr[j]}); } $("#parcele1").select2("data", objhold); } }); }); // create dashboard new google.visualization.dashboard(document.getelementbyid('dashboard')). // establish bindings, declaring both slider , category // picker drive both charts. bind([categorypicker, categorypicker1, categorypicker2, slider, stringfilter1], [table, timeline]). // draw entire dashboard. draw(data, {'allowhtml':true, 'cssclassnames': 'cssclassnames'}); } //table.draw(data, {'allowhtml':true, 'cssclassnames': cssclassnames}); } function dashboardready() { // dashboard ready accept interaction. configure buttons // programmatically affect dashboard when clicked. // change slider selected range when clicked. document.getelementbyid('rangebutton').onclick = function() { slider.setstate({'lowvalue': 2, 'highvalue': 5}); slider.draw(); }; // change pie chart rendering options when clicked. document.getelementbyid('optionsbutton').onclick = function() { piechart.setoption('is3d', true); piechart.draw(); }; } google.setonloadcallback(drawvisualization);// javascript document this code, important part .ajac function, how can here integrate if row>0 show charts ???
i had same problem using google charts api. around had check number of rows made through filters. if it's >= 1, draw chart. else whatever need to; don't draw chart, display error, etc.
Comments
Post a Comment