CODEWITHSUNDEEP
javascriptd3.js
venky
venky

Reputation: 131

How to get the data from given array of objects in d3.js

I have confused for the how to get the data from objects in arrays and I had developed for the line graph but x-axis problem is raising, how to solve the problem, my object is given below.

var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
{"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
{"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];
var parseDate = d3.time.format("%x").parse
//console.log(data);
//data.forEach(function (d){
//d.key=d.key[1];
//d.value=d.value;
//})
var s1=data.map(function (d,i){return {key:d.key[0],value:d.value}})
console.log(s1);
 var margin = {top: 15, right: 20, bottom: 70, left: 85},
        width = 440,height = 450;
var x=d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key[1]}))
  .range([0,width])
var y=d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
  .range([height,0])
var xAxis = d3.svg.axis().scale(x).orient("bottom")
var yAxis = d3.svg.axis().scale(y).orient("left")
var line = d3.svg.line()
       .x(function(d) { return x(d.key); })
       .y(function(d) { return y(d.value); })
       .interpolate("cardinal")

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

     var svg = d3.select("body").select("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    svg.append("g")
      .attr("class", "x axis x-axis")
      .attr("transform", "translate(0," + height + ")").attr("fill","steelblue")
      .call(xAxis);

     svg.append("g").attr("class", "y axis y-axis").attr("fill","steelblue").call(yAxis)

     svg.append("path").attr("class", "line").attr("d", line(s1));

Upvotes: 0

Views: 1056

Answers (1)

ee2Dev
ee2Dev

Reputation: 1998

Below you find a line graph by adjusting your code. Make sure the statements end with semicolons according to the convention.

Your variable s1 was not created correctly and at the end look how the line is appended correctly.

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
  body {
    font: 10px sans-serif;
  }

  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .x.axis path {
    display: none;
  }

  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
  {"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
  {"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];

  var parseDate = d3.time.format("%x").parse;
  // construct the date according to the parsed format: %m/%d/%Y
  var s1 = data.map(function (d,i){return {key:parseDate((d.key[1]+1)+"/1/"+d.key[0]),value:+d.value}}); 
  console.log(s1);

  var margin = {top: 15, right: 20, bottom: 70, left: 85},
          width = 440,height = 450;

  var x = d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key}))
    .range([0,width]);

  var y = d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
    .range([height,0]);

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

  var line = d3.svg.line()
         .x(function(d) { return x(d.key); })
         .y(function(d) { return y(d.value); })
         .interpolate("cardinal");

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

  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 + ")");

  svg.append("g")
    .attr("class", "x axis x-axis")
    .attr("transform", "translate(0," + height + ")")
    .attr("fill","steelblue")
    .call(xAxis);

  svg.append("g")
    .attr("class", "y axis y-axis")
    .attr("fill","steelblue")
    .call(yAxis);

  svg.append("path")
    .datum(s1)
    .attr("class", "line")
    .attr("d", line);
</script>
</body>
</html>

Upvotes: 1

Related Questions