var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
var chart;
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
top: 20,
right: 20,
bottom: 40,
left: 65
},
x: function(d){ return d.x; },
y: function(d){ return d.y; },
// useInteractiveGuideline: true,
xAxis: {
axisLabel: 'Time (ms)'
},
yAxis: {
axisLabel: 'Voltage (v)',
tickFormat: function(d){
return d3.format('.02f')(d);
},
axisLabelDistance: 5
},
callback: highlightPoints,
dispatch: {
renderEnd: function(){
highlightPoints(chart)
}
}
}
};
$scope.onReady = function(scope, el){
chart = scope.chart;
}
function highlightPoints(chart){
var data = d3.select('svg').datum();
d3.select('.nv-groups')
.selectAll("circle.myPoint")
.remove();
var points = d3.select('.nv-groups')
.selectAll("circle.myPoint")
.data(data[0].values.filter(function(d) { return d.y > 3000; }));
points.enter().append("circle")
.attr("class", "myPoint")
.attr("cx", function(d) { return chart.xAxis.scale()(d.x); })
.attr("cy", function(d) { return chart.yAxis.scale()(d.y); })
.attr("r", 5);
}
$scope.data = [{
"values": [{
"x": 0,
"y": 3235
}, {
"x": 173,
"y": 2114
}, {
"x": 347,
"y": 1724
}, {
"x": 526,
"y": 2703
}, {
"x": 700,
"y": 2980
}, {
"x": 931,
"y": 3086
}, {
"x": 1058,
"y": 2881
}, {
"x": 1220,
"y": 2817
}, {
"x": 1399,
"y": 2242
}, {
"x": 1584,
"y": 2639
}, {
"x": 1752,
"y": 3122
}, {
"x": 1983,
"y": 3157
}, {
"x": 2105,
"y": 3391
}, {
"x": 2284,
"y": 3441
}, {
"x": 2469,
"y": 3356
}, {
"x": 2637,
"y": 3498
}, {
"x": 2811,
"y": 3753
}, {
"x": 3042,
"y": 3384
}, {
"x": 3169,
"y": 3399
}, {
"x": 3331,
"y": 3399
}, {
"x": 3522,
"y": 2164
}, {
"x": 3690,
"y": 2129
}, {
"x": 3863,
"y": 2200
}, {
"x": 4095,
"y": 2292
}],
"key": "actual1",
"color": null
}, {
"values": [{
"x": 0,
"y": 341
}, {
"x": 173,
"y": 341
}, {
"x": 347,
"y": 341
}, {
"x": 526,
"y": 341
}, {
"x": 700,
"y": 341
}, {
"x": 931,
"y": 341
}, {
"x": 1058,
"y": 341
}, {
"x": 1220,
"y": 341
}, {
"x": 1399,
"y": 341
}, {
"x": 1584,
"y": 341
}, {
"x": 1752,
"y": 341
}, {
"x": 1983,
"y": 341
}, {
"x": 2105,
"y": 341
}, {
"x": 2284,
"y": 341
}, {
"x": 2469,
"y": 341
}, {
"x": 2637,
"y": 341
}, {
"x": 2811,
"y": 341
}, {
"x": 3042,
"y": 341
}, {
"x": 3169,
"y": 341
}, {
"x": 3331,
"y": 341
}, {
"x": 3522,
"y": 341
}, {
"x": 3690,
"y": 341
}, {
"x": 3863,
"y": 341
}, {
"x": 4095,
"y": 341
}],
"key": "trigger",
"color": "#f9b800"
}, {
"values": [{
"x": 0,
"y": 3232
}, {
"x": 173,
"y": 2100
}, {
"x": 347,
"y": 1700
}, {
"x": 526,
"y": 2689
}, {
"x": 700,
"y": 2976
}, {
"x": 931,
"y": 3081
}, {
"x": 1058,
"y": 2870
}, {
"x": 1220,
"y": 2810
}, {
"x": 1399,
"y": 2221
}, {
"x": 1584,
"y": 2628
}, {
"x": 1752,
"y": 3119
}, {
"x": 1983,
"y": 3157
}, {
"x": 2105,
"y": 3383
}, {
"x": 2284,
"y": 3436
}, {
"x": 2469,
"y": 3353
}, {
"x": 2637,
"y": 3489
}, {
"x": 2811,
"y": 3753
}, {
"x": 3042,
"y": 3383
}, {
"x": 3169,
"y": 3398
}, {
"x": 3331,
"y": 3398
}, {
"x": 3522,
"y": 2153
}, {
"x": 3690,
"y": 2107
}, {
"x": 3863,
"y": 2183
}, {
"x": 4095,
"y": 2273
}],
"key": "actual2",
"color": null
}, {
"values": [{
"x": 0,
"y": 341
}, {
"x": 173,
"y": 341
}, {
"x": 347,
"y": 341
}, {
"x": 526,
"y": 341
}, {
"x": 700,
"y": 341
}, {
"x": 931,
"y": 341
}, {
"x": 1058,
"y": 341
}, {
"x": 1220,
"y": 341
}, {
"x": 1399,
"y": 341
}, {
"x": 1584,
"y": 341
}, {
"x": 1752,
"y": 341
}, {
"x": 1983,
"y": 341
}, {
"x": 2105,
"y": 341
}, {
"x": 2284,
"y": 341
}, {
"x": 2469,
"y": 341
}, {
"x": 2637,
"y": 341
}, {
"x": 2811,
"y": 341
}, {
"x": 3042,
"y": 341
}, {
"x": 3169,
"y": 341
}, {
"x": 3331,
"y": 341
}, {
"x": 3522,
"y": 341
}, {
"x": 3690,
"y": 341
}, {
"x": 3863,
"y": 341
}, {
"x": 4095,
"y": 341
}],
"key": "trigger2",
"color": "#f9b800"
}, {
"values": [{
"x": 0,
"y": 2935
}, {
"x": 173,
"y": 1134
}, {
"x": 347,
"y": 504
}, {
"x": 526,
"y": 2078
}, {
"x": 700,
"y": 2519
}, {
"x": 931,
"y": 2696
}, {
"x": 1058,
"y": 2356
}, {
"x": 1220,
"y": 2267
}, {
"x": 1399,
"y": 1336
}, {
"x": 1584,
"y": 1978
}, {
"x": 1752,
"y": 2746
}, {
"x": 1983,
"y": 2809
}, {
"x": 2105,
"y": 3174
}, {
"x": 2284,
"y": 3262
}, {
"x": 2469,
"y": 3124
}, {
"x": 2637,
"y": 3350
}, {
"x": 2811,
"y": 3753
}, {
"x": 3042,
"y": 3174
}, {
"x": 3169,
"y": 3187
}, {
"x": 3331,
"y": 3187
}, {
"x": 3522,
"y": 1222
}, {
"x": 3690,
"y": 1159
}, {
"x": 3863,
"y": 1273
}, {
"x": 4095,
"y": 1411
}],
"key": "actual3",
"color": null
}, {
"values": [{
"x": 0,
"y": 341
}, {
"x": 173,
"y": 341
}, {
"x": 347,
"y": 341
}, {
"x": 526,
"y": 341
}, {
"x": 700,
"y": 341
}, {
"x": 931,
"y": 341
}, {
"x": 1058,
"y": 341
}, {
"x": 1220,
"y": 341
}, {
"x": 1399,
"y": 341
}, {
"x": 1584,
"y": 341
}, {
"x": 1752,
"y": 341
}, {
"x": 1983,
"y": 341
}, {
"x": 2105,
"y": 341
}, {
"x": 2284,
"y": 341
}, {
"x": 2469,
"y": 341
}, {
"x": 2637,
"y": 341
}, {
"x": 2811,
"y": 341
}, {
"x": 3042,
"y": 341
}, {
"x": 3169,
"y": 341
}, {
"x": 3331,
"y": 341
}, {
"x": 3522,
"y": 341
}, {
"x": 3690,
"y": 341
}, {
"x": 3863,
"y": 341
}, {
"x": 4095,
"y": 341
}],
"key": "trigger3",
"color": "#f9b800"
}, {
"values": [{
"x": 0,
"y": 2883
}, {
"x": 173,
"y": 1004
}, {
"x": 347,
"y": 341
}, {
"x": 526,
"y": 1985
}, {
"x": 700,
"y": 2455
}, {
"x": 931,
"y": 2634
}, {
"x": 1058,
"y": 2275
}, {
"x": 1220,
"y": 2178
}, {
"x": 1399,
"y": 1211
}, {
"x": 1584,
"y": 1874
}, {
"x": 1752,
"y": 2689
}, {
"x": 1983,
"y": 2759
}, {
"x": 2105,
"y": 3132
}, {
"x": 2284,
"y": 3228
}, {
"x": 2469,
"y": 3090
}, {
"x": 2637,
"y": 3311
}, {
"x": 2811,
"y": 3753
}, {
"x": 3042,
"y": 3132
}, {
"x": 3169,
"y": 3159
}, {
"x": 3331,
"y": 3159
}, {
"x": 3522,
"y": 1087
}, {
"x": 3690,
"y": 1018
}, {
"x": 3863,
"y": 1142
}, {
"x": 4095,
"y": 1294
}],
"key": "actual4",
"color": null
}, {
"values": [{
"x": 0,
"y": 1266
}, {
"x": 173,
"y": 1266
}, {
"x": 347,
"y": 1266
}, {
"x": 526,
"y": 1266
}, {
"x": 700,
"y": 1266
}, {
"x": 931,
"y": 1266
}, {
"x": 1058,
"y": 1266
}, {
"x": 1220,
"y": 1266
}, {
"x": 1399,
"y": 1266
}, {
"x": 1584,
"y": 1266
}, {
"x": 1752,
"y": 1266
}, {
"x": 1983,
"y": 1266
}, {
"x": 2105,
"y": 1266
}, {
"x": 2284,
"y": 1266
}, {
"x": 2469,
"y": 1266
}, {
"x": 2637,
"y": 1266
}, {
"x": 2811,
"y": 1266
}, {
"x": 3042,
"y": 1266
}, {
"x": 3169,
"y": 1266
}, {
"x": 3331,
"y": 1266
}, {
"x": 3522,
"y": 1266
}, {
"x": 3690,
"y": 1266
}, {
"x": 3863,
"y": 1266
}, {
"x": 4095,
"y": 1266
}],
"key": "trigger4",
"color": "#f9b800"
}];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>Angular-nvD3 Line Chart</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<link rel="stylesheet" href="style.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://rawgit.com/krispo/angular-nvd3/v1.0.5/dist/angular-nvd3.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data" on-ready="onReady" class="with-3d-shadow with-transitions"></nvd3>
<br><a href="http://krispo.github.io/angular-nvd3/" target="_blank" style="float: right;">See more</a>
</body>
</html>
/* Put your css in here */
.dashed {
stroke-dasharray: 5,5;
}
.nvd3.nv-scatter .nv-groups .nv-point.hover,
.nvd3 .nv-groups .nv-point.hover {
stroke-width: 20px !important;
fill-opacity: .5 !important;
stroke-opacity: .5 !important;
}
Read more about Angular-nvD3:
http://krispo.github.io/angular-nvd3/