user3891065 user3891065 - 3 months ago 38
Javascript Question

Is it possible, to highlight bars in Dimple.js bar chart, based on y-axis value?

I'm just wondering is it possible at all in Dimple.js, to highlight bars based on the y axis value ? I have a bar chart with 3 series - X as a CategoryAxis (RefNum), Y as a MeasureAxis (in K's) and Y2 as a PctAxis (in %). On top of the Bars we draw a line, calculated using javascript (e.g. Pareto chart). So the idea is to change the color of those bars, which are over 80% (of Y2), or maybe grey those out, well some how highlight them. Was digging the Dimple.js API documentation, but nothing there ... Also, I've tried to create a simple IF ELSE statement on


myChart.defaultColors= [
new dimple.color("blue"), ];


but without any luck ... Is it possible at all, as I can't find any documentation or tutorials... Ideally, we would like to have something like this:
enter image description here
Not very familiar with the d3, maybe some solutions available through it ? We using dimple.js 2.1.6 and d3.v3
Any help appreciated, thanks.

Answer

I would add this in with straight d3. Something like:

myChart.svg.selectAll(".dimple-bar").filter(function(d) {
  return d.y > 60
}).style("fill", "red");

Where myChart is your dimple chart and d.y > 60 is your criteria (y is the data variable holding your y2 values).


Working example:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
</head>

<body>

  <div id="chartContainer"></div>

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [{
      x: 'one',
      y: 10
    }, {
      x: 'two',
      y: 80
    }, {
      x: 'three',
      y: 70
    }, {
      x: 'four',
      y: 30
    }, {
      x: 'five',
      y: 20
    }, {
      x: 'six',
      y: 6
    }];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addCategoryAxis("x", "x");
    myChart.addMeasureAxis("y", "y");
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();


    myChart.svg.selectAll(".dimple-bar").filter(function(d) {
      return d.y > 60
    }).style("fill", "red");
    
  </script>
</body>

</html>


EDITS

I suspect the problem might be that you don't actually have any data bound to that 2nd axis. So, if you want the bar value with respect to the axis you can do:

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script src="http://dimplejs.org/dist/dimple.v2.2.0.min.js"></script>
</head>

<body>

  <div id="chartContainer"></div>

  <script type="text/javascript">
    var svg = dimple.newSvg("#chartContainer", 590, 400);

    var data = [{
      x: 'one',
      y: 10,
      anotherY: 1
    }, {
      x: 'two',
      y: 80,
      anotherY: 2
    }, {
      x: 'three',
      y: 70,
      anotherY: 3
    }, {
      x: 'four',
      y: 30,
      anotherY: 4
    }, {
      x: 'five',
      y: 20,
      anotherY: 5
    }, {
      x: 'six',
      y: 6,
      anotherY: 6
    }];

    var myChart = new dimple.chart(svg, data);
    myChart.setBounds(60, 30, 510, 305)
    var x = myChart.addCategoryAxis("x", "x");
    var y = myChart.addMeasureAxis("y", "y");
    var anotherY = myChart.addMeasureAxis("y", "anotherY");
    myChart.addSeries(null, dimple.plot.bar);
    myChart.draw();

    console.log(myChart);

    myChart.svg.selectAll(".dimple-bar").filter(function(d) {
      var val_of_bar_on_other_scale = anotherY._scale.invert(y._scale(d.y));
      return val_of_bar_on_other_scale > 2
    }).style("fill", "red");
    
  </script>
  
</body>

</html>

Comments