how to display the tooltip #59

jadhavpamu2020 · 2014-04-05T10:32:10Z

i am using django framework for displaying graph

    {% extends "base.html" %}
    {% load staticfiles %}
       {% block content %}
     <head>
    <link href="{% static 'css/dc.css' %}"  rel="stylesheet" media="screen">
    </head>
    <body>
           <div class="container" style="margin-top: 140px">

           <div class="col-lg-4" id="test">

           </div>

            <div class="col-lg-4" id="test1">

            </div>

    <script type="text/javascript" src="{% static 'js/d3.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/crossfilter.js' %}"></script>
    <script type="text/javascript"  src="{% static 'js/dc.js' %}"></script>
    <script type="text/javascript"  src="{% static 'js/bootstrap.min.js' %}"></script>

    <script type="text/javascript">

     var chart = dc.pieChart("#test");
     var spenderRowChart = dc.rowChart("#test1");

     d3.csv("{% static 'sampledata/pramod.csv' %}", function(error, experiments) {

      experiments.forEach(function(x) {
       x.Name = x.Name;
        x.Party = x.Party;
        x.Gender = x.Gender;



      });

      var ndx  = crossfilter(experiments),

      GenderDimension = ndx.dimension(function(d) {return d.Gender;});
      spendPerName = GenderDimension.group();
      PartyDimension = ndx.dimension(function(d) {return d.Party;});
      PartyPerName= PartyDimension.group().reduceCount();


      // tooltips for row chart
      var tip = d3.tip()
          .attr('class', 'd3-tip')
          .offset([-10, 0])
          .html(function (d) { return "<span style='color: #f0027f'>" +  d.key + "</span> : "  + numberFormat(d.value); });
      chart
        .width(200)
        .height(200)
        .dimension(GenderDimension)
        .group(spendPerName)
        .innerRadius(50);

      spenderRowChart
        .width(350).height(900)
        .dimension(PartyDimension)
        .group(PartyPerName)
        .label(function (d) { return d.key })
        .title(function (d) { return d.value })
        .ordering(function(d) { return -d.value })
        .elasticX(true);

      chart.render();
      spenderRowChart.render();

      d3.selectAll("#test1").call(tip);
            d3.selectAll("#test1").on('mouseover', tip.show)
                .on('mouseout', tip.hide);


    });

    </script>
            </body>
    {% endblock %}

The text was updated successfully, but these errors were encountered:

caged · 2014-06-06T21:21:37Z

A little late, but see the examples: https://github.com/Caged/d3-tip/tree/master/examples. Looks like you might be missing chart.call(tip) assuming chart is the d3 SVG element.

caged closed this as completed Jun 6, 2014

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

how to display the tooltip #59

how to display the tooltip #59

jadhavpamu2020 commented Apr 5, 2014

caged commented Jun 6, 2014

how to display the tooltip #59

how to display the tooltip #59

Comments

jadhavpamu2020 commented Apr 5, 2014

caged commented Jun 6, 2014