I am trying to create an area chart using d3, using this array:
var jsonResObj = {
initial_hours: [
1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,
1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535
]
};
The code for the axis and the chart is here:
var margin = {top: 20, right: 20, bottom: 40, left: 50},
width = 350 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
days = jsonResObj.initial_hours.length;
var x = d3.scale.linear()
.domain([0, days])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(jsonResObj.initial_hours)])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(days); })
.y0(height)
.y1(function(d) { return y(jsonResObj.initial_hours); });
var svg = d3.select("#box1").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 + ")");
svg.append("path")
.datum(jsonResObj)
.attr("class", "area")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
My Gridster box:
<li data-sizey="3" data-sizex="3" data-col="3" data-row="1">
<div class="gridster-box" id="box1">
<div class="handle-resize"></div>
</div>
</li>
When I load my page, only the axes show up and the area selector
is 0px * 0px
How do I draw these area charts in my gridster box?
You need to transform the data so each data point is an object containing the x and y properties and can properly be accessed by your area function.
The way you have it currently, there is no way for d3 to know which day or hour an area data point is referring to.
See code below showing changes to the area function to refer to the day and hour properties of the data object passed via function(d). The data transformation is right after the svg variable declaration. Here's a working fiddle of the solution.
var jsonResObj = {
initial_hours: [
1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535
]
};
var margin = {top: 20, right: 20, bottom: 40, left: 50},
width = 350 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom,
days = jsonResObj.initial_hours.length;
var x = d3.scale.linear()
.domain([0, days])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(jsonResObj.initial_hours)])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.day); })
.y0(height)
.y1(function(d) { return y(d.hour); });
var svg = d3.select("#box1").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 = [];
jsonResObj.initial_hours.forEach(function(d,i){
data.push({day: i, hour: d})
});
svg.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0,0)")
.call(yAxis);
Related
I am using this http://bl.ocks.org/mbostock/3885304 reference for drawing Bar Char using Meteor and D3
This code returns y Axis is 0 and height always same.....
CODE PART
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var yScale = d3.scale.linear()
.range([height, 0]);
var xAxis =d3.svg.axis()
.scale(xScale)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
var svg = d3.select('#Rectangle')
.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 drawCircles = function(error,update) {
if (error) throw error;
var data = Extra.find().fetch();
xScale.domain(data.map(function(d) { return d.inst; }));
yScale.domain([0, d3.max(data, function(d) { return d.percent; })]);
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("Percentaz");
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr("x", function(d) { return xScale(d.inst); })
.attr("y", function(d) { return yScale(d.percent); })
.attr("width", xScale.rangeBand())
.attr("height", function(d) { return height-yScale(d.percent); });
};
Extra.find().observe({
added: function () {
x =[];
var f = Extra.find().fetch() ;
for(var i=0;i<f.length;i++){
x.push(parseInt(f[i].percent))
}
drawCircles(false);
},
changed: _.partial(drawCircles, true)
});
};
Please provide me solution regarding this so i can implement it
This is my very first to d3js.I have use this d3js Line Chart Sample.But after feeding the data it doesn't draw the chart but i can see the data has been loaded by using the firebug.But the data doesn't print in the graph at all. Could n't figure out the problem.Any help will be really appreciated.
This is My code,
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.timeStamp);
})
.y(function(d) {return y(d.memberAverageLoadAverage); });
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 json1=[
{
"clusterId": "",
"timeStamp": 1437063744524,
"memberAverageLoadAverage": 20,
"memberId": ""
},
{
"clusterId": "",
"timeStamp": 1437069850060,
"memberAverageLoadAverage": 20,
"memberId": ""
},
{
"clusterId": "",
"timeStamp": 1437069910059,
"memberAverageLoadAverage": 20,
"memberId": ""
},
{
"clusterId": "",
"timeStamp": 1437069970060,
"memberAverageLoadAverage": 20,
"memberId": ""
},
{
"clusterId": "",
"timeStamp": 1437070030056,
"memberAverageLoadAverage": 20,
"memberId": ""
}
];
root = json1;
x.domain(d3.extent(root, function(d) { return d.timeStamp; }));
y.domain(d3.extent(root, function(d) { return d.memberAverageLoadAverage; }));
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("memberAverageLoadAverage");
svg.append("path")
.datum(root)
.attr("class", "line")
.attr("d", line);
After removing the JSON.parse for the JS object and changing the memberAverageLoadAverage to not all be the same value, I was able to display a graph. The reason I needed to change the memberAverageLoadAverage values is that the extent call was making the y axis go from 20 to 20 so the line was at the bottom of the screen and collided with the x axis line. I would suggest setting the y.domain to [0, d3.max(...)] instead of using d3.extent.
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.timeStamp);
})
.y(function(d) {return y(d.memberAverageLoadAverage); });
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 json1=[{"clusterId":"","timeStamp":1437063744524,"memberAverageLoadAverage":11,"memberId":""},{"clusterId":"","timeStamp":1437069850060,"memberAverageLoadAverage":5,"memberId":""},{"clusterId":"","timeStamp":1437069910059,"memberAverageLoadAverage":6,"memberId":""},{"clusterId":"","timeStamp":1437069970060,"memberAverageLoadAverage":15,"memberId":""},{"clusterId":"","timeStamp":1437070030056,"memberAverageLoadAverage":20,"memberId":""}];
var data = json1;
x.domain(d3.extent(data, function(d) { return d.timeStamp; }));
y.domain([0, d3.max(data, function(d) { return d.memberAverageLoadAverage; })]);
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("Price ($)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Should be a comment, but I suggest a couple of things. 1. I suggest using externally loaded JSON data if you have a server you can use to get the http request. If not, then you can use local data, but either way you have to have a data.foreach function in which you create all of your values, similar to the oneseen below.
data.foreach(function(d) {
d.timeStamp = d.timeStamp;
d.memberAverageLoadAverage = +d.memberAverageLoadAverage;
});
I also strongly suggest you reformat your JSON because your keys are not done phenomenally well, so I suggest you take a look here and reformat the data. Let me know how you do and what else I can help you with.
I am not sure if you can parse this. It is an array. Anyways, even if you can, I don't think there is a need to parse it.
`var json1=`[{"clusterId":"","timeStamp":1437063744524,"memberAverageLoadAverage":20,"memberId":""},
Hello I try to have a similar chart like this : http://jsfiddle.net/chrisJamesC/tNdJj/4/
I want to draw a linechart in a svg with possible negative values and I want the same axis of the jsfiddle.
I put my code here :
var lineData = [10,2,3,4,-9,12,1000,-1000,12,22,15];
var svg = d3.select("#chart_diff");
var margin = {top: 30, right: 10, bottom: 10, left: 30},
width = 360 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
xRange = d3.scale.linear().range([0,width]).domain([0,lineData.length]);
var yMax = d3.max(lineData, function (d) { return d;});
yRange = d3.scale.linear()
.range([height, 0])
.domain([-yMax, yMax]);
xAxis = d3.svg.axis()
.scale(xRange)
.tickSize(5)
.tickSubdivide(true),
yAxis = d3.svg.axis()
.scale(yRange)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
svg.append("svg:g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (height - margin.bottom) + ")")
.call(xAxis);
svg.append("svg:g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + ",0)")
.call(yAxis);
svg.selectAll("g")
.style("stroke-width","3px");
var lineFunc = d3.svg.line()
.x(function(d,i) {
return xRange(i);
})
.y(function(d) {
return yRange(d);
})
.interpolate('linear');
svg.append('svg:path')
.attr('d', lineFunc(lineData))
.attr('stroke', 'blue')
.attr('stroke-width', 2)
.attr('fill', 'none');
With the jsfiddle : http://jsfiddle.net/0zj76je5/
I hope anyone can help me !
I am working on a multi-series line chart using d3.js and I am attempting to implement the focus and context zoom as seen in this example. I have converted the area chart in the example to a line chart with a single series but I cannot figure out how to extend it to allow multiple series.
Here is the code I am using:
var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%b %Y").parse;
var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);
var line = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.price); }); // single series?
var line2 = d3.svg.line()
.interpolate("monotone")
.x(function(d) { return x2(d.date); })
.y(function(d) { return y2(d.price); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
d3.csv("trends.csv", type, function(error, data) {
x.domain(d3.extent(data.map(function(d) { return d.date; })));
y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line2);
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
});
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select(".line").attr("d", line);
focus.select(".x.axis").call(xAxis);
}
function type(d) {
d.date = parseDate(d.date);
d.price = +d.price;
return d;
}
I was successful in building a multi-line chart without the focus+context zoom feature, but I would really like to get the zoom piece working if possible.
Any help is greatly appreciated!
Assuming from your data that you have multiple series for price, you would have to change d.price to d[price]. Did you check this stack overflow question? I think it's what you're looking for.
I have implemented the Drawing Focus + Context via Brushing diagram to display the chi-square results, but the drawing of the results in d3 are strange (check image below at 7 AM).
Also below the image I have included the code which draws the diagram.
ChiSquare Image
var chiSquare = function(config,data,d3){
var margin = {top: 10, right: 10, bottom: 100, left: 40},
margin2 = {top: 430, right: 10, bottom: 20, left: 40},
width = 1127 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
height2 = 500 - margin2.top - margin2.bottom;
var parseDate = d3.time.format("%b %Y").parse;
var x = d3.time.scale().range([0, width]),
x2 = d3.time.scale().range([0, width]),
y = d3.scale.linear().range([height, 0]),
y2 = d3.scale.linear().range([height2, 0]);
var xAxis = d3.svg.axis().scale(x).orient("bottom"),
xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
yAxis = d3.svg.axis().scale(y).orient("left");
var brush = d3.svg.brush()
.x(x2)
.on("brush", brushed);
var area = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x(d.timestamp_unix); })
.y0(height)
.y1(function(d) { return y(d.chiSquare); });
var area2 = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return x2(d.timestamp_unix); })
.y0(height2)
.y1(function(d) {return y2(d.chiSquare); });
var svg = d3.select(config.selector).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
svg.append("defs").append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("width", width)
.attr("height", height);
var focus = svg.append("g")
.attr("class", "focus")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var context = svg.append("g")
.attr("class", "context")
.attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
x.domain(d3.extent(data,(function(d) { return d.timestamp_unix; })));
y.domain([0, d3.max(data, (function(d) { return d.chiSquare; }))]);
x2.domain(x.domain());
y2.domain(y.domain());
focus.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area);
focus.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
focus.append("g")
.attr("class", "y axis")
.call(yAxis);
context.append("path")
.datum(data)
.attr("class", "area")
.attr("d", area2);
context.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height2 + ")")
.call(xAxis2);
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", -6)
.attr("height", height2 + 7);
function brushed() {
x.domain(brush.empty() ? x2.domain() : brush.extent());
focus.select(".area").attr("d", area);
focus.select(".x.axis").call(xAxis);
}
function type(d) {
d.timestamp_unix = parseDate(d.timestamp_unix);
d.chiSquare = +d.chiSquare;
return d;
}
//end class
}
I can't see anything wrong in the code, so I assume that the problem is from D3js but I don't know where to look, any ideas?