javascript - Same X-axis Multiple Line Charts using d3 -
i have created d3 chart using snippets blockbuilder.org , mike bostock reusable chart technique.
however, want have single y-axis multiple charts. here , whenever call select function, creating y-axis every line chart.
and more thing have mention here, have show y-axis last selected checkbox chart bottom chart.
here jsfiddle have worked
following onload snippet
$(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 = [ // <-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 standard representation greedily; // needed nondeterministic accessors. data = data.map(function(d, i) { return [xvalue.call(data, d, i), yvalue.call(data, d, i)]; }); // update x-scale. xscale .domain(d3.extent(data, function(d) { return d[0]; })) .range([0, width - margin.left - margin.right]); // update y-scale. yscale .domain([0, d3.max(data, function(d) { return d[1]; })]) .range([height - margin.top - margin.bottom, 0]); // select svg element, if exists. var svg = d3.select(this).selectall("svg") .data([data]); // otherwise, create 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 outer dimensions. svg .attr("width", width) .attr("height", height); // update inner dimensions. var g = svg.select("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // update area path. // g.select(".area") // .attr("d", area.y0(yscale.range()[0])); // update line path. g.select(".line") .attr("d", line); // update x-axis. g.select(".x.axis") .attr("transform", "translate(0," + yscale.range()[0] + ")") .call(xaxis); }); } // x-accessor path generator; xscale ∘ xvalue. function x(d) { return xscale(d[0]); } // x-accessor 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); } 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; }<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <div id="options"> <h2>options</h2> <ul> <li><input type="checkbox" name="air" id="ground1" value="1">retail</li> <li><input type="checkbox" name="air" id="ground2" value="2">gas</li> <li><input type="checkbox" name="air" id="ground2" value="3">dining</li> </ul> </div> <h2>chart area</h2> <div id="chartarea"> <div id="retail">retail</div> <div id="gas">gas</div> <div id="dining">dining</div> </div>please advice, if there further information required.
add code 'change' handler:
var chartaxis = document.queryselectorall('#chartarea .axis.x'); chartaxis.foreach((elem, index) => index !== chartaxis.length - 1 ? elem.style.display = 'none' : elem.style.display = 'block');
Comments
Post a Comment