search

PatrikHlobil / Pandas-Bokeh

Bokeh Plotting Backend for Pandas and GeoPandas
MIT License
878 stars 112 forks source link

stacked barplot: hovertool info does not appears, if only one kind of the stacked types is in the bar. #105

Open spfeifer222 opened 3 years ago

spfeifer222 commented 3 years ago

see html below. this seems to be a bug


<!DOCTYPE html>
<html lang="en">

  <head>

      <meta charset="utf-8">
      <title>Bokeh Plot</title>

        <script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.2.min.js" integrity="sha384-XypntL49z55iwGVUW4qsEu83zKL3XEcz0MjuGOQ9SlaaQ68X/g+k1FcioZi7oQAc" crossorigin="anonymous"></script>
        <script type="text/javascript">
            Bokeh.set_log_level("info");
        </script>

  </head>

  <body>

              <div class="bk-root" id="befc7f50-b9ed-40b4-b560-ef3b68025432" data-root-id="1229"></div>

        <script type="application/json" id="1383">
          {"0daee622-acf3-4f57-bc32-64764a855465":{"defs":[],"roots":{"references":[{"attributes":{"bottom_units":"screen","fill_alpha":0.5,"fill_color":"lightgrey","left_units":"screen","level":"overlay","line_alpha":1.0,"line_color":"black","line_dash":[4,4],"line_width":2,"right_units":"screen","syncable":false,"top_units":"screen"},"id":"1254","type":"BoxAnnotation"},{"attributes":{"code":"\n                                    var labels = {0: '3', 1: '4', 2: '5', 3: '6', 4: '7', 5: '8', 6: '9', 7: '10', 8: '11', 9: '12', 10: '13', 11: '14', 12: '15', 13: '16', 14: '17', 15: '18', 16: '19', 17: '20', 18: '21', 19: '22', 20: '23', 21: '24', 22: '25', 23: '26', 24: '27', 25: '28', 26: '29', 27: '30', 28: '31', 29: '32', 30: '33', 31: '34', 32: '35', 33: '36', 34: '37', 35: '38', 36: '39', 37: '40', 38: '41', 39: '42', 40: '43', 41: '44', 42: '45', 43: '46', 44: '47', 45: '48', 46: '49', 47: '50', 48: '51', 49: '52', 50: '53', 51: '54', 52: '55', 53: '56', 54: '57', 55: '58', 56: '59', 57: '60', 58: '61', 59: '62', 60: '63', 61: '64', 62: '65', 63: '66', 64: '67', 65: '68', 66: '69', 67: '70', 68: '71', 69: '72', 70: '73', 71: '74', 72: '75', 73: '76', 74: '77', 75: '78', 76: '79', 77: '80', 78: '81', 79: '82', 80: '83', 81: '84', 82: '85', 83: '86', 84: '87', 85: '88', 86: '89', 87: '90', 88: '91', 89: '92', 90: '93', 91: '94', 92: '95', 93: '96', 94: '97', 95: '98', 96: '101', 97: '105', 98: '107', 99: '110', 100: '111', 101: '112', 102: '113', 103: '115', 104: '117', 105: '119', 106: '120', 107: '125', 108: '128', 109: '129', 110: '130', 111: '135', 112: '136', 113: '137', 114: '138', 115: '141', 116: '144', 117: '147', 118: '148', 119: '149', 120: '150', 121: '151', 122: '153', 123: '155', 124: '157', 125: '159', 126: '160', 127: '165', 128: '166', 129: '167', 130: '168', 131: '169', 132: '173', 133: '180', 134: '184', 135: '185', 136: '193', 137: '198', 138: '202', 139: '208', 140: '220', 141: '221', 142: '231', 143: '232', 144: '235', 145: '238', 146: '243', 147: '248', 148: '251', 149: '252', 150: '271'};\n                                    return labels[tick];\n                                    "},"id":"1262","type":"FuncTickFormatter"},{"attributes":{"text":"Produktnamen 2019"},"id":"1230","type":"Title"},{"attributes":{},"id":"1232","type":"DataRange1d"},{"attributes":{"callback":null,"mode":"vline","renderers":[{"id":"1287"}],"tooltips":[["L\u00e4nge des Produktnamens","@__x__values_original"],["Handelsname","@{Handelsname}"],["anderer","@{anderer}"]]},"id":"1299","type":"HoverTool"},{"attributes":{},"id":"1234","type":"DataRange1d"},{"attributes":{},"id":"1236","type":"LinearScale"},{"attributes":{},"id":"1274","type":"BasicTickFormatter"},{"attributes":{"axis_label":"L\u00e4nge des Produktnamens","formatter":{"id":"1262"},"major_label_orientation":1.5707963267948966,"major_label_policy":{"id":"1277"},"ticker":{"id":"1301"}},"id":"1240","type":"LinearAxis"},{"attributes":{},"id":"1279","type":"Selection"},{"attributes":{"axis":{"id":"1240"},"ticker":null},"id":"1243","type":"Grid"},{"attributes":{},"id":"1238","type":"LinearScale"},{"attributes":{},"id":"1249","type":"WheelZoomTool"},{"attributes":{},"id":"1275","type":"AllLabels"},{"attributes":{"axis_label":"Anzahl","formatter":{"id":"1274"},"major_label_policy":{"id":"1275"},"ticker":{"id":"1245"}},"id":"1244","type":"LinearAxis"},{"attributes":{"bottom":{"expr":{"id":"1266"}},"fill_alpha":{"value":0.6},"fill_color":{"value":"deepskyblue"},"line_color":{"value":"deepskyblue"},"line_width":{"value":2},"top":{"expr":{"id":"1267"}},"width":{"value":0.8},"x":{"field":"__x__values"}},"id":"1285","type":"VBar"},{"attributes":{"axis":{"id":"1244"},"dimension":1,"ticker":null},"id":"1247","type":"Grid"},{"attributes":{},"id":"1245","type":"BasicTicker"},{"attributes":{"active_multi":null,"active_scroll":{"id":"1249"},"tools":[{"id":"1248"},{"id":"1249"},{"id":"1250"},{"id":"1251"},{"id":"1252"},{"id":"1253"},{"id":"1299"}]},"id":"1255","type":"Toolbar"},{"attributes":{"ticks":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150]},"id":"1301","type":"FixedTicker"},{"attributes":{"fields":["Handelsname"]},"id":"1266","type":"Stack"},{"attributes":{},"id":"1253","type":"HelpTool"},{"attributes":{},"id":"1248","type":"PanTool"},{"attributes":{"overlay":{"id":"1254"}},"id":"1250","type":"BoxZoomTool"},{"attributes":{"label":{"value":"anderer"},"renderers":[{"id":"1287"}]},"id":"1298","type":"LegendItem"},{"attributes":{},"id":"1251","type":"SaveTool"},{"attributes":{"data":{"Handelsname":{"__ndarray__":"AAAAAAAA8D8AAAAAAAAUQAAAAAAAABBAAAAAAAAAGEAAAAAAAAAxQAAAAAAAAD1AAAAAAACAUEAAAAAAAIBJQAAAAAAAwFFAAAAAAABgYkAAAAAAAABUQAAAAAAAwFlAAAAAAADgYEAAAAAAAEBgQAAAAAAAoGBAAAAAAABgY0AAAAAAAMBgQAAAAAAAwGNAAAAAAADgYUAAAAAAAABiQAAAAAAAQGRAAAAAAABgaEAAAAAAAIBlQAAAAAAAoGNAAAAAAAAgY0AAAAAAAIBlQAAAAAAAoGBAAAAAAADga0AAAAAAAIByQAAAAAAAoG9AAAAAAADAXkAAAAAAAEBkQAAAAAAAQFtAAAAAAAAAWkAAAAAAAIBbQAAAAAAAQF1AAAAAAAAAZ0AAAAAAAEBfQAAAAAAAwFBAAAAAAACATkAAAAAAAIBHQAAAAAAAgEdAAAAAAAAASUAAAAAAAABVQAAAAAAAgEJAAAAAAAAAREAAAAAAAABDQAAAAAAAAD1AAAAAAACARUAAAAAAAAA2QAAAAAAAADFAAAAAAAAAPkAAAAAAAAA6QAAAAAAAACZAAAAAAAAANUAAAAAAAAAgQAAAAAAAACpAAAAAAAAAHEAAAAAAAAA1QAAAAAAAADVAAAAAAAAAIEAAAAAAAAAuQAAAAAAAACRAAAAAAAAAIkAAAAAAAAAoQAAAAAAAAPA/AAAAAAAAR0AAAAAAAIBCQAAAAAAAACJAAAAAAAAAGEAAAAAAAAAmQAAAAAAAABhAAAAAAAAAHEAAAAAAAAAmQAAAAAAAACBAAAAAAAAACEAAAAAAAAAgQAAAAAAAACJAAAAAAAAACEAAAAAAAAAIQAAAAAAAAAhAAAAAAAAA8D8AAAAAAAAIQAAAAAAAABRAAAAAAAAACEAAAAAAAAAIQAAAAAAAAPA/AAAAAAAA8D8AAAAAAAAAQAAAAAAAAPA/AAAAAAAAAEAAAAAAAAD4fwAAAAAAAPA/AAAAAAAA8D8AAAAAAADwPwAAAAAAAPA/AAAAAAAAAEAAAAAAAADwPwAAAAAAAPh/AAAAAAAA8D8AAAAAAAAAQAAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPA/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA8D8AAAAAAADwPwAAAAAAAPA/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPA/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPA/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPA/AAAAAAAA8D8AAAAAAAD4fwAAAAAAAPh/AAAAAAAAAEAAAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAABAAAAAAAAA8D8AAAAAAADwPwAAAAAAAPA/AAAAAAAA8D8=","dtype":"float64","order":"little","shape":[151]},"__x__values":[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150],"__x__values_original":[3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,101,105,107,110,111,112,113,115,117,119,120,125,128,129,130,135,136,137,138,141,144,147,148,149,150,151,153,155,157,159,160,165,166,167,168,169,173,180,184,185,193,198,202,208,220,221,231,232,235,238,243,248,251,252,271],"anderer":{"__ndarray__":"AAAAAAAA+H8AAAAAAAAAQAAAAAAAAPh/AAAAAAAACEAAAAAAAAAiQAAAAAAAACJAAAAAAAAAKEAAAAAAAAAYQAAAAAAAABRAAAAAAACgYUAAAAAAAAAUQAAAAAAAAABAAAAAAAAAN0AAAAAAAAAgQAAAAAAAACpAAAAAAAAAAEAAAAAAAAAcQAAAAAAAACpAAAAAAAAAKkAAAAAAAAAqQAAAAAAAACRAAAAAAAAAGEAAAAAAAAAiQAAAAAAAAChAAAAAAAAAIEAAAAAAAAAAQAAAAAAAABhAAAAAAAAAIEAAAAAAAAAYQAAAAAAAACZAAAAAAAAAMEAAAAAAAAAYQAAAAAAAACBAAAAAAAAAFEAAAAAAAAAUQAAAAAAAABBAAAAAAAAAEEAAAAAAAAAiQAAAAAAAABBAAAAAAAAAAEAAAAAAAAAkQAAAAAAAABhAAAAAAAAAKkAAAAAAAAAiQAAAAAAAABxAAAAAAAAAIEAAAAAAAAAIQAAAAAAAACBAAAAAAAAAKkAAAAAAAAAcQAAAAAAAAAhAAAAAAAAAEEAAAAAAAADwPwAAAAAAAAhAAAAAAAAAAEAAAAAAAADwPwAAAAAAAABAAAAAAAAA8D8AAAAAAAAQQAAAAAAAABBAAAAAAAAAAEAAAAAAAAAYQAAAAAAAAABAAAAAAAAAAEAAAAAAAAAUQAAAAAAAAABAAAAAAAAACEAAAAAAAAAUQAAAAAAAABBAAAAAAAAAHEAAAAAAAAAYQAAAAAAAABRAAAAAAAAA8D8AAAAAAAAcQAAAAAAAAPA/AAAAAAAACEAAAAAAAAAAQAAAAAAAABBAAAAAAAAA8D8AAAAAAAAIQAAAAAAAABBAAAAAAAAACEAAAAAAAAAAQAAAAAAAABBAAAAAAAAACEAAAAAAAAAAQAAAAAAAAPh/AAAAAAAA8D8AAAAAAAD4fwAAAAAAAPA/AAAAAAAA8D8AAAAAAAAIQAAAAAAAAABAAAAAAAAA8D8AAAAAAAD4fwAAAAAAAPA/AAAAAAAAAEAAAAAAAADwPwAAAAAAAPA/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAAhAAAAAAAAACEAAAAAAAAAAQAAAAAAAABBAAAAAAAAA8D8AAAAAAADwPwAAAAAAAAhAAAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA8D8AAAAAAADwPwAAAAAAAPA/AAAAAAAA8D8AAAAAAADwPwAAAAAAAABAAAAAAAAA8D8AAAAAAAAAQAAAAAAAAABAAAAAAAAAFEAAAAAAAADwPwAAAAAAABRAAAAAAAAA8D8AAAAAAADwPwAAAAAAAPA/AAAAAAAAAEAAAAAAAADwPwAAAAAAAPA/AAAAAAAAAEAAAAAAAAAIQAAAAAAAAABAAAAAAAAA8D8AAAAAAADwPwAAAAAAAPA/AAAAAAAA8D8AAAAAAADwPwAAAAAAAPh/AAAAAAAA+H8AAAAAAADwPwAAAAAAAABAAAAAAAAA+H8AAAAAAADwPwAAAAAAAPA/AAAAAAAAAEAAAAAAAADwPwAAAAAAAPh/AAAAAAAA+H8AAAAAAAD4fwAAAAAAAPh/AAAAAAAA+H8=","dtype":"float64","order":"little","shape":[151]}},"selected":{"id":"1279"},"selection_policy":{"id":"1280"}},"id":"1228","type":"ColumnDataSource"},{"attributes":{},"id":"1252","type":"ResetTool"},{"attributes":{"fields":["Handelsname","anderer"]},"id":"1267","type":"Stack"},{"attributes":{"bottom":{"expr":{"id":"1266"}},"fill_alpha":{"value":0.1},"fill_color":{"value":"deepskyblue"},"line_alpha":{"value":0.1},"line_color":{"value":"deepskyblue"},"line_width":{"value":2},"top":{"expr":{"id":"1267"}},"width":{"value":0.8},"x":{"field":"__x__values"}},"id":"1286","type":"VBar"},{"attributes":{"fields":[]},"id":"1264","type":"Stack"},{"attributes":{"bottom":{"expr":{"id":"1264"}},"fill_alpha":{"value":0.6},"fill_color":{"value":"cornflowerblue"},"line_color":{"value":"cornflowerblue"},"line_width":{"value":2},"top":{"expr":{"id":"1265"}},"width":{"value":0.8},"x":{"field":"__x__values"}},"id":"1269","type":"VBar"},{"attributes":{},"id":"1277","type":"AllLabels"},{"attributes":{"data_source":{"id":"1228"},"glyph":{"id":"1285"},"hover_glyph":null,"muted_glyph":null,"name":"anderer","nonselection_glyph":{"id":"1286"},"view":{"id":"1288"}},"id":"1287","type":"GlyphRenderer"},{"attributes":{"fields":["Handelsname"]},"id":"1265","type":"Stack"},{"attributes":{"source":{"id":"1228"}},"id":"1288","type":"CDSView"},{"attributes":{},"id":"1280","type":"UnionRenderers"},{"attributes":{"label":{"value":"Handelsname"},"renderers":[{"id":"1271"}]},"id":"1283","type":"LegendItem"},{"attributes":{"bottom":{"expr":{"id":"1264"}},"fill_alpha":{"value":0.1},"fill_color":{"value":"cornflowerblue"},"line_alpha":{"value":0.1},"line_color":{"value":"cornflowerblue"},"line_width":{"value":2},"top":{"expr":{"id":"1265"}},"width":{"value":0.8},"x":{"field":"__x__values"}},"id":"1270","type":"VBar"},{"attributes":{"data_source":{"id":"1228"},"glyph":{"id":"1269"},"hover_glyph":null,"muted_glyph":null,"name":"Handelsname","nonselection_glyph":{"id":"1270"},"view":{"id":"1272"}},"id":"1271","type":"GlyphRenderer"},{"attributes":{"source":{"id":"1228"}},"id":"1272","type":"CDSView"},{"attributes":{"below":[{"id":"1240"}],"center":[{"id":"1243"},{"id":"1247"},{"id":"1282"}],"height":800,"left":[{"id":"1244"}],"output_backend":"webgl","renderers":[{"id":"1271"},{"id":"1287"}],"sizing_mode":"fixed","title":{"id":"1230"},"toolbar":{"id":"1255"},"width":1500,"x_range":{"id":"1232"},"x_scale":{"id":"1236"},"y_range":{"id":"1234"},"y_scale":{"id":"1238"}},"id":"1229","subtype":"Figure","type":"Plot"},{"attributes":{"items":[{"id":"1283"},{"id":"1298"}]},"id":"1282","type":"Legend"}],"root_ids":["1229"]},"title":"Bokeh Application","version":"2.3.2"}}
        </script>
        <script type="text/javascript">
          (function() {
            var fn = function() {
              Bokeh.safely(function() {
                (function(root) {
                  function embed_document(root) {

                  var docs_json = document.getElementById('1383').textContent;
                  var render_items = [{"docid":"0daee622-acf3-4f57-bc32-64764a855465","root_ids":["1229"],"roots":{"1229":"befc7f50-b9ed-40b4-b560-ef3b68025432"}}];
                  root.Bokeh.embed.embed_items(docs_json, render_items);

                  }
                  if (root.Bokeh !== undefined) {
                    embed_document(root);
                  } else {
                    var attempts = 0;
                    var timer = setInterval(function(root) {
                      if (root.Bokeh !== undefined) {
                        clearInterval(timer);
                        embed_document(root);
                      } else {
                        attempts++;
                        if (attempts > 100) {
                          clearInterval(timer);
                          console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
                        }
                      }
                    }, 10, root)
                  }
                })(window);
              });
            };
            if (document.readyState != "loading") fn();
            else document.addEventListener("DOMContentLoaded", fn);
          })();
        </script>

  </body>

</html>
PatrikHlobil commented 3 years ago

Hi @spfeifer222,

I can reproduce the error. Could you provide me a minimal code example for debugging please?

Thanks for reporting the bug

Best Patrik

spfeifer222 commented 3 years ago

Dear @PatrikHlobil ,

today I took time to have a closer look at the problem.

My observations:

  1. The datatype of the columns is float64, where any of the integer datatypes should be used. But however, this should not lead to fail printing the data correctly. I guess this is not problem, but I added this for your information.
  2. There are NaN values in the data, which seems to be completely ignored instead of concidering as 0 (zero). I don't now if this would be the same in the original bokeh module. Could you tell me, if this is the case? The problem seems to be worse, if the first column contains a NaN value. In this case the hole row is completely ignored.

The NaN and float64-type values have been created by pd.concat whIle concatening dataframes (with integer values only).

From these observations I constructed the following minimal example:

import numpy as np
import pandas as pd
import pandas_bokeh

df_test = pd.DataFrame([[np.nan, 1.0], [2.0, np.nan], [2.0, 1.0]], 
                                         columns=['Handelsname', 'anderer'])
df_test.plot_bokeh.bar(ylabel='Anzahl', 
                                     xlabel='Länge', 
                                     vertical_xlabel=True, 
                                     stacked=True, 
                                     title='Produktnamen',  
                                     fill_alpha=0.7)

Of course this problem could be solved by proper datatype handling, but vor convenience it would be great, if pandas_bokeh would be robust in such cases.

The folloing code does the job. Maybe you could include it as pre-processing in `plot_bokeh.bar()' function. 

df_corr = df_test.fillna(0).astype('int64')
df_corr.plot_bokeh.bar(ylabel='Anzahl',  
                                     xlabel='Länge', 
                                     vertical_xlabel=True, 
                                     stacked=True, 
                                     title='Produktnamen',  
                                     fill_alpha=0.7)