How to draw a d3.js line chart using angularjs directives -
how use angular directives load d3.js graph using scope json data instead of using graph.html file.i had referred urlurl.but unable line chart.
can please me out regarding issue ...
my graph.html:
function getdate(d) { var dt = new date(d.date); dt.sethours(0); dt.setminutes(0); dt.setseconds(0); dt.setmilliseconds(0); return dt; } function showdata(obj, d) { var coord = d3.mouse(obj); var infobox = d3.select(".infobox"); // position infobox our mouse infobox.style("left", (coord[0] + 100) + "px" ); infobox.style("top", (coord[1] - 175) + "px"); $(".infobox").html(d); $(".infobox").show(); } function hidedata() { $(".infobox").hide(); } var drawchart = function(data) { // define dimensions of graph var m = [10, 20, 10, 50]; // margins var w = 250 - m[1] - m[3]; // width var h = 100 - m[0] - m[2]; // height data.sort(function(a, b) { var d1 = getdate(a); var d2 = getdate(b); if (d1 == d2) return 0; if (d1 > d2) return 1; return -1; }); var mindate = getdate(data[0]), maxdate = getdate(data[data.length-1]); var x = d3.time.scale().domain([mindate, maxdate]).range([0, w]); var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingvalue; } )]).range([h, 0]); var line = d3.svg.line() .x(function(d, i) { return x(getdate(d)); //x(i); }) .y(function(d) { return y(d.trendingvalue); }); function xx(e) { return x(getdate(e)); }; function yy(e) { return y(e.trendingvalue); }; var graph = d3.select("#chart").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); var xaxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).ticksize(-h).ticksubdivide(true); var yaxisleft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickformat(formallabel); graph .selectall("circle") .data(data) .enter().append("circle") .attr("fill", "steelblue") .attr("r", 5) .attr("cx", xx) .attr("cy", yy) .on("mouseover", function(d) { showdata(this, d.trendingvalue);}) .on("mouseout", function(){ hidedata();}); graph.append("svg:path").attr("d", line(data)); $("#chart").append("<div class='infobox' style='display:none;'>test</div>"); } my directive:(which had tried unable draw graph)
angular.module( 'chart').directive( 'crd3bars', [ function () { return { restrict: 'e', scope: { data: '=' }, link: function (scope, element) { function getdate(d) { var dt = new date(d.date); dt.sethours(0); dt.setminutes(0); dt.setseconds(0); dt.setmilliseconds(0); return dt; } function showdata(obj, d) { var coord = d3.mouse(obj); var infobox = d3.select(".infobox"); // position infobox our mouse infobox.style("left", (coord[0] + 100) + "px" ); infobox.style("top", (coord[1] - 175) + "px"); $(".infobox").html(d); $(".infobox").show(); } function hidedata() { $(".infobox").hide(); } var drawchart = function(data) { // define dimensions of graph var m = [10, 20, 10, 50]; // margins var w = 250 - m[1] - m[3]; // width var h = 100 - m[0] - m[2]; // height data.sort(function(a, b) { var d1 = getdate(a); var d2 = getdate(b); if (d1 == d2) return 0; if (d1 > d2) return 1; return -1; }); var mindate = getdate(data[0]), maxdate = getdate(data[data.length-1]); var x = d3.time.scale().domain([mindate, maxdate]).range([0, w]); var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingvalue; } )]).range([h, 0]); var line = d3.svg.line() .x(function(d, i) { return x(getdate(d)); //x(i); }) .y(function(d) { return y(d.trendingvalue); }); function xx(e) { return x(getdate(e)); }; function yy(e) { return y(e.trendingvalue); }; var graph = d3.select("#chart").append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); var xaxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).ticksize(-h).ticksubdivide(true); var yaxisleft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickformat(formallabel); graph .selectall("circle") .data(data) .enter().append("circle") .attr("fill", "steelblue") .attr("r", 5) .attr("cx", xx) .attr("cy", yy) .on("mouseover", function(d) { showdata(this, d.trendingvalue);}) .on("mouseout", function(){ hidedata();}); graph.append("svg:path").attr("d", line(data)); $("#graphdiv3").append("<div class='infobox' style='display:none;'>test</div>"); } drawchart(data); } }; } ]);
instead of mashing 2 blocks of code , hoping works, i'd recommend follow simple angular tutorials better grasp of basics. also, simple debugging have gone long way here.
- you not declare module.
- you not seem pass in data anywhere (like in controller doesn't exist).
- the function
drawchart, callingdrawchart - in directive, select div id of chart, doesn't exist. since it's directive , act on elements use
d3.select(element[0])
all said once work through these relatively simple mistakes, working code:
var myappmodule = angular.module('chart', []); angular.module('chart').controller('chartctrl', function ($scope) { $scope.mydata = [{ "date": "2015-10-01", "trendingvalue": "244" }, { "date": "2015-07-01", "trendingvalue": "0" }, { "date": "2015-06-01", "trendingvalue": "117" }, { "date": "2015-05-01", "trendingvalue": "5353" }, { "date": "2015-04-01", "trendingvalue": "11159" }, { "date": "2015-03-01", "trendingvalue": "7511" }, { "date": "2015-02-01", "trendingvalue": "6906" }, { "date": "2015-01-01", "trendingvalue": "10816" }, { "date": "2014-12-01", "trendingvalue": "3481" }, { "date": "2014-11-01", "trendingvalue": "1619" }, { "date": "2014-10-01", "trendingvalue": "4084" }, { "date": "2014-09-01", "trendingvalue": "1114" }]; }); angular.module('chart').directive('crd3bars', [ function() { return { restrict: 'e', scope: { data: '=' }, link: function(scope, element) { function getdate(d) { var dt = new date(d.date); dt.sethours(0); dt.setminutes(0); dt.setseconds(0); dt.setmilliseconds(0); return dt; } function showdata(obj, d) { var coord = d3.mouse(obj); var infobox = d3.select(".infobox"); // position infobox our mouse infobox.style("left", (coord[0] + 100) + "px"); infobox.style("top", (coord[1] - 175) + "px"); $(".infobox").html(d); $(".infobox").show(); } function hidedata() { $(".infobox").hide(); } var drawchart = function(data) { // define dimensions of graph var m = [10, 20, 10, 50]; // margins var w = 250 - m[1] - m[3]; // width var h = 100 - m[0] - m[2]; // height data.sort(function(a, b) { var d1 = getdate(a); var d2 = getdate(b); if (d1 == d2) return 0; if (d1 > d2) return 1; return -1; }); var mindate = getdate(data[0]), maxdate = getdate(data[data.length - 1]); var x = d3.time.scale().domain([mindate, maxdate]).range([0, w]); var y = d3.scale.linear().domain([0, d3.max(data, function(d) { return d.trendingvalue; })]).range([h, 0]); var line = d3.svg.line() .x(function(d, i) { return x(getdate(d)); //x(i); }) .y(function(d) { return y(d.trendingvalue); }); function xx(e) { return x(getdate(e)); } function yy(e) { return y(e.trendingvalue); } var graph = d3.select(element[0]).append("svg:svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("svg:g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); var xaxis = d3.svg.axis().scale(x).ticks(d3.time.months, 1).ticksize(-h).ticksubdivide(true); var yaxisleft = d3.svg.axis().scale(y).ticks(10).orient("left"); //.tickformat(formallabel); graph .selectall("circle") .data(data) .enter().append("circle") .attr("fill", "steelblue") .attr("r", 5) .attr("cx", xx) .attr("cy", yy) .on("mouseover", function(d) { showdata(this, d.trendingvalue); }) .on("mouseout", function() { hidedata(); }); graph.append("svg:path").attr("d", line(data)); $("#graphdiv3").append("<div class='infobox' style='display:none;'>test</div>"); }; drawchart(scope.data); } }; } ]);<!doctype html> <html ng-app="chart"> <head> <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script> <script src="script.js"></script> </head> <body> <div id="graphdiv3" ng-controller="chartctrl"> <cr-d3-bars data="mydata"></cr-d3-bars> </div> </body> </html>
Comments
Post a Comment