Grouped horizontal bar chart

plotly.js
1

Hi Guys,

I am trying to create a horizontal bar chart which has a parent with child labels in the y axis and color all of the bars belonging to a specific parent group with a single color. Here is a picture of what i would like to create. Any pointers or an example would be really helpful. Thank you.

prod_avg_ratings
prod_avg_ratings990×442 54.4 KB

2

maybe this can help you

4

No, this is not what I am looking for. I want to plot a graph which has nested data, where “Ac” is a root/parent and “ACU”, “TRU” are all it’s sub components with some values corresponding to it.

5

So here is what i did to achieve the chart I wanted. I plotted a horizontal bar chart for each category and then added a margin 0 to the top and bottom of each graph to make it look like a single graph. Here is a code snippet below (with jquery).

<div id="chart"></div>
<script>
var data  = {
  "(All)": {
    "Acuvue": {
      "1-Day Acuvue": {
        "ratings": 4.77,
        "n_records": 737
      },
      "Acuvue": {
        "ratings": 4,
        "n_records": 830
      },
      "Acuvue2": {
        "ratings": 4.64,
        "n_records": 819
      },
      "Advance": {
        "ratings": 4.12,
        "n_records": 365
      },
      "Define": {
        "ratings": 4.92,
        "n_records": 260
      },
      "Moist": {
        "ratings": 4.76,
        "n_records": 4409
      },
      "Oasys": {
        "ratings": 4.53,
        "n_records": 8772
      },
      "TruEye": {
        "ratings": 4.84,
        "n_records": 1665
      },
      "Vita": {
        "ratings": 2.72,
        "n_records": 296
      }
    },
    "Alcon": {
      "Air Optix": {
        "ratings": 4.64,
        "n_records": 467
      },
      "Air Optix Aqua": {
        "ratings": 4.84,
        "n_records": 1895
      },
      "Air Optix Colors": {
        "ratings": 4.54,
        "n_records": 207
      },
      "Air Optix Hydraglyde": {
        "ratings": 4.79,
        "n_records": 19
      },
      "Dailies AquaComfort": {
        "ratings": 4.88,
        "n_records": 1174
      },
      "Dailies Total 1": {
        "ratings": 4.81,
        "n_records": 397
      },
      "Focus Dailies": {
        "ratings": 4.91,
        "n_records": 2108
      },
      "Freshlook": {
        "ratings": 4.71,
        "n_records": 1149
      },
      "Freshlook One-Day": {
        "ratings": 4.92,
        "n_records": 49
      }
    },
    "B&L": {
      "BioTrue ONEday": {
        "ratings": 4.47,
        "n_records": 187
      },
      "Optima": {
        "ratings": 5,
        "n_records": 10
      },
      "PureVision": {
        "ratings": 4.72,
        "n_records": 289
      },
      "PureVision2": {
        "ratings": 4.79,
        "n_records": 352
      },
      "SofLens": {
        "ratings": 4.69,
        "n_records": 427
      },
      "SofLens Daily Disposable": {
        "ratings": 3.97,
        "n_records": 117
      },
      "ULTRA": {
        "ratings": 4.71,
        "n_records": 355
      }
    },
    "CooperVision": {
      "Avaira": {
        "ratings": 4.84,
        "n_records": 425
      },
      "Biofinity": {
        "ratings": 4.73,
        "n_records": 2024
      },
      "Biomedics": {
        "ratings": 4.75,
        "n_records": 112
      },
      "Biomedics One Day": {
        "ratings": 5,
        "n_records": 6
      },
      "Clariti": {
        "ratings": 4.49,
        "n_records": 91
      },
      "ClearSight 1-Day": {
        "ratings": 5,
        "n_records": 14
      },
      "Expressions": {
        "ratings": 3.86,
        "n_records": 7
      },
      "Frequency 55": {
        "ratings": 4.92,
        "n_records": 193
      },
      "Hydrasoft": {
        "ratings": 4.64,
        "n_records": 11
      },
      "MyDay": {
        "ratings": 5,
        "n_records": 9
      },
      "Proclear": {
        "ratings": 4.63,
        "n_records": 1648
      },
      "Vertex": {
        "ratings": 5,
        "n_records": 5
      }
    }
  }
};
let ChartLayout = {
  font: {
    family: "Poppins, sans-serif",
    color: "#34345f",
  },
  yaxis: {
    aautomargin: true,
  },
  margin: {
    l: 150,
    r: 0,
    b: 0,
    t: 0,
  },
};
let index = 0;
  for (let key in data) {
    $("#chart").append(`<div id="${key}"></div>`);
    let trace = {
      x: [],
      y: [],
      text: [],
      textposition: "auto",
      name: key,
      orientation: "h",
      marker: {
        color: "",
        width: 1,
      },
      type: "bar",
      showlegend: true,
      legend: {
        x: 1.0,
        y: 0.5,
      },
    };
    for (let subkey in data[key]) {
      trace.y.push(subkey);
      trace.x.push(data[key][subkey].ratings);
      let textStr = `N = ${data[key][subkey].n_records}, Rating = ${data[key][subkey].ratings}`;
      trace.text.push(textStr);
    }
    trace.width = Array(trace.y.length).fill(0.8);

    if (key == "Acuvue") {
      trace.marker.color = "#1282A2";
    } else if (key == "Alcon") {
      trace.marker.color = "#FFD275";
    } else if (key == "B&L") {
      trace.marker.color = "#73BA9B";
    } else if (key == "CooperVision") {
      trace.marker.color = "#B49FCC";
    }

    let chartdata = [trace];

    if (index == 0) {
      ChartLayout .title =
        "<b>AVERAGE REVIEW RATINGS BY MANUFACTURE & PRODUCT</b>";
      ChartLayout .margin.t = 50;
    } else {
      ChartLayout .title = "";
      ChartLayout .margin.t = 0;
    }
    ChartLayout .height =
      Object.keys(data[key]).length > 10 || index == 0 ? 300 : 250;
    Plotly.newPlot(key, chartdata, ChartLayout , configurations);
    index++;
  }
</script>