CODEWITHSUNDEEP
javascriptd3.jslinegraph
Nicola
Nicola

Reputation: 49

d3.js Line Graph Axises won't go to highest number

Here is the csv file I am reading in, prices13.csv

date,price
1,32
2,62
6,50
10,145

I am using "http://d3js.org/d3.v3.min.js" Here is the code for the graph

 <script type="text/javascript">    

d3.csv("prices13.csv")
    .row(function(d) { return { date:(d.date),price:(d.price)};})
    .get(function(error,data){

    var height = 400;
    var width = 600;

    var maxDate = d3.max(data,function(d){ return d.date; });
    var minDate = d3.min(data,function(d){ return d.date; });
    var maxPrice = d3.max(data,function(d){ return d.price; });
    console.log(maxDate);   

    var y = d3.scale.linear()
            .domain([0,maxPrice])
            .range([height,0]);

    var x = d3.scale.linear()
                .domain([minDate, maxDate])
                .range([0,width]);

    var yAxis = d3.svg.axis().scale(y).orient("left");
    var xAxis = d3.svg.axis().scale(x).orient("bottom");

    var svg = d3.select('body').append('svg')
                .attr('height', '100%')
                .attr('width', '100%');

    var chartGroup = svg.append('g')
                    .attr('transform', 'translate(50,50)');

    var line = d3.svg.line()
                .x(function(d){return x(d.date);})
                .y(function(d){return y(d.price);});


    chartGroup.append('path').attr('d', line(data));
    chartGroup.append('g').attr('class', 'x axis').attr('transform','translate(0,'+height+')').call(xAxis);
    chartGroup.append('g').attr('class', 'y axis').call(yAxis);
    });

This creates a line graph, however the x axis only goes up to 6.0 and the y axis only goes up to 60.

Is there anyway for it to go up to the highest numbers in the .csv. This is what I was trying to achieve, when using d3.max(data,function(d).

Here is a link to the graph output http://www.mydatavisualisation.co.uk/linegraph.html

Upvotes: 1

Views: 24

Answers (1)

Klaujesi
Klaujesi

Reputation: 1836

You are evaluating d.date as string, so:

6 > 10

or

1 < 10 < 2 < 6

Just add (+) to indicate number:

    var maxDate = d3.max(data,function(d){ return +d.date; }); // HERE
    var minDate = d3.min(data,function(d){ return +d.date; }); // HERE
    var maxPrice = d3.max(data,function(d){ return +d.price; });  // HERE
    console.log(maxDate);

Upvotes: 1

Related Questions