// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
// Set the ranges
var x = d3.time.scale().range([ 0, width ]);
var y = d3.scale.linear().range([ height, 0 ]);
// set the colour scale
var color = d3.scale.category10();
// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(5);
// Define the line
var valueline = d3.svg.line().x(function(d) {
return x(d.Date);
}).y(function(d) {
return y(d.Number);
});
// Adds the svg canvas
var canvas = d3.select("#chart").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 + ")");
var legend = d3.select("#legend");
// Get the data
d3
.json(
"app/module/esa/assignment-listing-details/testData.json",
function(data) {
var keys = [];
var counter = 0;
var set=[];
data.forEach(function(d) {
d.Date = parseDate(d.Date);
d.Number = +d.Number;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.Date;
}));
y.domain([ d3.min(data, function(d) {
return d.Number;
}), d3.max(data, function(d) {
return d.Number;
}) ]);
// Nest the entries by symbol
var dataNest = d3.nest().key(function(d) {
return d.Legend;
}).entries(data);
legendSpace = width / dataNest.length; // spacing for the legend
// Loop through each symbol / key
dataNest
.forEach(function(d, i) {
canvas.append("path").attr("class", "line")
.style("stroke", function() { // Add the colours dynamically
return d.color = color(d.key);
}).attr("id", 'tag' + d.key) // assign ID
.attr("d", valueline(d.values))
.attr("show","true");
// Add the Legend
canvas
.append("text")
.attr(
"x",
legendSpace / 2 + i
* legendSpace)
// space legend
.attr("y", height + 50)
.attr("class", "legend")
// style the legend
.style("fill", function() { // Add the colours dynamically
return d.color = color(d.key);
})
.on(
"click",
function() {
// Determine if current line is visible
var active = d.active ? false
: true, newOpacity = active ? 0
: 1;
// Hide or show the elements based on the ID
d3
.select(
"#tag"
+ d.key)
.style(
"opacity",
newOpacity);
// Update whether or not the elements are active
d.active = active;
}).text(d.key);
keys[counter] = d.key;
set[counter] = d;
$scope.legends[counter] ={name: d.key, maker: d.key, ticked: false};
counter++;
});
legend
.on("change",
function() {
var value = document.getElementById("legend").value;
var tag = document.getElementById("tag"+value);
var show = tag.getAttribute("show")
var newShow = true;
if(show == "true")
{
newShow = false;
}
else{
newShow = true;
}
var newOpacity = newShow ? 1 : 0 ;
// Hide or show the elements based on the ID
d3
.select(
"#tag"
+ value)
.style(
"opacity",
newOpacity);
// Update whether or not the elements are active
tag.setAttribute("show",newShow);
})
.selectAll("option").data(keys)
.enter().append("option")
.attr("id",String)
.text(String);
});
// Add the X Axis
canvas.append("g").attr("class", "x axis").attr(
"transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
canvas.append("g").attr("class", "y axis").call(yAxis);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent