How to combine Box plot graph with line graph in nvd3

Question

Hi,

I have got a requirement to combine Boxplot chart with the line charts. I am using nvd3 library. I want to add two line charts in the same graph, one line will tell the avg and other will tell the current status. Can anyone please help me to achieve this functionality?

Thanks in advance!

configureChart = () => {
  this.user_story_options = {
    chart: {
      type: 'boxPlotChart',
      height: 450,
      margin: {
        top: 20,
        right: 20,
        bottom: 60,
        left: 40
      },
      color: ['darkblue', 'darkorange', 'green', 'darkred', 'darkviolet'],
      x: function(d) {
        return d.label;
      },
      // y: function(d){return d.values.Q3;},
      maxBoxWidth: 75,
      yDomain: [0, 500]
    }
  };
}

getData = () => {
  this.user_story_data = [{
      label: 1,
      values: {
        Q1: 180,
        Q2: 200,
        Q3: 250,
        whisker_low: 115,
        whisker_high: 400,
        outliers: [50, 100, 425]
      }
    },
    {
      label: 2,
      values: {
        Q1: 300,
        Q2: 350,
        Q3: 400,
        whisker_low: 225,
        whisker_high: 425,
        outliers: [175, 450, 480]
      }
    },
    {
      label: 3,
      values: {
        Q1: 100,
        Q2: 200,
        Q3: 300,
        whisker_low: 25,
        whisker_high: 400,
        outliers: [450, 475]
      }
    },
    {
      label: 4,
      values: {
        Q1: 75,
        Q2: 100,
        Q3: 125,
        whisker_low: 50,
        whisker_high: 300,
        outliers: [450]
      }
    },
    {
      label: 5,
      values: {
        Q1: 325,
        Q2: 400,
        Q3: 425,
        whisker_low: 225,
        whisker_high: 475,
        outliers: [50, 100, 200]
      }
    }
  ];
}

<div class="container-fluid">
  <nvd3 #userStoryNvd3 [options]="user_story_options" [data]="user_story_data"></nvd3>
</div>

Please update your question with what you have done so far, what problems you are facing currently. The more information you provide the higher chances of you getting some help. — shabeer90, Apr 12 '18 at 13:35
I am trying to add line charts using d3 on top of existing one. — Dhiraj Narayan Singh, Apr 15 '18 at 19:19

score -1 · Answer 1 · answered Apr 26 '18 at 12:38

-1

I've implemented the requirement using d3.

https://github.com/Dhiraj1411/box-plot-combined-with-line-chart

answered Apr 26 '18 at 12:38

Dhiraj Narayan Singh

37
1
6

How to combine Box plot graph with line graph in nvd3

1 Answers1