Tooltips on Column Chart bars

akshayakrsh commented 10 years ago

Hey,

Tried using this for getting tooltips on the column bars but didnt work. How should I proceed?

d4.charts.column() ,mixout('yAxis') .using('bars', function(bar) { // Note: d4 proxies the "on" function to d3, so it will work just like // it does in d3 bar.on('mouseover', function(d) { var title = 'X: ' + d.x + '
' + 'Y: ' + d.y; $(this).tooltip({ container: 'body', placement: 'auto', html: true, title: title }); });

I already have the bootstrap lib included.

heavysixer commented 10 years ago

Hey @akshayakrsh, due to the dynamic nature of d3/d4 the tooltip elements need to be instantiated in a particular way. Check the bottom of this example: http://visible.io/charts/scatter/tooltips.html

Specifically:

  // Note: Bootstrap's tooltips are opt-in meaning you need to first initialize
  // the plugin before you can start to use it. For this reason, we must first
  // initialize the tooltip looking for our svg circles with the dot class.
  // Otherwise it would take two mouseovers before the tooltip showed up.
  $('div').tooltip({
    selector: '.dot'
  });

If this doesn't work then please post a jsfiddle example online and I'll try and help you debug.

akshayakrsh commented 10 years ago

The solution you gave up was not exactly the requirement. Consider the following code, which works perfectly:

<html>
  <head>
    <title>Hello D4</title>
    <link rel="stylesheet" href="d4.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  </head>
  <body>
    <div id="chartHolder"></div>
    <script src="jquery.min.js"></script>
    <script src="d3.min.js"></script>
    <script src="d4.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      var yLabel = 'Years'
      var dataObj = [
        { x : '2010', y : 5 },
        { x : '2011', y : 15 },
        { x : '2012', y : 20 }
      ];
      var chart = d4.charts.column()
        .mixout('yAxis')
        .margin({top: 20, bottom:20, left: 0, right: 0})
        .using('bars', function(bar) {
          // Note: d4 proxies the "on" function to d3, so it will work just like
          // it does in d3
          bar.on('mouseover', function(d) {
            var title = d.x + '<br />' + yLabel + ': ' + d.y;
            $(this).tooltip({
              container: 'body',
              placement: 'auto',
              html: true,
              title: title
            });

          });
        });

      d3.select('#chartHolder')
        .datum(dataObj)
        .call(chart);
    </script>
  </body>
</html>

The problem was, I was using bootstrap 2.3.2 which required the placement attribute of the tooltip to be set to left/top, etc. instead of auto (it lead the placement of the tooltip holder to be at top-left corner).

Thanks for you help anyways.

heavysixer / d4

Tooltips on Column Chart bars #6