Built with blockbuilder.org
forked from vikkya's block: multiline chart
license: mit |
Built with blockbuilder.org
forked from vikkya's block: multiline chart
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> /* set the CSS */ | |
body { font: 12px Arial;} | |
path { | |
stroke: steelblue; | |
stroke-width: 2; | |
fill: none; | |
} | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: grey; | |
stroke-width: 1; | |
shape-rendering: crispEdges; | |
} | |
.legend { | |
font-size: 16px; | |
font-weight: bold; | |
text-anchor: middle; | |
} | |
</style> | |
<body> | |
<!-- load the d3.js library --> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script> | |
// Set the dimensions of the canvas / graph | |
var margin = {top: 30, right: 20, bottom: 70, left: 50}, | |
width = 600 - margin.left - margin.right, | |
height = 300 - margin.top - margin.bottom; | |
// Set the ranges | |
var x = d3.scaleLinear().range([0, width]); | |
var y = d3.scaleLinear().range([height, 0]); | |
// Define the line | |
var line = d3.line() | |
.x(function(d) { return x(d.month); }) | |
.y(function(d) { return y(d.sales); }); | |
// Adds the svg canvas | |
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 + ")"); | |
// Get the data | |
d3.csv("stockes.csv", function(error, data) { | |
data.forEach(function(d) { | |
d.month = +d.month; | |
d.sales = +d.sales; | |
}); | |
// Scale the range of the data | |
x.domain([1, d3.max(data, function(d) { return d.month; })]).nice(); | |
y.domain([0, d3.max(data, function(d) { return d.sales; })]).nice(); | |
// Add the X Axis | |
svg.append("g") | |
.attr("class", "axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(d3.axisBottom(x)); | |
// Add the Y Axis | |
svg.append("g") | |
.attr("class", "axis") | |
.call(d3.axisLeft(y)); | |
// Nest the entries by series | |
var dataNest = d3.nest() | |
.key(function(d) {return d.series;}) | |
.entries(data); | |
// set the colour scale | |
var color = d3.scaleOrdinal(d3.schemeCategory10); | |
legendSpace = width/dataNest.length; // spacing for the legend | |
// Loop through each series / key | |
dataNest.forEach(function(d,i) { | |
svg.append("path") | |
.attr("class", "line") | |
.style("stroke", function() { // Add the colours dynamically | |
return d.color = color(d.key); }) | |
.attr("d", line(d.values)); | |
}); | |
}); | |
</script> | |
</body> |
series | month | sales | |
---|---|---|---|
series1 | 1 | 24.31 | |
series1 | 2 | 32.34 | |
series1 | 3 | 21.76 | |
series1 | 4 | 20.87 | |
series1 | 5 | 20.09 | |
series1 | 6 | 30.93 | |
series1 | 7 | 32.56 | |
series1 | 8 | 36.65 | |
series1 | 9 | 42.69 | |
series1 | 10 | 39.45 | |
series1 | 11 | 44.1 | |
series1 | 12 | 44.46 | |
series2 | 1 | 21.85 | |
series2 | 2 | 22.01 | |
series2 | 3 | 26.03 | |
series2 | 4 | 28.69 | |
series2 | 5 | 35.89 | |
series2 | 6 | 36.32 | |
series2 | 7 | 41.64 | |
series2 | 8 | 46.32 | |
series2 | 9 | 48.43 | |
series2 | 10 | 54.43 | |
series2 | 11 | 53.97 | |
series2 | 12 | 59.62 | |
series3 | 1 | 71.22 | |
series3 | 2 | 71.13 | |
series3 | 3 | 71.57 | |
series3 | 4 | 77.47 | |
series3 | 5 | 80.48 | |
series3 | 6 | 75.42 | |
series3 | 7 | 74.28 | |
series3 | 8 | 75.12 | |
series3 | 9 | 80.91 | |
series3 | 10 | 81.96 | |
series3 | 11 | 83.08 | |
series3 | 12 | 85.05 | |
series4 | 1 | 7.18 | |
series4 | 2 | 8.51 | |
series4 | 3 | 9.07 | |
series4 | 4 | 11.11 | |
series4 | 5 | 15.98 | |
series4 | 6 | 14.53 | |
series4 | 7 | 16.54 | |
series4 | 8 | 18.31 | |
series4 | 9 | 22.36 | |
series4 | 10 | 20.44 | |
series4 | 11 | 34.45 | |
series4 | 12 | 38.69 |