dimple/examples/advanced_lollipop_with_hover.html

<!----------------------------------------------------------------->
<!-- AUTOMATICALLY GENERATED CODE - PLEASE EDIT TEMPLATE INSTEAD -->
<!----------------------------------------------------------------->
<div id="chartContainer">
  <script src="/lib/d3.v3.min.js"></script>
  <script src="/dist/dimple.v1.2.0.js"></script>
  <script type="text/javascript">
    
    var svg = dimple.newSvg("#chartContainer", 590, 400);
    d3.tsv("/data/example_data.tsv", function (data) {
      
      // Focus on the top 6 brands
      data = dimple.filterData(data, "Brand", ["Theta", "Omicron", "Kappa", "Beta", "Lambda", "Alpha"]);

      // The main chart
      var myChart = new dimple.chart(svg, data);
      // The chart to show in a tooltip
      var tipChart = null;
      // The other popup shapes
      var popup = null;
      
      // Position the main chart
      myChart.setBounds(60, 40, 500, 320);
      
      // Add the main chart axes
      myChart.addCategoryAxis("x", "Brand");
      myChart.addMeasureAxis("y", "Unit Sales");
      myChart.addMeasureAxis("z", "Sales Value");
      
      // Draw bubbles by SKU colored by brand
      var s = myChart.addSeries(["SKU", "Brand"], dimple.plot.bubble);
      
      // Handle the hover event - overriding the default behaviour
      s.addEventHandler("mouseover", onHover);
      // Handle the leave event - overriding the default behaviour
      s.addEventHandler("mouseleave", onLeave);
      
      // Draw the main chart
      myChart.draw();
      
      // Event to handle mouse enter
      function onHover(e) {
        
        // Get the properties of the selected shape
        var cx = parseFloat(e.selectedShape.attr("cx")),
            cy = parseFloat(e.selectedShape.attr("cy")),
            r = parseFloat(e.selectedShape.attr("r")),
            fill = e.selectedShape.attr("fill"),
            stroke = e.selectedShape.attr("stroke");
            
        // Set the size and position of the popup
        var width = 150,
            height = 100,
            x = (cx + r + width + 10 < svg.attr("width") ?
                  cx + r + 10 :
                  cx - r - width - 20);
            y = (cy - height / 2 < 0 ?
                  15 :
                  cy - height / 2);
                
        // Fade the popup fill mixing the shape fill with 80% white
        var popupFillColor = d3.rgb(
                    d3.rgb(fill).r + 0.8 * (255 - d3.rgb(fill).r),
                    d3.rgb(fill).g + 0.8 * (255 - d3.rgb(fill).g),
                    d3.rgb(fill).b + 0.8 * (255 - d3.rgb(fill).b)
                );
        
        // Create a group for the popup objects
        popup = svg.append("g");
        
        // Add a rectangle surrounding the chart
        popup
          .append("rect")
          .attr("x", x + 5)
          .attr("y", y - 5)
          .attr("width", width)
          .attr("height", height)
          .attr("rx", 5)
          .attr("ry", 5)
          .style("fill", popupFillColor)
          .style("stroke", stroke)
          .style("stroke-width", 2);
        
        // Add the series value text
        popup
          .append("text")
          .attr("x", x + 10)
          .attr("y", y + 10)
          .text(e.seriesValue[0])
          .style("font-family", "sans-serif")
          .style("font-size", 10)
          .style("fill", stroke);
        
        // Filter the data for the selected brand and sku
        var hoverData = dimple.filterData(data, "Brand", e.xValue);
        hoverData = dimple.filterData(hoverData, "SKU", e.seriesValue);
        
        // Create a new mini chart of Unit Sales over Months
        tipChart = new dimple.chart(svg,  hoverData);
        tipChart.setBounds(x + 10, y + 30, width - 10, height - 40);
        tipChart.addCategoryAxis("x", "Date").hidden = true;
        tipChart.addMeasureAxis("y", "Unit Sales").hidden = true;
        
        // Add a bar series, this can be changed to a line, area or bubble
        // by changing the plot parameter accordingly.
        var popUpSeries = tipChart.addSeries("SelectedSeries", dimple.plot.bar);
        
        // Set the gap to 80% - just a style preference
        popUpSeries.barGap = 0.8;
        
        // Set the color to the stroke color of the selected node
        tipChart.assignColor("SelectedSeries", stroke, stroke);
        
        // Draw the mini chart
        tipChart.draw();
        
      };
      
      // Event to handle mouse exit
      function onLeave(e) {
        // Remove the chart
        if (tipChart !== null) {
          tipChart._group.remove();
        }
        // Remove the popup
        if (popup !== null) {
          popup.remove();
        }
      };
    
    });
  </script>
</div>