score:1

Accepted answer

Here is the working code:: http://plnkr.co/edit/pdjNBWCYd91drndL?open=lib%2Fscript.js

This is using D3v3 you might want to upgrade your D3 version and go through D3docs because there are lots of changes in the latest D3 version.

Below is the basic working example with your data

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
 
body { font: 12px Arial;}
 
path { 
  stroke: steelblue;
  stroke-width: 2;
  fill: none;
}
 
.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}
 
</style>
<body>
 
<!-- load the d3.js library --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
 
<script>
 
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;
 
 
// Set the ranges
var x = d3.scale.ordinal().domain(["OCT 2020",
"SEP 2020",
"AGO 2020",
"JUL 2020",
"MAY 2020",
"ABR 2020",
"MAR 2020",
"FEB 2020",
"ENE 2020"])
.rangePoints([0, width]);
var y = d3.scale.linear().range([height, 0]);
 
// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(100);
 
var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(10);

 // Define the line
var valueline = d3.svg.line()
    .x(function(d) {  return x(d.date); })
    .y(function(d) {  return y(d.close); }); 

// Adds the svg canvas
var svg = d3.select("body")
    .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
 let data=[
 {date: "OCT 2020", close: 57370},
 {date: "SEP 2020", close: 60100},
 {date: "AGO 2020", close: 62530},
 {date: "JUL 2020", close: 68840},
 {date: "MAY 2020", close: 91470},
 {date: "ABR 2020", close: 54130},
 {date: "MAR 2020", close: 57960},
 {date: "FEB 2020", close: 55720},
 {date: "ENE 2020", close: 54360}
]

    // Scale the range of the data
    // x.domain(d3.extent(data, function(d) { return d.date; }));
    
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

    // Add the valueline path.
    svg.append("path")  
        .attr("class", "line")
        .attr("d", valueline(data));
 
    // Add the X Axis
    svg.append("g")     
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);
 
    // Add the Y Axis
    svg.append("g")     
        .attr("class", "y axis")
        .call(yAxis);
</script>
</body>


Related Query

More Query from same tag