title: Same X-axis Multiple Line Charts using d3
body: <p>I have created d3 chart by using some snippets from blockbuilder.org and Mike Bostock Reusable chart technique.</p>
  
  <p>However, I want to have single y-axis for multiple charts. Here , whenever I call the select function, I am creating Y-axis for every line chart.</p>
  
  <p>and more thing I have to mention here, I have to show the Y-axis only for the last selected checkbox chart which will be bottom chart.</p>
  
  <p>Here is <a href="https://jsfiddle.net/harsha547/5qx4onfn/1/" rel="nofollow noreferrer">Jsfiddle</a> which I have worked</p>
  
  <p>Following is the onload snippet</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(window).load(function () {
  
              var textareas$ = $('#chartarea div');
              textareas$.hide();
              $('input[name="Air"]').change(function () {
  
                  var elem$ = $(this);
                  var correspelem$ = textareas$.eq(elem$.val() - 1);
                  if (elem$.val() == 1) {
                      select('Retail', "#Retail");
                  } else if (elem$.val() == 2) {
                      select("Gas", "#Gas");
                  } else if (elem$.val() == 3) {
                      select("Dining", "#Dining");
                  } else {};
                  if (elem$.is(':checked')) correspelem$.show();
                  else correspelem$.hide();
  
              });
          });
  
  
          var data = [ // &lt;-A
              {
                  date: "2014/01",
                  Gas: 10,
                  Retail: 22,
                  Dining: 120
              },
              {
                  date: "2014/02",
                  Gas: 10,
                  Retail: 42,
                  Dining: 53
              },
              {
                  date: "2014/03",
                  Gas: 30,
                  Retail: 24,
                  Dining: 76
              },
              {
                  date: "2014/04",
                  Gas: 50,
                  Retail: 29,
                  Dining: 49
              },
              {
                  date: "2014/05",
                  Gas: 80,
                  Retail: 47,
                  Dining: 47
              },
              {
                  date: "2014/06",
                  Gas: 65,
                  Retail: 78,
                  Dining: 64
              },
              {
                  date: "2014/07",
                  Gas: 55,
                  Retail: 38,
                  Dining: 29
              },
              {
                  date: "2014/08",
                  Gas: 43,
                  Retail: 34,
                  Dining: 47
              },
              {
                  date: "2014/09",
                  Gas: 20,
                  Retail: 54,
                  Dining: 34
              },
              {
                  date: "2014/10",
                  Gas: 10,
                  Retail: 34,
                  Dining: 27
              },
              {
                  date: "2014/11",
                  Gas: 43,
                  Retail: 8,
                  Dining: 45
              },
              {
                  date: "2014/12",
                  Gas: 40,
                  Retail: 26,
                  Dining: 28
              },
              {
                  date: "2015/01",
                  Gas: 10,
                  Retail: 34,
                  Dining: 54
              },
              {
                  date: "2015/02",
                  Gas: 15,
                  Retail: 29,
                  Dining: 28
              },
              {
                  date: "2015/03",
                  Gas: 30,
                  Retail: 19,
                  Dining: 43
              },
              {
                  date: "2015/04",
                  Gas: 50,
                  Retail: 23,
                  Dining: 43
              },
              {
                  date: "2015/05",
                  Gas: 80,
                  Retail: 49,
                  Dining: 43
              },
              {
                  date: "2015/06",
                  Gas: 65,
                  Retail: 32,
                  Dining: 43
              },
              {
                  date: "2015/07",
                  Gas: 55,
                  Retail: 25,
                  Dining: 39
              },
              {
                  date: "2015/08",
                  Gas: 30,
                  Retail: 35,
                  Dining: 47
              },
              {
                  date: "2015/09",
                  Gas: 20,
                  Retail: 54,
                  Dining: 37
              },
              {
                  date: "2015/10",
                  Gas: 10,
                  Retail: 34,
                  Dining: 54
              },
              {
                  date: "2015/11",
                  Gas: 8,
                  Retail: 29,
                  Dining: 44
              },
              {
                  date: "2015/12",
                  Gas: 40,
                  Retail: 14,
                  Dining: 45
              },
              {
                  date: "2016/01",
                  Gas: 10,
                  Retail: 15,
                  Dining: 34
              },
              {
                  date: "2016/02",
                  Gas: 15,
                  Retail: 34,
                  Dining: 23
              },
              {
                  date: "2016/03",
                  Gas: 30,
                  Retail: 28,
                  Dining: 45
              },
              {
                  date: "2016/04",
                  Gas: 50,
                  Retail: 34,
                  Dining: 65
              },
              {
                  date: "2016/05",
                  Gas: 80,
                  Retail: 45,
                  Dining: 67
              },
              {
                  date: "2016/06",
                  Gas: 65,
                  Retail: 35,
                  Dining: 65
              },
              {
                  date: "2016/07",
                  Gas: 55,
                  Retail: 43,
                  Dining: 36
              },
              {
                  date: "2016/08",
                  Gas: 30,
                  Retail: 34,
                  Dining: 53
              },
              {
                  date: "2016/09",
                  Gas: 20,
                  Retail: 54,
                  Dining: 76
              },
              {
                  date: "2016/10",
                  Gas: 10,
                  Retail: 45,
                  Dining: 65
              },
              {
                  date: "2016/11",
                  Gas: 8,
                  Retail: 43,
                  Dining: 56
              },
              {
                  date: "2016/12",
                  Gas: 40,
                  Retail: 23,
                  Dining: 64
              }
          ];
          
                  var formatDate = d3.time.format("%b %Y");
  
                  function timeSeriesChart() {
                                  var margin = {top: 20, right: 40, bottom: 30, left: 40},
                                      width = 1150,
                                      height = 120,
                                  
                                  xValue = function(d) { return d[0]; },
                                  yValue = function(d) { return d[1]; },
                                  
                                  xScale = d3.time.scale(),
                                  
                                  yScale = d3.scale.linear(),
                                  
                                  xAxis = d3.svg.axis()
                                                          .scale(xScale)
                                                          .orient("bottom")
                                                          .tickFormat(formatDate)
                                                          .tickSize(6, 0)
                                                          .tickPadding(1),
                                  area = d3.svg.area()
                                                          .x(X)
                                                          .y1(Y),
                                  line = d3.svg.line()
                                                      .x(X)
                                                      .y(Y);
  
                                  function chart(selection) {
                                                  selection.each(function(data) {
                                                                      // Convert data to standard representation greedily;
                                                                      // this is needed for nondeterministic accessors.
                                                                      data = data.map(function(d, i) {
                                                                                                                  return [xValue.call(data, d, i), yValue.call(data, d, i)];
                                                                                                                  });
  
                                                                      // Update the x-scale.
                                                                      xScale
                                                                                  .domain(d3.extent(data, function(d) { return d[0]; }))
                                                                                  .range([0, width - margin.left - margin.right]);
  
                                                                      // Update the y-scale.
                                                                       yScale
                                                                                  .domain([0, d3.max(data, function(d) { return d[1]; })])
                                                                                  .range([height - margin.top - margin.bottom, 0]);
  
                                                                      // Select the svg element, if it exists.
                                                                      var svg = d3.select(this).selectAll("svg")
                                                                                                          .data([data]);
  
                                                                      // Otherwise, create the skeletal chart.
                                                                      var gEnter = svg.enter().append("svg")
                                                                                                              .append("g");
  
                                                                              gEnter.append("path")
                                                                                          .attr("class", "area");
        
                                                                              gEnter.append("path")
                                                                                          .attr("class", "line");
        
                                                                              gEnter.append("g")
                                                                                          .attr("class", "x axis");
  
                                                                              // Update the outer dimensions.
                                                                              svg .attr("width", width)
                                                                                          .attr("height", height);
  
                                                                  // Update the inner dimensions.
                                                              var g = svg.select("g")
                                                                                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  
                                                          // Update the area path.
                                                          //  g.select(".area")
                                                          //    .attr("d", area.y0(yScale.range()[0]));
  
                                                      // Update the line path.
                                                      g.select(".line")
                                                          .attr("d", line);
  
                                                   // Update the x-axis.
                                                      g.select(".x.axis")
                                                              .attr("transform", "translate(0," + yScale.range()[0] + ")")
                                                              .call(xAxis);
                                              });
                                      }
  
                                      // The x-accessor for the path generator; xScale ∘ xValue.
                                                  function X(d) {
                                                                               return xScale(d[0]);
                                                                          }
  
                                  // The x-accessor for the path generator; yScale ∘ yValue.
                                                  function Y(d) {
                                                                                  return yScale(d[1]);
                                                                          }
  
                                                  chart.margin = function(_) {
                                                                      if (!arguments.length) return margin;
                                                                                                              margin = _;
                                                                                                              return chart;
                                                                  };
  
                                                  chart.width = function(_) {
                                                                      if (!arguments.length) return width;
                                                                                                          width = _;
                                                                                                          return chart;
                                                                               };
  
                                                  chart.height = function(_) {
                                                                      if (!arguments.length) return height;
                                                                                                                  height = _;
                                                                                                           return chart;
                                                                      };
  
                                              chart.x = function(_) {
                                                                      if (!arguments.length) return xValue;
                                                                                                                  xValue = _;
                                                                                                          return chart;
                                                                          };
  
                                              chart.y = function(_) {
                                                                          if (!arguments.length) return yValue;
                                                                                                                          yValue = _;
                                                                                                              return chart;
                                                                              };
  
                                                              return chart;
                                                          }
  
  
                                              var chart = timeSeriesChart()
                                                                           .x(function(d) { return new Date(d.date); })
                                                                          .y(function(d) { return +d['category']; });
  
                                              function select(category, id) {
                                                                                              var dataset = [];
                                                                                                  dataset = data.map(function(d) {
                                                                                                                                                      return {
                                                                                                                                                                              date:d.date,
                                                                                                                                                                          category:d[category]
                                                                                                                                                                      };
                                                                                                                                                                  }) 
          
                                                                                                          d3.select(id)
                                                                                                              .datum(dataset)
                                                                                                              .call(chart);
  
                                                                                              }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  ul {
              list-style: none;
          }
  
          ul li {
              margin: 10px;
              font-size: 15px;
              display: inline-block;
          }
  
          #chartarea {
              display: table;
              height: 470px;
              width: 1150px;
              box-shadow: 10px 10px 5px #c0c0c0
          }
  
          #Retail {
              margin: 5px;
              padding: 5px 5px 5px 5px;
              width: 1150px;
              box-shadow: 5px 5px 5px #808080;
          }
  
          #Gas {
              margin: 5px;
              padding: 5px 5px 5px 5px;
              width: 720px;
              box-shadow: 5px 5px 5px #808080;
          }
  
          #Dining {
              margin: 5px;
              padding: 5px 5px 5px 5px;
              width: 720px;
              box-shadow: 5px 5px 5px #808080;
          }
  .line {
    fill: none;
    stroke: #000;
    stroke-width: 1.5px;
  }
  
  .area {
    fill: #969696;
  }
  
  .attention {
    background: yellow;
    margin: -4px;
    padding: 4px;
  }
  
          .Retail,
          .Gas,
          .Dining {
              min-height: 22px;
              min-width: 10px;
              width: 0px;
              height: 0px;
              background-color: steelblue;
              margin-bottom: 3px;
              font-size: 11px;
              color: #f0f8ff;
              text-align: right;
              padding-right: 2px;
          }
  
          #Gas,
          #Dining,
          #Retail {
              display: table-row;
              height: auto;
              width: auto;
              overflow: hidden;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
    &lt;div id="options"&gt;
          &lt;h2&gt;Options&lt;/h2&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;input type="checkbox" name="Air" id="Ground1" value="1"&gt;Retail&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="Air" id="Ground2" value="2"&gt;Gas&lt;/li&gt;
              &lt;li&gt;&lt;input type="checkbox" name="Air" id="Ground2" value="3"&gt;Dining&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  
      &lt;h2&gt;Chart Area&lt;/h2&gt;
      &lt;div id="chartarea"&gt;
          &lt;div id="Retail"&gt;Retail&lt;/div&gt;
          &lt;div id="Gas"&gt;Gas&lt;/div&gt;
          &lt;div id="Dining"&gt;Dining&lt;/div&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please advice, If there is any further information required.</p>
  
  <p><a href="https://i.stack.imgur.com/igNnE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/igNnE.png" alt="Snapshot"></a></p>