Inserting two separate charts on one page D3.js v4

Question

In Bellow code I am trying to use separate charts (i.e. Bar and line chart) and getting Error: attribute d: Expected number, "MNaN,116LNaN,117L…"

Tried with using different SVG elements for both charts. Give some suggestions if I am missing something.

If I commenting Bar chart code then Line chart works properly and same works with the Bar chart but both at a same time doesn't work.

<div>
    <div>Simple Bar Chart</div>
    <div class="simpleBar">
        <svg width="960" height="500"></svg>
    </div>
</div>
<div>
    <div>Line Chart</div>
    <div id="lineGraph"></div>
</div>
<script>
// --------------- Bar chart code starts -----------------------
var svg = d3.select(".simpleBar > svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var tooltip = d3.select("body").append("div").attr("class", "toolTip");

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
y = d3.scaleLinear().rangeRound([height, 0]);

var colours = d3.scaleOrdinal()
.range(["#6F257F", "#CA0D59"]);

var g = svg.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("dataSample.json", function(error, data) {
    if (error) throw error;

    x.domain(data.map(function(d) { return d.Timestamp; }));
    y.domain([0, d3.max(data, function(d) { return d.DayTotal; })]);

    g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x));

    g.append("g")
        .attr("class", "axis axis--y")
        .call(d3.axisLeft(y).ticks(5).tickFormat(function(d) { return parseInt(d) + "Rs"; }).tickSizeInner([-width]))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 1)
        .attr("dy", "0.71em")
        .attr("text-anchor", "end")
        .attr("fill", "#5D6971")
        .text("Average Expence(Rs)");

    g.selectAll(".bar")
        .data(data)
        .enter().append("rect")
        .attr("x", function(d) { return x(d.Timestamp); })
        .attr("y", function(d) { return y(d.DayTotal); })
        .attr("width", x.bandwidth())
        .attr("height", function(d) { return height - y(d.DayTotal); })
        .attr("fill", function(d) { return colours(d.Timestamp); })
        .on("mousemove", function(d){
            tooltip
                .style("left", d3.event.pageX - 50 + "px")
                .style("top", d3.event.pageY - 70 + "px")
                .style("display", "inline-block")
                .html((d.Timestamp) + "<br>" + "Rs" + (d.DayTotal));
        })
        .on("mouseout", function(d){ tooltip.style("display", "none");});
});


// --------------- Line chart code starts -----------------------
// parse the Timestamp / time
var parseTime = d3.timeParse("%d-%b-%y");

// set the ranges
var xLine = d3.scaleTime().range([0, width]);
var yLine = d3.scaleLinear().range([height, 0]);

// define the line
var valueline = d3.line()
    .x(function(d) { return x(d.Timestamp); })
    .y(function(d) { return y(d.DayTotal); });

var svgLine = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svgLine = d3.select("#lineGraph").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform",
        "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.json("dataSample.json", function(error, data) {
    if (error) throw error;

    // format the data
    data.forEach(function(d) {
        d.Timestamp = parseTime(d.Timestamp);
        d.DayTotal = +d.DayTotal;
    });

    // Scale the range of the data
    xLine.domain(d3.extent(data, function(d) { return d.Timestamp; }));
    yLine.domain([0, d3.max(data, function(d) { return d.DayTotal; })]);

    // Add the valueline path.
    svgLine.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", valueline);

    // Add the X Axis
    svgLine.append("g")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(xLine).ticks(5));

    // Add the Y Axis
    svgLine.append("g")
        .call(d3.axisLeft(yLine));
});
</script>

and bellow is the Json data format:

[
    {
        "DayTotal": "418",
        "Timestamp": "15-Mar-18" 
    },{...}
]

Answer 1

You are supposed to use xLine, yLine in your d3 line function whereas you used the ones(x, y) that you meant for bar charts.

var valueline = d3.line()
  .x(function(d) { return xLine(d.Timestamp); })
  .y(function(d) { return yLine(d.DayTotal); });

Solved JSFiddle