As shown in the picture, the fourth chart is a line chart.enter image description here The code itself works fine individually and with other codes. It shows when it is the first chart, the second chart, or the third chart, but not the fourth chart. Also, on the console the code is not included for some reason that I don't know. I also try placing the other charts on the fourth, and none of them show when they are the fourth chart. I am using live server with google chrome browser. The code below is the fourth chart. enter image description hereThank you!
<head>
<style type="text/css">
h1 {
font-size: 30px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
p {
font-size: 22px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Total Profit from Pizza Sales Over a Year</h1>
<div style="float:right;width:50%" id="chart4"></div>
</body>
<svg width="400" height="400" id="svg4"></svg>
<script>
var margin = { top: 60, right: 20, bottom: 30, left: 60 };
var width = 1000 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var svg4 = d3.select("#chart4")
.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})`);
var data = [
{month: 1, value: 69793.3},
{month: 2, value: 134952.9},
{month: 3, value: 205350},
{month: 4, value: 274086.8},
{month: 5, value: 345489.55},
{month: 6, value: 413719.75},
{month: 7, value: 486277.65},
{month: 8, value: 554555.9},
{month: 9, value: 618735.95},
{month: 10, value: 682863.55},
{month: 11, value: 753158.9},
{month: 12, value: 817860.05},
];
var x = d3.scaleLinear()
.range([0, width])
.domain([1, 12])
var y = d3.scaleLinear()
.range([height, 0])
.domain([0, d3.max(data, d => d.value)])
function x_gridlines() {
return d3.axisBottom(x)
.ticks(12)
}
function y_gridlines() {
return d3.axisLeft(y)
.ticks(6)
}
svg4.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(x_gridlines()
.tickSize(-height)
.tickFormat("")
)
svg4.append("g")
.attr("class", "grid")
.call(y_gridlines()
.tickSize(-width)
.tickFormat("")
)
svg4.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x))
svg4.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width - 400)
.attr("y", height + 30)
.text("Month of the Year");
svg4.append("g")
.call(d3.axisLeft(y))
svg4.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -34)
.attr("x", 60)
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.text("USD ($)");
var line = d3.line()
.x(d => x(d.month))
.y(d => y(d.value));
svg4.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "green")
.attr("stroke-width", 4)
.attr("d", line);
</script>
Please give an example using similar codes that has four d3 charts (pie chart, line chart, stacked bar chart, bar chart) on html.
