D3.js ordinal multi-series line chart: Nan at path - javascript

Please apologies if this seems like a duplicate D3 question. I've spent 2 days trying to figure out how to do this.
I'm trying to create a multi-line chart with the x-axis as an ordinal scale, and the y axis as a normal linear scale.
Data is loaded from external JSON:
[
{
"arbeitsgang":"A1",
"y":5,
"z":4
},
{
"arbeitsgang":"A2",
"y":6,
"z":11
},
{
"arbeitsgang":"A3",
"y":4,
"z":45
}
]
And here's where I've written for trying to create the 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: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"> </script>
<script>
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 50
},
width = 600 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1);
var y = d3.scale.linear().rangeRound([height, 0]);
var ordinalScale = d3.scale.ordinal();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
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 + ")");
var line = d3.svg.line()
.x(function(d) { return x(d.arbeitsgang); })
.y(function(d) { return y(d.koordinaten); });
d3.json("Arbeitsgang.json", function(error, data) {
ordinalScale.domain(d3.keys(data[0]).filter(function(key) { return key !== "arbeitsgang"; }));
data.forEach(function(d) {
d.arbeitsgang = d.arbeitsgang;
d.y = +d.y;
d.z = +d.z;
});
var arbeitsgange = ordinalScale.domain().map(function(name) {
return {
name: name,
values: data.map(function (d) {
return {arbeitsgang: d.arbeitsgang, koordinaten: +d[name]};
})
}
});
x.domain(d3.extent(data, function(d) { return d.arbeitsgang; }));
y.domain([
d3.min(arbeitsgange, function(c) { return d3.min(c.values, function(v) { return v.koordinaten; }); }),
d3.max(arbeitsgange, function(c) { return d3.max(c.values, function(v) { return v.koordinaten; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
var graphen = svg.selectAll(".graphen")
.data(arbeitsgange)
.enter().append("g")
.attr("class", "graphen");
graphen.forEach(function(d) {
console.log(d);
});
graphen.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values)});
});
</script>
</body>
So there seems to be 2 mistakes:
1. x-axis only got 2 ticks ( A1, A3) but A2 is missing
2. there is no graph visible.
With html dom profiler you can see that there are 2 graphs:
<path class="line" d="M26,254LNaN,247L278,260"/>
<path class="line" d="M26,260LNaN,216L278,0"/>
As you can see there is something with NaN inside. Maybe it is an error while parsing. I simply don't know.
Thanks for your help

While we are using 'rangeRoundBands' for x axis scale
var x = d3.scale.ordinal().rangeRoundBands([0, width],0.1); ,
we need to set domain with all the points,
I did like this
x.domain(['A1','A2','A3']/*d3.extent(data, function(d) { return d.arbeitsgang; })*/);
Go through with this link and the working fiddle.

Related

Is there a way to parse times and be able to plot them directly using javascript and d3?

How can I make a scatterplot plotting time of day against date, which looks like this in using javascript and d3? The problem I am having is formatting the time of day data and axis. Input of the date is in the y column format below.
Sample data:
Day Time
5-Feb-16 21:35:00
5-Feb-16 19:15:00
11-Dec-15 21:42:00
21-Jul-15 11:00:00
Code below inspired by:
http://bl.ocks.org/d3noob/38744a17f9c0141bcd04
What I have so far:
<!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;
}
</style>
<body>
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// 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]);
// 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.Day); })
.y(function(d) { return y(d.Time); });
// 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("data.csv", function(error, data) {
data.forEach(function(d) {
console.log(d.Time);
d.Day = parseDate(d.Day);
d.Time = +d.Time;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.Day; }));
y.domain([0, d3.max(data, function(d) { return d.Time; })]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.Day); })
.attr("cy", function(d) { return y(d.Time); });
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
</script>
</body>
My output:
Is there a way to parse times and be able to plot them directly using javascript and d3? Or do I need to convert them to decimal numbers like 12:30 = 12.5 to plot them?
If you're using time in the y scale, you should parse the Time column as well:
var parseDate = d3.time.format("%d-%b-%y").parse;
var parseTime = d3.time.format("%H:%M:%S").parse;
Here is your code with just 4 points (the ones of the CSV you copy/pasted in your question):
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 80
},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;
// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;
var parseTime = d3.time.format("%H:%M:%S").parse;
// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.time.scale().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left");
// Define the line
var valueline = d3.svg.line()
.x(function(d) {
return x(d.Day);
})
.y(function(d) {
return y(d.Time);
});
// 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
var data = d3.csv.parse(d3.select("#csv").text());
data.forEach(function(d) {
d.Day = parseDate(d.Day);
d.Time = parseTime(d.Time);
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.Day;
}));
y.domain([parseTime("00:00:01"), parseTime("23:59:59")]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.attr("cx", function(d) {
return x(d.Day);
})
.attr("cy", function(d) {
return y(d.Time);
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
pre {
display: none;
}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
<script src="//d3js.org/d3.v3.min.js"></script>
<pre id="csv">Day,Time
5-Feb-16,21:35:00
1-Feb-16,19:15:00
11-Dec-15,21:42:00
21-Jul-15,11:00:00</pre>

Unable to dispaly line graph using d3

var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
var x = d3.scale.linear().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function (d) {
return x(d.IP);
})
.y(function (d) {
return y(d.count);
});
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 + ")");
var data = [{
"IP": "192.168.12.1",
"count": "100"
}, {
"IP": "76.09.45.34",
"count": "200"
}, {
"IP": "34.91.23.76",
"count": "300"
}, {
"IP": "192.168.19.32",
"count": "400"
}, {
"IP": "192.168.10.89",
"count": "500"
}, {
"IP": "192.168.12.98",
"count": "600"
}];
data.forEach(function (d) {
d.IP = d.IP;
d.count = +d.count;
});
x.domain(d3.extent(data, function (d) {
return d.IP;
}));
y.domain([0, d3.max(data, function (d) {
return d.count;
})]);
svg.append("path")
.attr("d", valueline(data));
svg.append("g")
.attr("class", "x axis")
.data(data)
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.data(data);
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>
Please help me . I am stuck. I don't know how to get the x axis and the line graph using these codes. I am new to D3, so I am confused. Every time I make any more change the axis goes off. These are the last codes that I tried till now but I am only getting the y axis and its labels but no x axis and the line is also not getting drawn.
Please help me out. Thanks in advance.
Instead of Linear scale which expects only integer range so you need to use ordinal scale for x-axis.
var x = d3.scale.ordinal().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
x.domain(data.map(function(d) {
return d.IP;
}))
.rangeRoundBands([0, width], 0.1);
y.domain([0, d3.max(data, function (d) {
return d.count;
})]);
Here's your working code.
You have to use ordinal scales for x axis.
Ordinal scales have a discrete domain, such as a set of names or
categories.
Reference: https://github.com/d3/d3/wiki/Ordinal-Scales
Here is the working code snippet:
var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
};
var width = 600 - margin.left - margin.right;
var height = 270 - margin.top - margin.bottom;
var x = d3.scale.ordinal().rangePoints([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(5);
var valueline = d3.svg.line()
.x(function(d) {
return x(d.IP);
})
.y(function(d) {
return y(d.count);
});
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 + ")");
var data = [{
"IP": "192.168.12.1",
"count": "100"
}, {
"IP": "76.09.45.34",
"count": "200"
}, {
"IP": "34.91.23.76",
"count": "300"
}, {
"IP": "192.168.19.32",
"count": "400"
}, {
"IP": "192.168.10.89",
"count": "500"
}, {
"IP": "192.168.12.98",
"count": "600"
}];
data.forEach(function(d) {
d.IP = d.IP;
d.count = +d.count;
});
x.domain(data.map(function(d) {
return d.IP
}));
y.domain([0, d3.max(data, function(d) {
return d.count;
})]);
svg.append("path")
.attr("d", valueline(data));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
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;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
</body>
</html>

d3.js x axis specific number of string ticks

I am trying to generate a area chart with a x axis set to fixed number of ticks (10) where each tick is a string value from the data set used for the chart. I can't figure out what I am doing wrong here:
<!DOCTYPE html>
<meta charset="utf - 8">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<style>
body {
font: 10px Arial;
}
.axis path {
fill: none;
stroke: grey;
shape-rendering: crispEdges;
}
.axis text {
font-family: Arial;
font-size: 10px;
}
.axis line {
fill: none;
stroke: grey;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
</head>
<div class="row">
<div class="col-md-12" id="areaareaChart1" align="center">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
function renderAreaChart() {
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 1600 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangePoints([0, width], 1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.ticks(10)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.name); })
.y(function (d) { return y(d.value); });
var area = d3.svg.area()
.x(function (d) { return x(d.name); })
.y0(height)
.y1(function (d) { return y(d.value); });
var svg = d3.select("#areaareaChart1").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 data = [{"name":"23-May-08","value":181.17},{"name":"27-May-08","value":186.43},{"name":"28-May-08","value":187.01},{"name":"29-May-08","value":186.69},{"name":"30-May-08","value":188.75},{"name":"2-Jun-08","value":186.1},{"name":"3-Jun-08","value":185.37},{"name":"4-Jun-08","value":185.19},{"name":"5-Jun-08","value":189.43},{"name":"6-Jun-08","value":185.64},{"name":"9-Jun-08","value":181.61},{"name":"10-Jun-08","value":185.64},{"name":"11-Jun-08","value":180.81},{"name":"12-Jun-08","value":173.26},{"name":"13-Jun-08","value":172.37},{"name":"16-Jun-08","value":176.84},{"name":"17-Jun-08","value":181.43},{"name":"18-Jun-08","value":178.75},{"name":"19-Jun-08","value":180.9},{"name":"20-Jun-08","value":175.27},{"name":"23-Jun-08","value":173.16},{"name":"24-Jun-08","value":173.25},{"name":"25-Jun-08","value":177.39},{"name":"26-Jun-08","value":168.26},{"name":"27-Jun-08","value":170.09},{"name":"30-Jun-08","value":167.44},{"name":"1-Jul-08","value":174.68},{"name":"2-Jul-08","value":168.18},{"name":"3-Jul-08","value":170.12},{"name":"7-Jul-08","value":175.16},{"name":"8-Jul-08","value":179.55},{"name":"9-Jul-08","value":174.25},{"name":"10-Jul-08","value":176.63},{"name":"11-Jul-08","value":172.58},{"name":"14-Jul-08","value":173.88},{"name":"15-Jul-08","value":169.64},{"name":"16-Jul-08","value":172.81},{"name":"17-Jul-08","value":171.81},{"name":"18-Jul-08","value":165.15},{"name":"21-Jul-08","value":166.29},{"name":"22-Jul-08","value":162.02},{"name":"23-Jul-08","value":166.26},{"name":"24-Jul-08","value":159.03},{"name":"25-Jul-08","value":162.12},{"name":"28-Jul-08","value":154.4},{"name":"29-Jul-08","value":157.08},{"name":"30-Jul-08","value":159.88},{"name":"31-Jul-08","value":158.95},{"name":"1-Aug-08","value":156.66},{"name":"4-Aug-08","value":153.23},{"name":"5-Aug-08","value":160.64},{"name":"6-Aug-08","value":164.19},{"name":"7-Aug-08","value":163.57},{"name":"8-Aug-08","value":169.55},{"name":"11-Aug-08","value":173.56},{"name":"12-Aug-08","value":176.73},{"name":"13-Aug-08","value":179.3},{"name":"14-Aug-08","value":179.32},{"name":"15-Aug-08","value":175.74},{"name":"18-Aug-08","value":175.39},{"name":"19-Aug-08","value":173.53},{"name":"20-Aug-08","value":175.84},{"name":"21-Aug-08","value":174.29},{"name":"22-Aug-08","value":176.79},{"name":"25-Aug-08","value":172.55},{"name":"26-Aug-08","value":173.64},{"name":"27-Aug-08","value":174.67},{"name":"28-Aug-08","value":173.74},{"name":"29-Aug-08","value":169.53},{"name":"2-Sep-08","value":166.19},{"name":"3-Sep-08","value":166.96},{"name":"4-Sep-08","value":161.22},{"name":"5-Sep-08","value":160.18},{"name":"8-Sep-08","value":157.92},{"name":"9-Sep-08","value":151.68},{"name":"10-Sep-08","value":151.61},{"name":"11-Sep-08","value":152.65},{"name":"12-Sep-08","value":148.94},{"name":"15-Sep-08","value":140.36},{"name":"16-Sep-08","value":139.88},{"name":"17-Sep-08","value":127.83},{"name":"18-Sep-08","value":134.09},{"name":"19-Sep-08","value":140.91},{"name":"22-Sep-08","value":131.05},{"name":"23-Sep-08","value":126.84},{"name":"24-Sep-08","value":128.71},{"name":"25-Sep-08","value":131.93},{"name":"26-Sep-08","value":128.24},{"name":"29-Sep-08","value":105.26},{"name":"30-Sep-08","value":113.66},{"name":"1-Oct-08","value":109.12},{"name":"2-Oct-08","value":100.1},{"name":"3-Oct-08","value":97.07},{"name":"6-Oct-08","value":98.14},{"name":"7-Oct-08","value":89.16},{"name":"8-Oct-08","value":89.79},{"name":"9-Oct-08","value":88.74},{"name":"10-Oct-08","value":96.8},{"name":"13-Oct-08","value":110.26},{"name":"14-Oct-08","value":104.08},{"name":"15-Oct-08","value":97.95},{"name":"16-Oct-08","value":101.89},{"name":"17-Oct-08","value":97.4},{"name":"20-Oct-08","value":98.44},{"name":"21-Oct-08","value":91.49},{"name":"22-Oct-08","value":96.87},{"name":"23-Oct-08","value":98.23},{"name":"24-Oct-08","value":96.38},{"name":"27-Oct-08","value":92.09},{"name":"28-Oct-08","value":99.91},{"name":"29-Oct-08","value":104.55},{"name":"30-Oct-08","value":111.04},{"name":"31-Oct-08","value":107.59},{"name":"3-Nov-08","value":106.96},{"name":"4-Nov-08","value":110.99},{"name":"5-Nov-08","value":103.3},{"name":"6-Nov-08","value":99.1},{"name":"7-Nov-08","value":98.24},{"name":"10-Nov-08","value":95.88},{"name":"11-Nov-08","value":94.77},{"name":"12-Nov-08","value":90.12},{"name":"13-Nov-08","value":96.44},{"name":"14-Nov-08","value":90.24},{"name":"17-Nov-08","value":88.14},{"name":"18-Nov-08","value":89.91},{"name":"19-Nov-08","value":86.29},{"name":"20-Nov-08","value":80.49},{"name":"21-Nov-08","value":82.58},{"name":"24-Nov-08","value":92.95},{"name":"25-Nov-08","value":90.8},{"name":"26-Nov-08","value":95},{"name":"27-Nov-08","value":95},{"name":"28-Nov-08","value":92.67},{"name":"1-Dec-08","value":88.93},{"name":"2-Dec-08","value":92.47},{"name":"3-Dec-08","value":95.9},{"name":"4-Dec-08","value":91.41},{"name":"5-Dec-08","value":94},{"name":"8-Dec-08","value":99.72},{"name":"9-Dec-08","value":100.06},{"name":"10-Dec-08","value":98.21},{"name":"11-Dec-08","value":95},{"name":"12-Dec-08","value":98.27},{"name":"15-Dec-08","value":94.75},{"name":"16-Dec-08","value":95.43},{"name":"17-Dec-08","value":89.16},{"name":"18-Dec-08","value":89.43},{"name":"19-Dec-08","value":90},{"name":"22-Dec-08","value":85.74},{"name":"23-Dec-08","value":86.38},{"name":"24-Dec-08","value":85.04},{"name":"25-Dec-08","value":85.04},{"name":"26-Dec-08","value":85.81},{"name":"29-Dec-08","value":86.61},{"name":"30-Dec-08","value":86.29},{"name":"31-Dec-08","value":85.35},{"name":"1-Jan-09","value":85.35},{"name":"2-Jan-09","value":90.75},{"name":"5-Jan-09","value":94.58},{"name":"6-Jan-09","value":93.02},{"name":"7-Jan-09","value":91.01},{"name":"8-Jan-09","value":92.7},{"name":"9-Jan-09","value":90.58},{"name":"12-Jan-09","value":88.66},{"name":"13-Jan-09","value":87.71},{"name":"14-Jan-09","value":85.33},{"name":"15-Jan-09","value":83.38},{"name":"16-Jan-09","value":82.33},{"name":"20-Jan-09","value":78.2},{"name":"21-Jan-09","value":82.83},{"name":"22-Jan-09","value":88.36},{"name":"23-Jan-09","value":88.36},{"name":"26-Jan-09","value":89.64},{"name":"27-Jan-09","value":90.73},{"name":"28-Jan-09","value":94.2},{"name":"29-Jan-09","value":93},{"name":"30-Jan-09","value":90.13},{"name":"2-Feb-09","value":91.51},{"name":"3-Feb-09","value":92.98},{"name":"4-Feb-09","value":93.55},{"name":"5-Feb-09","value":96.46},{"name":"6-Feb-09","value":99.72},{"name":"9-Feb-09","value":102.51},{"name":"10-Feb-09","value":97.83},{"name":"11-Feb-09","value":96.82},{"name":"12-Feb-09","value":99.27},{"name":"13-Feb-09","value":99.16},{"name":"17-Feb-09","value":94.53},{"name":"18-Feb-09","value":94.37},{"name":"19-Feb-09","value":90.64},{"name":"20-Feb-09","value":91.2},{"name":"23-Feb-09","value":86.95},{"name":"24-Feb-09","value":90.25},{"name":"25-Feb-09","value":91.16},{"name":"26-Feb-09","value":89.19},{"name":"27-Feb-09","value":89.31},{"name":"2-Mar-09","value":87.94},{"name":"3-Mar-09","value":88.37},{"name":"4-Mar-09","value":91.17},{"name":"5-Mar-09","value":88.84},{"name":"6-Mar-09","value":85.3},{"name":"9-Mar-09","value":83.11},{"name":"10-Mar-09","value":88.63},{"name":"11-Mar-09","value":92.68},{"name":"12-Mar-09","value":96.35},{"name":"13-Mar-09","value":95.93},{"name":"16-Mar-09","value":95.42},{"name":"17-Mar-09","value":99.66},{"name":"18-Mar-09","value":101.52},{"name":"19-Mar-09","value":101.62},{"name":"20-Mar-09","value":101.59},{"name":"23-Mar-09","value":107.66},{"name":"24-Mar-09","value":106.5},{"name":"25-Mar-09","value":106.49},{"name":"26-Mar-09","value":109.87},{"name":"27-Mar-09","value":106.85},{"name":"30-Mar-09","value":104.49},{"name":"31-Mar-09","value":105.12},{"name":"1-Apr-09","value":108.69},{"name":"2-Apr-09","value":112.71},{"name":"3-Apr-09","value":115.99},{"name":"6-Apr-09","value":118.45},{"name":"7-Apr-09","value":115},{"name":"8-Apr-09","value":116.32},{"name":"9-Apr-09","value":119.57},{"name":"10-Apr-09","value":119.57},{"name":"13-Apr-09","value":120.22},{"name":"14-Apr-09","value":118.31},{"name":"15-Apr-09","value":117.64},{"name":"16-Apr-09","value":121.45},{"name":"17-Apr-09","value":123.42},{"name":"20-Apr-09","value":120.5},{"name":"21-Apr-09","value":121.76},{"name":"22-Apr-09","value":121.51},{"name":"23-Apr-09","value":125.4},{"name":"24-Apr-09","value":123.9},{"name":"27-Apr-09","value":124.73},{"name":"28-Apr-09","value":123.9},{"name":"29-Apr-09","value":125.14},{"name":"30-Apr-09","value":125.83},{"name":"1-May-09","value":127.24},{"name":"4-May-09","value":132.07},{"name":"5-May-09","value":132.71},{"name":"6-May-09","value":132.5},{"name":"7-May-09","value":129.06},{"name":"8-May-09","value":129.19},{"name":"11-May-09","value":129.57},{"name":"12-May-09","value":124.42},{"name":"13-May-09","value":119.49},{"name":"14-May-09","value":122.95},{"name":"15-May-09","value":122.42},{"name":"18-May-09","value":126.65},{"name":"19-May-09","value":127.45},{"name":"20-May-09","value":125.87},{"name":"21-May-09","value":124.18},{"name":"22-May-09","value":122.5},{"name":"26-May-09","value":130.78},{"name":"27-May-09","value":133.05},{"name":"28-May-09","value":135.07},{"name":"29-May-09","value":135.81},{"name":"1-Jun-09","value":139.35},{"name":"2-Jun-09","value":139.49},{"name":"3-Jun-09","value":140.95},{"name":"4-Jun-09","value":143.74},{"name":"5-Jun-09","value":144.67},{"name":"8-Jun-09","value":143.85},{"name":"9-Jun-09","value":142.72},{"name":"10-Jun-09","value":140.25},{"name":"11-Jun-09","value":139.95},{"name":"12-Jun-09","value":136.97},{"name":"15-Jun-09","value":136.09},{"name":"16-Jun-09","value":136.35},{"name":"17-Jun-09","value":135.58},{"name":"18-Jun-09","value":135.88},{"name":"19-Jun-09","value":139.48},{"name":"22-Jun-09","value":137.37},{"name":"23-Jun-09","value":134.01},{"name":"24-Jun-09","value":136.22},{"name":"25-Jun-09","value":139.86},{"name":"26-Jun-09","value":142.44},{"name":"29-Jun-09","value":141.97},{"name":"30-Jun-09","value":142.43},{"name":"1-Jul-09","value":142.83},{"name":"2-Jul-09","value":140.02},{"name":"3-Jul-09","value":140.02},{"name":"6-Jul-09","value":138.61},{"name":"7-Jul-09","value":135.4},{"name":"8-Jul-09","value":137.22},{"name":"9-Jul-09","value":136.36},{"name":"10-Jul-09","value":138.52},{"name":"13-Jul-09","value":142.34},{"name":"14-Jul-09","value":142.27},{"name":"15-Jul-09","value":146.88},{"name":"16-Jul-09","value":147.52},{"name":"17-Jul-09","value":151.75},{"name":"20-Jul-09","value":152.91},{"name":"21-Jul-09","value":151.51},{"name":"22-Jul-09","value":156.74},{"name":"23-Jul-09","value":157.82},{"name":"24-Jul-09","value":159.99},{"name":"27-Jul-09","value":160.1},{"name":"28-Jul-09","value":160},{"name":"29-Jul-09","value":160.03},{"name":"30-Jul-09","value":162.79},{"name":"31-Jul-09","value":163.39},{"name":"3-Aug-09","value":166.43},{"name":"4-Aug-09","value":165.55},{"name":"5-Aug-09","value":165.11},{"name":"6-Aug-09","value":163.91},{"name":"7-Aug-09","value":165.51},{"name":"10-Aug-09","value":164.72},{"name":"12-Aug-09","value":165.31},{"name":"13-Aug-09","value":168.42},{"name":"14-Aug-09","value":166.78},{"name":"17-Aug-09","value":159.59},{"name":"18-Aug-09","value":164},{"name":"19-Aug-09","value":164.6},{"name":"20-Aug-09","value":166.33},{"name":"21-Aug-09","value":169.22},{"name":"24-Aug-09","value":169.06},{"name":"25-Aug-09","value":169.4},{"name":"26-Aug-09","value":167.41},{"name":"27-Aug-09","value":169.45},{"name":"28-Aug-09","value":170.05},{"name":"31-Aug-09","value":168.21},{"name":"1-Sep-09","value":165.3},{"name":"2-Sep-09","value":165.18},{"name":"3-Sep-09","value":166.55},{"name":"4-Sep-09","value":170.31},{"name":"8-Sep-09","value":172.93},{"name":"9-Sep-09","value":171.14},{"name":"10-Sep-09","value":172.56},{"name":"11-Sep-09","value":172.16},{"name":"14-Sep-09","value":173.72},{"name":"15-Sep-09","value":175.16},{"name":"16-Sep-09","value":181.87},{"name":"17-Sep-09","value":184.55},{"name":"18-Sep-09","value":185.02},{"name":"21-Sep-09","value":184.02},{"name":"22-Sep-09","value":184.48},{"name":"23-Sep-09","value":185.5},{"name":"24-Sep-09","value":183.82},{"name":"25-Sep-09","value":182.37},{"name":"28-Sep-09","value":186.15},{"name":"29-Sep-09","value":185.38},{"name":"30-Sep-09","value":185.35},{"name":"1-Oct-09","value":180.86},{"name":"2-Oct-09","value":184.9},{"name":"5-Oct-09","value":186.02},{"name":"6-Oct-09","value":190.01},{"name":"7-Oct-09","value":190.25},{"name":"8-Oct-09","value":189.27},{"name":"9-Oct-09","value":190.47},{"name":"12-Oct-09","value":190.81},{"name":"13-Oct-09","value":190.02},{"name":"14-Oct-09","value":191.29},{"name":"15-Oct-09","value":190.56},{"name":"16-Oct-09","value":188.05},{"name":"19-Oct-09","value":189.86},{"name":"20-Oct-09","value":198.76},{"name":"21-Oct-09","value":204.92},{"name":"22-Oct-09","value":205.2},{"name":"23-Oct-09","value":203.94},{"name":"26-Oct-09","value":202.48},{"name":"27-Oct-09","value":197.37},{"name":"28-Oct-09","value":192.4},{"name":"29-Oct-09","value":196.35},{"name":"30-Oct-09","value":188.5},{"name":"2-Nov-09","value":189.31},{"name":"3-Nov-09","value":188.75},{"name":"4-Nov-09","value":190.81},{"name":"5-Nov-09","value":194.03},{"name":"6-Nov-09","value":194.34},{"name":"9-Nov-09","value":201.46},{"name":"10-Nov-09","value":202.98},{"name":"11-Nov-09","value":203.25},{"name":"12-Nov-09","value":201.99},{"name":"13-Nov-09","value":204.45},{"name":"16-Nov-09","value":206.63},{"name":"17-Nov-09","value":207},{"name":"18-Nov-09","value":205.96},{"name":"19-Nov-09","value":200.51},{"name":"20-Nov-09","value":199.92},{"name":"23-Nov-09","value":205.88},{"name":"24-Nov-09","value":204.44},{"name":"25-Nov-09","value":204.19},{"name":"26-Nov-09","value":204.19},{"name":"27-Nov-09","value":200.59},{"name":"30-Nov-09","value":199.91},{"name":"1-Dec-09","value":196.97},{"name":"2-Dec-09","value":196.23},{"name":"3-Dec-09","value":196.48},{"name":"4-Dec-09","value":193.32},{"name":"7-Dec-09","value":188.95},{"name":"8-Dec-09","value":189.87},{"name":"9-Dec-09","value":197.8},{"name":"10-Dec-09","value":196.43},{"name":"11-Dec-09","value":194.67},{"name":"14-Dec-09","value":196.98},{"name":"15-Dec-09","value":194.17},{"name":"16-Dec-09","value":195.03},{"name":"17-Dec-09","value":191.86},{"name":"18-Dec-09","value":195.43},{"name":"21-Dec-09","value":198.23},{"name":"22-Dec-09","value":200.36},{"name":"23-Dec-09","value":202.1},{"name":"24-Dec-09","value":209.04},{"name":"25-Dec-09","value":209.04},{"name":"28-Dec-09","value":211.61},{"name":"29-Dec-09","value":209.1},{"name":"30-Dec-09","value":211.64},{"name":"31-Dec-09","value":210.73},{"name":"1-Jan-10","value":210.73},{"name":"4-Jan-10","value":214.01},{"name":"5-Jan-10","value":214.38},{"name":"6-Jan-10","value":210.97},{"name":"7-Jan-10","value":210.58},{"name":"8-Jan-10","value":211.98},{"name":"11-Jan-10","value":210.11},{"name":"12-Jan-10","value":207.72},{"name":"13-Jan-10","value":210.65},{"name":"14-Jan-10","value":209.43},{"name":"15-Jan-10","value":205.93},{"name":"18-Jan-10","value":205.93},{"name":"19-Jan-10","value":215.04},{"name":"20-Jan-10","value":211.72},{"name":"21-Jan-10","value":208.07},{"name":"22-Jan-10","value":197.75},{"name":"25-Jan-10","value":203.08},{"name":"26-Jan-10","value":205.94},{"name":"27-Jan-10","value":207.88},{"name":"28-Jan-10","value":199.29},{"name":"29-Jan-10","value":192.06},{"name":"1-Feb-10","value":194.73},{"name":"2-Feb-10","value":195.86},{"name":"3-Feb-10","value":199.23},{"name":"4-Feb-10","value":192.05},{"name":"5-Feb-10","value":195.46},{"name":"8-Feb-10","value":194.12},{"name":"9-Feb-10","value":196.19},{"name":"10-Feb-10","value":195.12},{"name":"11-Feb-10","value":198.67},{"name":"12-Feb-10","value":200.38},{"name":"15-Feb-10","value":200.38},{"name":"16-Feb-10","value":203.4},{"name":"17-Feb-10","value":202.55},{"name":"18-Feb-10","value":202.93},{"name":"19-Feb-10","value":201.67},{"name":"22-Feb-10","value":200.42},{"name":"23-Feb-10","value":197.06},{"name":"24-Feb-10","value":200.66},{"name":"25-Feb-10","value":202},{"name":"26-Feb-10","value":204.62},{"name":"1-Mar-10","value":208.99},{"name":"2-Mar-10","value":208.85},{"name":"3-Mar-10","value":209.33},{"name":"4-Mar-10","value":210.71},{"name":"5-Mar-10","value":218.95},{"name":"8-Mar-10","value":219.08},{"name":"9-Mar-10","value":223.02},{"name":"10-Mar-10","value":224.84},{"name":"11-Mar-10","value":225.5},{"name":"12-Mar-10","value":226.6},{"name":"15-Mar-10","value":223.84},{"name":"16-Mar-10","value":224.45},{"name":"17-Mar-10","value":224.12},{"name":"18-Mar-10","value":224.65},{"name":"19-Mar-10","value":222.25},{"name":"22-Mar-10","value":224.75},{"name":"23-Mar-10","value":228.36},{"name":"24-Mar-10","value":229.37},{"name":"25-Mar-10","value":226.65},{"name":"26-Mar-10","value":230.9},{"name":"29-Mar-10","value":232.39},{"name":"30-Mar-10","value":235.84},{"name":"31-Mar-10","value":235},{"name":"1-Apr-10","value":235.97},{"name":"2-Apr-10","value":235.97},{"name":"5-Apr-10","value":238.49},{"name":"6-Apr-10","value":239.54},{"name":"7-Apr-10","value":240.6},{"name":"8-Apr-10","value":239.95},{"name":"9-Apr-10","value":241.79},{"name":"12-Apr-10","value":242.29},{"name":"13-Apr-10","value":242.43},{"name":"14-Apr-10","value":245.69},{"name":"15-Apr-10","value":248.92},{"name":"16-Apr-10","value":247.4},{"name":"19-Apr-10","value":247.07},{"name":"20-Apr-10","value":244.59},{"name":"21-Apr-10","value":259.22},{"name":"22-Apr-10","value":266.47},{"name":"23-Apr-10","value":270.83},{"name":"26-Apr-10","value":269.5},{"name":"27-Apr-10","value":262.04},{"name":"28-Apr-10","value":261.6},{"name":"29-Apr-10","value":268.64},{"name":"30-Apr-10","value":261.09},{"name":"3-May-10","value":266.35},{"name":"4-May-10","value":258.68},{"name":"5-May-10","value":255.98},{"name":"6-May-10","value":246.25},{"name":"7-May-10","value":235.86},{"name":"10-May-10","value":253.99},{"name":"11-May-10","value":256.52},{"name":"12-May-10","value":262.09},{"name":"13-May-10","value":258.36},{"name":"14-May-10","value":253.82},{"name":"17-May-10","value":254.22},{"name":"18-May-10","value":252.36},{"name":"19-May-10","value":248.34},{"name":"20-May-10","value":237.76},{"name":"21-May-10","value":242.32},{"name":"24-May-10","value":246.76},{"name":"25-May-10","value":245.22},{"name":"26-May-10","value":244.11},{"name":"27-May-10","value":253.35},{"name":"28-May-10","value":256.88},{"name":"31-May-10","value":256.88},{"name":"1-Jun-10","value":260.83},{"name":"2-Jun-10","value":263.95},{"name":"3-Jun-10","value":263.12},{"name":"4-Jun-10","value":255.96},{"name":"7-Jun-10","value":250.94},{"name":"8-Jun-10","value":249.33},{"name":"9-Jun-10","value":243.2},{"name":"10-Jun-10","value":250.51},{"name":"11-Jun-10","value":253.51},{"name":"20-Dec-10","value":322.21},{"name":"21-Dec-10","value":324.2},{"name":"22-Dec-10","value":325.16},{"name":"23-Dec-10","value":323.6},{"name":"27-Dec-10","value":324.68},{"name":"28-Dec-10","value":325.47},{"name":"29-Dec-10","value":325.29},{"name":"30-Dec-10","value":323.66},{"name":"31-Dec-10","value":322.56},{"name":"3-Jan-11","value":329.57},{"name":"4-Jan-11","value":331.29},{"name":"5-Jan-11","value":334},{"name":"6-Jan-11","value":333.73},{"name":"7-Jan-11","value":336.12},{"name":"10-Jan-11","value":342.46},{"name":"11-Jan-11","value":341.64},{"name":"12-Jan-11","value":344.42},{"name":"13-Jan-11","value":345.68},{"name":"14-Jan-11","value":348.48},{"name":"18-Jan-11","value":340.65},{"name":"19-Jan-11","value":338.84},{"name":"20-Jan-11","value":332.68},{"name":"21-Jan-11","value":326.72},{"name":"24-Jan-11","value":337.45},{"name":"25-Jan-11","value":341.4},{"name":"26-Jan-11","value":343.85},{"name":"27-Jan-11","value":343.21},{"name":"28-Jan-11","value":336.1},{"name":"31-Jan-11","value":339.32},{"name":"1-Feb-11","value":345.03},{"name":"2-Feb-11","value":344.32},{"name":"3-Feb-11","value":343.44},{"name":"4-Feb-11","value":346.5},{"name":"7-Feb-11","value":351.88},{"name":"8-Feb-11","value":355.2},{"name":"9-Feb-11","value":358.16},{"name":"10-Feb-11","value":354.54},{"name":"11-Feb-11","value":356.85},{"name":"14-Feb-11","value":359.18},{"name":"15-Feb-11","value":359.9},{"name":"16-Feb-11","value":363.13},{"name":"17-Feb-11","value":358.3},{"name":"18-Feb-11","value":350.56},{"name":"22-Feb-11","value":338.61},{"name":"23-Feb-11","value":342.62},{"name":"24-Feb-11","value":342.88},{"name":"25-Feb-11","value":348.16},{"name":"28-Feb-11","value":353.21},{"name":"1-Mar-11","value":349.31},{"name":"2-Mar-11","value":352.12},{"name":"3-Mar-11","value":359.56},{"name":"4-Mar-11","value":360},{"name":"7-Mar-11","value":355.36},{"name":"8-Mar-11","value":355.76},{"name":"9-Mar-11","value":352.47},{"name":"10-Mar-11","value":346.67},{"name":"11-Mar-11","value":351.99},{"name":"14-Mar-11","value":353.56},{"name":"15-Mar-11","value":345.43},{"name":"16-Mar-11","value":330.01},{"name":"17-Mar-11","value":334.64},{"name":"18-Mar-11","value":330.67},{"name":"21-Mar-11","value":339.3},{"name":"22-Mar-11","value":341.2},{"name":"23-Mar-11","value":339.19},{"name":"24-Mar-11","value":344.97},{"name":"25-Mar-11","value":351.54},{"name":"28-Mar-11","value":350.44},{"name":"29-Mar-11","value":350.96},{"name":"30-Mar-11","value":348.63},{"name":"31-Mar-11","value":348.51},{"name":"1-Apr-11","value":344.56},{"name":"4-Apr-11","value":341.19},{"name":"5-Apr-11","value":338.89},{"name":"6-Apr-11","value":338.04},{"name":"7-Apr-11","value":338.08},{"name":"8-Apr-11","value":335.06},{"name":"11-Apr-11","value":330.8},{"name":"12-Apr-11","value":332.4},{"name":"13-Apr-11","value":336.13},{"name":"14-Apr-11","value":332.42},{"name":"15-Apr-11","value":327.46},{"name":"18-Apr-11","value":331.85},{"name":"19-Apr-11","value":337.86},{"name":"20-Apr-11","value":342.41},{"name":"21-Apr-11","value":350.7},{"name":"25-Apr-11","value":353.01},{"name":"26-Apr-11","value":350.42},{"name":"27-Apr-11","value":350.15},{"name":"28-Apr-11","value":346.75},{"name":"29-Apr-11","value":350.13},{"name":"2-May-11","value":346.28},{"name":"3-May-11","value":348.2},{"name":"4-May-11","value":349.57},{"name":"5-May-11","value":346.75},{"name":"6-May-11","value":346.66},{"name":"9-May-11","value":347.6},{"name":"10-May-11","value":349.45},{"name":"11-May-11","value":347.23},{"name":"12-May-11","value":346.57},{"name":"13-May-11","value":340.5},{"name":"16-May-11","value":333.3},{"name":"17-May-11","value":336.14},{"name":"18-May-11","value":339.87},{"name":"19-May-11","value":340.53},{"name":"20-May-11","value":335.22},{"name":"23-May-11","value":334.4},{"name":"24-May-11","value":332.19},{"name":"25-May-11","value":336.78},{"name":"26-May-11","value":335},{"name":"27-May-11","value":337.41},{"name":"31-May-11","value":347.83},{"name":"1-Jun-11","value":345.51},{"name":"2-Jun-11","value":346.1},{"name":"3-Jun-11","value":343.44},{"name":"6-Jun-11","value":338.04},{"name":"7-Jun-11","value":332.04},{"name":"8-Jun-11","value":332.24},{"name":"9-Jun-11","value":331.49},{"name":"10-Jun-11","value":325.9},{"name":"13-Jun-11","value":326.6},{"name":"14-Jun-11","value":332.44},{"name":"15-Jun-11","value":326.75},{"name":"16-Jun-11","value":325.16},{"name":"17-Jun-11","value":320.26},{"name":"20-Jun-11","value":315.32},{"name":"21-Jun-11","value":325.3},{"name":"22-Jun-11","value":322.61},{"name":"23-Jun-11","value":331.23},{"name":"24-Jun-11","value":326.35},{"name":"27-Jun-11","value":332.04},{"name":"28-Jun-11","value":335.26},{"name":"29-Jun-11","value":334.04},{"name":"30-Jun-11","value":335.67},{"name":"1-Jul-11","value":343.26},{"name":"5-Jul-11","value":349.43},{"name":"6-Jul-11","value":351.76},{"name":"7-Jul-11","value":357.2},{"name":"8-Jul-11","value":359.71},{"name":"11-Jul-11","value":354},{"name":"12-Jul-11","value":353.75},{"name":"13-Jul-11","value":358.02},{"name":"14-Jul-11","value":357.77},{"name":"15-Jul-11","value":364.92},{"name":"13-Oct-11","value":408.43},{"name":"14-Oct-11","value":422},{"name":"17-Oct-11","value":419.99},{"name":"18-Oct-11","value":422.24},{"name":"19-Oct-11","value":398.62},{"name":"20-Oct-11","value":395.31},{"name":"21-Oct-11","value":392.87},{"name":"24-Oct-11","value":405.77},{"name":"25-Oct-11","value":397.77},{"name":"26-Oct-11","value":400.6},{"name":"27-Oct-11","value":404.69},{"name":"28-Oct-11","value":404.95},{"name":"31-Oct-11","value":404.78},{"name":"1-Nov-11","value":396.51},{"name":"2-Nov-11","value":397.41},{"name":"3-Nov-11","value":403.07},{"name":"4-Nov-11","value":400.24},{"name":"7-Nov-11","value":399.73},{"name":"8-Nov-11","value":406.23},{"name":"9-Nov-11","value":395.28},{"name":"10-Nov-11","value":385.22},{"name":"11-Nov-11","value":384.62},{"name":"14-Nov-11","value":379.26},{"name":"15-Nov-11","value":388.83},{"name":"16-Nov-11","value":384.77},{"name":"17-Nov-11","value":377.41},{"name":"18-Nov-11","value":374.94},{"name":"21-Nov-11","value":369.01},{"name":"22-Nov-11","value":376.51},{"name":"23-Nov-11","value":366.99},{"name":"25-Nov-11","value":363.57},{"name":"28-Nov-11","value":376.12},{"name":"29-Nov-11","value":373.2},{"name":"30-Nov-11","value":382.2},{"name":"1-Dec-11","value":387.93},{"name":"2-Dec-11","value":389.7},{"name":"5-Dec-11","value":393.01},{"name":"6-Dec-11","value":390.95},{"name":"7-Dec-11","value":389.09},{"name":"8-Dec-11","value":390.66},{"name":"9-Dec-11","value":393.62},{"name":"12-Dec-11","value":391.84},{"name":"13-Dec-11","value":388.81},{"name":"14-Dec-11","value":380.19},{"name":"15-Dec-11","value":378.94},{"name":"16-Dec-11","value":381.02},{"name":"19-Dec-11","value":382.21},{"name":"20-Dec-11","value":395.95},{"name":"21-Dec-11","value":396.44},{"name":"22-Dec-11","value":398.55},{"name":"23-Dec-11","value":403.43},{"name":"27-Dec-11","value":406.53},{"name":"28-Dec-11","value":402.64},{"name":"29-Dec-11","value":405.12},{"name":"30-Dec-11","value":405},{"name":"3-Jan-12","value":411.23},{"name":"10-Apr-12","value":628.44},{"name":"11-Apr-12","value":626.2},{"name":"12-Apr-12","value":622.77},{"name":"13-Apr-12","value":605.23},{"name":"16-Apr-12","value":580.13},{"name":"17-Apr-12","value":609.7},{"name":"18-Apr-12","value":608.34},{"name":"19-Apr-12","value":587.44},{"name":"20-Apr-12","value":572.98},{"name":"23-Apr-12","value":571.7},{"name":"24-Apr-12","value":560.28},{"name":"25-Apr-12","value":610},{"name":"26-Apr-12","value":607.7},{"name":"27-Apr-12","value":603},{"name":"30-Apr-12","value":583.98},{"name":"1-May-12","value":582.13}];
data.forEach(function (d) {
d.name = d.name;
d.value = +d.value;
});
x.domain(data.map(function (d) { return d.name; }));
y.domain(d3.extent(data, function (d) { return d.value; }));
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("Label");
svg.append("path")
.datum(data)
.attr("d", area)
.attr("fill", "#FF0000");
}
renderAreaChart();
</script>
</div>
</div>
See the bold part, the count is only a hint value.
A stateless method that returns approximately count representative values from the scale's input domain. If count is not specified, it defaults to 10. The returned tick values are uniformly spaced, have human-readable values (such as multiples of powers of 10), and are guaranteed to be within the extent of the input domain. Ticks are often used to display reference lines, or tick marks, in conjunction with the visualized data. The specified count is only a hint; the scale may return more or fewer values depending on the input domain.
If you want to display the number of ticks exactly as you wanted, you can use the API tickValues.
https://github.com/mbostock/d3/wiki/SVG-Axes#tickValues

Loading JSON in Place of CSV D3

I'm currently working on a spin-off of d3noob's page here: http://www.d3noob.org/2014/07/d3js-multi-line-graph-with-automatic.html
It's almost an identical copy except for two elements. One, I'm trying to load a JSON file instead of D3Noob's preferred CSV. I also want to know if it is easier to use a flat or nested JSON file. If nested would be better, can someone explain or direct me to somewhere that explains nested JSON in d3 a little bit better than what I have been looking for? That'd be great.
Just to sum up. 1. How to load JSON in place of a CSV 2. Nested or flat?
Nested Data
Flat Data
Thank you in advance!
Code:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: none;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text {
fill:red;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
</style>
<script src="d3.js"></script>
<script>
function init(){
// 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.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// 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 valline = d3.svg.line()
.x(function(d) { return x(d.week); })
.y(function(d) { return y(d.val); });
// 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.json("data.01.json", function(error, data) {
data.chartdata.forEach(function(d) {
d.week = d.week;
d.val = +d.val;
});
// Scale the range of the data
x.domain(d3.extent(data.chartdata, function(d) { return d.week; }));
y.domain([0, d3.max(data.chartdata, function(d) { return d.val; })]);
// Nest the entries by name
var dataNest = d3.nest()
.key(function(d) {return d.name;})
.entries(data.chartdata);
var color = d3.scale.category10(); // set the colour scale
legendSpace = width/dataNest.length; // spacing for the legend
// Loop through each name / 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("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
.attr("d", valline(d.values));
// Add the Legend
svg.append("text")
.attr("x", (legendSpace/2)+i*legendSpace) // space legend
.attr("y", height + (margin.bottom/2)+ 5)
.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.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Upweek whether or not the elements are active
d.active = active;
})
.text(d.key);
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
}
</script>
</head>
<body onload="init()">
<!-- load the d3.js library -->
</body>
</html>
The answer is rather simple and I should have realized it earlier. Though I was doing everything correctly, it wasn't working. My problem was that my code was in the head and I was trying to append an SVG to the body without the body existing yet. The only thing I had to do was make all of the head script into a function and call the function when the body loaded, as such.
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<style> /* set the CSS */
body { font: 12px Arial;}
path {
stroke: steelblue;
stroke-width: 2;
fill: none;
}
.axis path,
.axis line {
fill: none;
stroke: none;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis text {
fill:red;
}
.legend {
font-size: 16px;
font-weight: bold;
text-anchor: middle;
}
</style>
<script src="d3.js"></script>
<script>
function init(){
// 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.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
// 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 valline = d3.svg.line()
.x(function(d) { return x(d.week); })
.y(function(d) { return y(d.val); });
// 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.json("data.01.json", function(error, data) {
data.chartdata.forEach(function(d) {
d.week = d.week;
d.val = +d.val;
});
// Scale the range of the data
x.domain(d3.extent(data.chartdata, function(d) { return d.week; }));
y.domain([0, d3.max(data.chartdata, function(d) { return d.val; })]);
// Nest the entries by name
var dataNest = d3.nest()
.key(function(d) {return d.name;})
.entries(data.chartdata);
var color = d3.scale.category10(); // set the colour scale
legendSpace = width/dataNest.length; // spacing for the legend
// Loop through each name / 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("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID
.attr("d", valline(d.values));
// Add the Legend
svg.append("text")
.attr("x", (legendSpace/2)+i*legendSpace) // space legend
.attr("y", height + (margin.bottom/2)+ 5)
.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.replace(/\s+/g, ''))
.transition().duration(100)
.style("opacity", newOpacity);
// Upweek whether or not the elements are active
d.active = active;
})
.text(d.key);
});
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
});
}
</script>
</head>
<body onload="init()">
<!-- load the d3.js library -->
</body>
</html>

Unable to generate grid lines

I have been trying to obtain grid lines in my chart I have been going through d3 tips and tricks by d3noob. Help me if my code is wrong
Style
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;
}
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
.grid path {
stroke-width: 0;
}
Code
<body>
<!-- load the d3.js library -->
<script src="d3.v3.min.js"></script>
<script>
// Set the dimensions of the canvas / graph
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
// 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]);
// 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()
.interpolate("bundle")
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.close);
});
// 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 + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5)
}
// Get the data
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) {
return d.date;
}));
y.domain([0, d3.max(data, function(d) {
return d.close;
})]);
// Add the valueline path.
svg.append("path")
.attr("class", "line")
.attr("d", valueline(data));
// Add the X Axis
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("text") // text label for the x axis
.attr("transform", "translate(" + (width / 2) + " ," + (height + margin.bottom) + ")")
.style("text-anchor", "middle")
.text("Date");
// Add the Y Axis
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Value vs Date Graph");
svg.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat(""))
svg.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat(""))
});
</script>
</body>
data.csv
date,close
1-May-12,58.13
30-Apr-12,53.98
27-Apr-12,67.00
26-Apr-12,89.70
25-Apr-12,99.00
24-Apr-12,130.28
23-Apr-12,166.70
20-Apr-12,234.98
19-Apr-12,345.44
18-Apr-12,443.34
17-Apr-12,543.70
16-Apr-12,580.13
13-Apr-12,605.23
12-Apr-12,622.77
11-Apr-12,626.20
10-Apr-12,628.44
9-Apr-12,636.23
5-Apr-12,633.68
4-Apr-12,624.31
3-Apr-12,629.32
2-Apr-12,618.63
30-Mar-12,599.55
29-Mar-12,609.86
28-Mar-12,617.62
27-Mar-12,614.48
26-Mar-12,606.98
Could be the problem is caused in the first line of code, where var is shown as Var. See if that helps
Var margin = {
top: 30,
right: 20,
bottom: 30,
left: 50
},
You're missing a space in your CSS:
.grid.tick {
stroke: lightgrey;
opacity: 0.7;
}
should be
.grid .tick {
stroke: lightgrey;
opacity: 0.7;
}
or if you want to be more precise
g.grid g.tick line {
stroke: lightgrey;
opacity: 0.7;
}
The axis function creates <g> elements with a class "tick". You're drawing these inside a <g> element with class "grid". However, without the space the CSS selector .grid.tick only applies when both classes are on the same element.

Categories