CODEWITHSUNDEEP
javascriptd3.jschartsmouseoverdimple.js
Shoaibkhanz
Shoaibkhanz

Reputation: 2082

Bar Chart outside bounds and mouseover event issue

  1. Here is my dimple.js code, the bar chart that it produces is outside the bounds and touching Y-axis.

  2. Mouseover event is not changing the color of the bars. Below is the image

    var myChart2 = new dimple.chart(svg,data);
    myChart2.setBounds(750,50,550,250);    
    var x = myChart2.addTimeAxis( "x", "date", "%m/%d/%Y", "%d-%b");
    x.floatingBarWidth = 21;
    var y2= myChart2.addMeasureAxis("y","callperorder");
    var y1= myChart2.addMeasureAxis("y","calls");


    var bars = myChart2.addSeries("or", dimple.plot.bar,[x,y2]);

    var lines= myChart2.addSeries("cl", dimple.plot.line,[x,y1]);


    lines.lineMarkers= true;       

    myChart2.addLegend(750, 20, 300, 20, "right");

    myChart2.assignColor("cl","rgb(99,39,29)");
    myChart2.assignColor("or","rgb(99,89,219)");


    myChart2.draw();

   \\MOUSEOVER EVENT       
    bars.addEventHandler("mouseover", function( {d3.select(this).style("fill","green")});

enter image description here

Upvotes: 0

Views: 339

Answers (1)

John Kiernander
John Kiernander

Reputation: 4904

You need to add the event handler before calling draw if you want to use the dimple method. Alternatively you could use the d3 method after draw.

bars.shapes.on("mouseover", function () {...});

NB. There's also a typo in your event declaration, it's missing the closing bracket after function (.

In order to avoid overlapping the edge of the chart you will need to manually set the x bounds:

x.overrideMin = d3.time.format("%m/%d/%Y").parse("12/31/2014");
x.overrideMax = d3.time.format("%m/%d/%Y").parse("01/11/2015");

Using whatever values you want of course;

Upvotes: 1

Related Questions