Creating a Custom List Chart in C3.js or D3.js

Question

I'm trying to create a custom chart using either C3.js or D3.js but am not sure how to approach this. Below is an example of how the chart should output...

I've had a look at the examples provided by C3.js & D3.js and found that some of the charts had the names of the data input at the bottom of the chart, for example..

Is there someway I can override these to produce the desired chart or am I approaching this incorrectly? How would I create this Custom List Chart?

Answer 1

This kind of a list chart can be created with d3 fairly easily. You can use a simple data object to generate it. Below, I've created rects for the left and right separately and then added the labels. The color of the bars on the right is based on the status field in the data object.

Check out this fiddle: https://jsfiddle.net/qf9po0L5/

svg.selectAll("bar")
  .data(data)
  .enter().append("rect")
  .attr("x", 10)
  .attr("width", 200)
  .attr("y", function(d, i) {
    return i * 32
  })
  .attr("height", 30)
  .attr("fill", function(d, i) {
    return i % 2 ? "#83adef" : "lightblue";
  });

svg.selectAll("second-bar")
  .data(data)
  .enter().append("rect")
  .style("fill", function(d) {
    return d.status === 0 ? "red" : "green";
  })
  .attr("x", 212)
  .attr("width", 20)
  .attr("y", function(d, i) {
    return i * 32
  })
  .attr("height", 30);


var yTextPadding = 20;
svg.selectAll(".bartext")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "white")
  .attr("x", 55)
  .attr("y", function(d, i) {
    return (i * 32) + 22;
  })
  .text(function(d) {
    return d.name;
  })
  .attr("fill", "black");