How to draw a multi line series graph using d3.js with json data using angular directives

Question

I referred this url.Actually this graph contains csv data.But I've json data.And I'm trying to draw a graph using angular directives.How can I do this.Can anyone please help me out regarding this issue ...

My angular directive in js:

angular.module('myApp').directive('multiLine', [
  function () {
      return {
         restrict: 'E',
         scope: {
            data: '='
         },
         link: function (scope, element) {

    var data = [{
    "date": "20111001",
        "New York": "63.4",
        "San Francisco": "62.7",
        "Austin": "72.2"
}, {
    "date": "20111002",
        "New York": "58.0",
        "San Francisco": "59.9",
        "Austin": "67.7"
}, {
    "date": "20111003",
        "New York": "53.3",
        "San Francisco": "59.1",
        "Austin": "69.4"
}];

    var margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y%m%d").parse;

var x = d3.time.scale()
    .range([0, width]);

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

var color = d3.scale.category10();

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

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

var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
    return x(d.date);
})
    .y(function (d) {
    return y(d.temperature);
});

var svg = d3.select(element[0]).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 + ")");

color.domain(d3.keys(data[0]).filter(function (key) {
    return key !== "date";
}));

data.forEach(function (d) {
    d.date = parseDate(d.date);
});

var cities = color.domain().map(function (name) {
    return {
        name: name,
        values: data.map(function (d) {
            return {
                date: d.date,
                temperature: +d[name]
            };
        })
    };
});

x.domain(d3.extent(data, function (d) {
    return d.date;
}));

y.domain([
d3.min(cities, function (c) {
    return d3.min(c.values, function (v) {
        return v.temperature;
    });
}),
d3.max(cities, function (c) {
    return d3.max(c.values, function (v) {
        return v.temperature;
    });
})]);

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

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Temperature (ºF)");

var city = svg.selectAll(".city")
    .data(cities)
    .enter().append("g")
    .attr("class", "city");

city.append("path")
    .attr("class", "line")
    .attr("d", function (d) {
    return line(d.values);
})
    .style("stroke", function (d) {
    return color(d.name);
});

city.append("text")
    .datum(function (d) {
    return {
        name: d.name,
        value: d.values[d.values.length - 1]
    };
})
    .attr("transform", function (d) {
    return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
})
    .attr("x", 3)
    .attr("dy", ".35em")
    .text(function (d) {
    return d.name;
});


         }
      };
  }
]);

My html:

   <multiLine></multiLine>

Why not using nvd3 Angular libaries such as krispo.github.io/angular-nvd3/# or cmaurer.github.io/angularjs-nvd3-directives ? The only drawback is that you have to conform to their expected data structure — beaver
– beaver, Commented Feb 12, 2016 at 9:35

Mark · Accepted Answer · 2016-02-15 13:53:13Z

Read the section in the angular directive docs on normalization:

Angular normalizes an element's tag and attribute name to determine which elements match which directives. We typically refer to directives by their case-sensitive camelCase normalized name (e.g. ngModel). However, since HTML is case-insensitive, we refer to directives in the DOM by lower-case forms, typically using dash-delimited attributes on DOM elements (e.g. ng-model).

So your html should be:

<multi-line></multi-line>

Working code:

angular.module('myApp', []);

angular.module('myApp').directive('multiLine', [
  function() {
    return {
      restrict: 'E',
      scope: {
        data: '='
      },
      link: function(scope, element) {

        var data = [{
          "date": "20111001",
          "New York": "63.4",
          "San Francisco": "62.7",
          "Austin": "72.2"
        }, {
          "date": "20111002",
          "New York": "58.0",
          "San Francisco": "59.9",
          "Austin": "67.7"
        }, {
          "date": "20111003",
          "New York": "53.3",
          "San Francisco": "59.1",
          "Austin": "69.4"
        }];

        var margin = {
            top: 20,
            right: 80,
            bottom: 30,
            left: 50
          },
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

        var parseDate = d3.time.format("%Y%m%d").parse;

        var x = d3.time.scale()
          .range([0, width]);

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

        var color = d3.scale.category10();

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

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

        var line = d3.svg.line()
          .interpolate("linear")
          .x(function(d) {
            return x(d.date);
          })
          .y(function(d) {
            return y(d.temperature);
          });

        var svg = d3.select(element[0]).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 + ")");

        color.domain(d3.keys(data[0]).filter(function(key) {
          return key !== "date";
        }));

        data.forEach(function(d) {
          d.date = parseDate(d.date);
        });

        var cities = color.domain().map(function(name) {
          return {
            name: name,
            values: data.map(function(d) {
              return {
                date: d.date,
                temperature: +d[name]
              };
            })
          };
        });

        x.domain(d3.extent(data, function(d) {
          return d.date;
        }));

        y.domain([
          d3.min(cities, function(c) {
            return d3.min(c.values, function(v) {
              return v.temperature;
            });
          }),
          d3.max(cities, function(c) {
            return d3.max(c.values, function(v) {
              return v.temperature;
            });
          })
        ]);

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

        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Temperature (ºF)");

        var city = svg.selectAll(".city")
          .data(cities)
          .enter().append("g")
          .attr("class", "city");
        
        city.selectAll(".points")
          .data(function(d){
            return d.values;
          })
          .enter()
          .append("circle")
          .attr("cx", function(d){
             return x(d.date);
          })
          .attr("cy", function(d){
            return y(d.temperature);
          })
          .attr("r", 5)
          .style("fill", function(d,i,j){
            return color(cities[j].name);      
          });

        city.append("path")
          .attr("class", "line")
          .attr("d", function(d) {
            return line(d.values);
          })
          .style("stroke", function(d) {
            return color(d.name);
          });

        city.append("text")
          .datum(function(d) {
            return {
              name: d.name,
              value: d.values[d.values.length - 1]
            };
          })
          .attr("transform", function(d) {
            return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
          })
          .attr("x", 3)
          .attr("dy", ".35em")
          .text(function(d) {
            return d.name;
          });
      }
    };
  }
]);

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="[email protected]" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="[email protected]" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="module.js"></script>

<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>
    <multi-line></multi-line>
</body>

</html>

Thanks a lot for ur help.Can we make the lines crisp edged instead of curvy and can we place dots on the lines
@dev777, see edits above. For straight lines use a different interpolate: var line = d3.svg.line().interpolate("linear"), for points append some circles...

Collectives™ on Stack Overflow

How to draw a multi line series graph using d3.js with json data using angular directives

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related