0

<!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: green;
    stroke-width: 1;
    shape-rendering: crispEdges;
}


</style>
<body>

<script src="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;

var parseDate = d3.time.format("%Y-%m-%d").parse;
//2015-06-20
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

// Define the axes
var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(10);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(5);

// Define the line 
var priceline = d3.svg.line().interpolate("basis")
    .x(function(d) { console.log(d.T1); return x(d.T1); })
    .y(function(d) { return y(d.NATURE_QUERY); });
    
// 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
d3.csv("datatest.csv", function(error, data) {  
    data.forEach(function(d) {
      console.log(d.T1);
      d.T1 = parseDate(d.T1);
    }); 
    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.T1; }));
    y.domain([0, d3.max(data, function(d) { return d.NATURE_QUERY; })]); 

    // Nest the entries by symbol
    var dataNest = d3.nest()
        .key(function(d) {return d.CLOSING_DEPT;})
        .entries(data);
    console.log(dataNest);

    // Loop through each symbol / key
    dataNest.forEach(function(d) {
        svg.append("path")
            .attr("class", "line")
            .attr("d", priceline(d.values)); 

    });

    // 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>
This is my code but i want to draw a small circle at the end of each line along with the value of the end point.I dint add my data file here, and am new to d3.js so do suggest me with the ideas. Thank you

Please find the tsv dataset here

4
  • How to add the csv file here ?
    – Sriram
    May 9, 2016 at 9:11
  • Add via gist gist.github.com and share the url in the question. May 9, 2016 at 9:14
  • It shows an error ya, so can you please share your email id so that i can send the data..
    – Sriram
    May 9, 2016 at 9:21
  • Please check you mail @cyril
    – Sriram
    May 9, 2016 at 9:31

1 Answer 1

0

You can do it like this:

 dataNest.forEach(function(d){
        //iterate over all the data for line to get the last point of a line.
        var k = d.values
        var last = k[k.length -1];//get the last value of the line
        svg.append("circle")
        .attr("cx", function(d){return x(last.T1);})//make a circle at the last point
        .attr("cy", function(d){return y(last.NATURE_QUERY);})
        .attr("r", 4);
        //make a text 
        svg.append("text")
        .attr("x", function(){return x(last.T1) + 20;})
        .attr("y", function(){return y(last.NATURE_QUERY);})
        .text(function(){return last.CLOSING_DEPT;})  //set the text you want to display.      
      })

working code here

5
  • Dude that's working fine, thank you so much... And one more thing i dont want to the y axis line instead i want an y-axis grid
    – Sriram
    May 9, 2016 at 10:00
  • Cyril, instead of multiline chart can we draw the areaplot chart for the same?
    – Sriram
    May 9, 2016 at 11:22
  • Cyril, instead of multiline chart can we draw the areaplot chart for the same?
    – Sriram
    May 9, 2016 at 11:23
  • Ya k Cyril.In that multiline chart Color should be varied for each line, and above that chart with the color i need the legend....
    – Sriram
    May 9, 2016 at 11:39
  • legend will look like small square box with "CLOSING_DEPT" text
    – Sriram
    May 9, 2016 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.