Menu
I have implemented dynamic Grouped bar chart using d3.js. Its working fine.According to my data,Y axis is displaying TotalOrders. I want to display Months on x axis.But its not getting display.Here is my code:
function Groupchart() {
debugger;
var w = 500;
var h = 600;
var MARGINS = { top: 1, right: 20, bottom: 2, left: 50 }
var colors = [["TotalTicket", "#377EB8"],
["TotalOrders", "#4DAF4A"]];
var dataset = [{ "Month": "Jan", "TotalOrders": 7324, "TotalTicket": 23954, "Year": "2013", "Avg": "10%" },
{ "Month": "Feb", "TotalOrders": 3738, "TotalTicket": 12319, "Year": "2013", "Avg": "12%" },
{ "Month": "March", "TotalOrders": 4466, "TotalTicket": 15524, "Year": "2013", "Avg": "14%" },
{ "Month": "May", "TotalOrders": 100, "TotalTicket": 200, "Year": "2013", "Avg": "50%" },
{ "Month": "Oct", "TotalOrders": 109, "TotalTicket": 2000, "Year": "2013", "Avg": "9%" }]
var x0Scale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);
var x1Scale = d3.scale.ordinal()
.domain([0, d3.max(dataset, function (d) { return d.TotalOrders; })])
.rangeRoundBands([MARGINS.left, w - MARGINS.right], 0.1);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function (d) { return (d.TotalTicket + 10000); })])
.range([h - MARGINS.top, MARGINS.bottom]);
xAxis = d3.svg.axis().scale(x0Scale).tickSize(5).tickSubdivide(true).orient("bottom");
yAxis = d3.svg.axis().scale(yScale).tickSize(5).orient("left").tickSubdivide(true);
var TotalOrders = function (d) {
return d.TotalOrders;
};
var TotalTicket = function (d) {
return d.TotalTicket;
};
var Month = function (d) {
return d.Month;
};
var Average = function (d) {
return d.Avg;
};
var commaFormat = d3.format(',');
//SVG element
var svg = d3.select("#searchVolume")
.append("svg")
.attr("width", w)
.attr("height", h)
.attr("margin", MARGINS);
/*Draw X Axis values*/
svg.append('svg:g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (h - MARGINS.bottom) + ')')
.call(xAxis);
/*Draw Y Axis values*/
svg.append('svg:g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + (MARGINS.left) + ',0)')
.call(yAxis);
// Graph Bars
var sets = svg.selectAll(".set")
.data(dataset)
.enter().append("g")
.attr("class", "set")
.attr("transform", function (d, i) {
return "translate(" + x0Scale(i) + ",0)"
})
.on("mouseover", function (d, i) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(x0Scale(i) + x0Scale.rangeBand() / 6);
var yPosition = 0;
//Update Tooltip Position & value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#cpcVal")
.text(d.Month);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function () {
//Remove the tooltip
d3.select("#tooltip").classed("hidden", true);
});
sets.append("rect")
.attr("class", "TotalTicket")
.attr("width", x0Scale.rangeBand() / 2)
.attr("y", function (d) {
return yScale(d.TotalTicket);
})
.attr("x", x0Scale.rangeBand() / 2)
.attr("height", function (d) {
return h - yScale(d.TotalTicket);
})
.attr("fill", colors[0][1])
.transition()
.delay(function (d, i) { return i * 300 })
.duration(1000)
sets.append("rect")
.attr("class", "TotalOrders")
.attr("width", x0Scale.rangeBand() / 2)
.attr("y", function (d) {
return yScale(d.TotalOrders);
})
.attr("height", function (d) {
return h - yScale(d.TotalOrders);
})
.attr("fill", colors[1][1])
var legend = svg.append("g")
.attr("class", "legend")
//.attr("x", w - 65)
//.attr("y", 50)
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(-20,50)');
var legendRect = legend.selectAll('rect').data(colors);
legendRect.enter()
.append("rect")
.attr("x", w - 65)
.attr("width", 10)
.attr("height", 10);
legendRect
.attr("y", function (d, i) {
return i * 20;
})
.style("fill", function (d) {
return d[1];
});
var legendText = legend.selectAll('text').data(colors);
legendText.enter()
.append("text")
.attr("x", w - 52);
legendText
.attr("y", function (d, i) {
return i * 20 + 9;
})
.text(function (d) {
return d[0];
});
svg.selectAll("text")
.data(dataset, Average)
.enter()
.append("text")
.text(function (d) {
return(d.Avg);
})
.attr("class", "bartext")
.attr("text-anchor", "middle")
.attr("x", function (d, i) {
return x0Scale(i) + x0Scale.rangeBand() / 2;
})
.attr("y", function (d) {
return yScale(d.TotalTicket) - 10;
})
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("fill", "black");
}
Can anybody please me what is the actual problem?
781
asked Dec 07 '25 19:12
It's a margin issue. Your effective height is height - margin.top - margin.bottom. I've fixed the example accordingly (with readability improvement).
To use months in ordinal scale you must initialize the scale with, yeah, months. Then use the scale to map an ordinal value to a x-scale value, e.g. x0Scale(d.Month).
function createGroupchart()
{
var width = 500;
var height = 180;
var margin = {
'top' : 5,
'right' : 20,
'bottom' : 20,
'left' : 50
};
var colors = [
["TotalTicket", "#377EB8"],
["TotalOrders", "#4DAF4A"]
];
var dataset = [
{"Month": "Jan", "TotalOrders": 7324, "TotalTicket": 23954, "Year": "2013", "Avg": "10%"},
{"Month": "Feb", "TotalOrders": 3738, "TotalTicket": 12319, "Year": "2013", "Avg": "12%"},
{"Month": "March", "TotalOrders": 4466, "TotalTicket": 15524, "Year": "2013", "Avg": "14%"},
{"Month": "May", "TotalOrders": 100, "TotalTicket": 200, "Year": "2013", "Avg": "50%"},
{"Month": "Oct", "TotalOrders": 109, "TotalTicket": 2000, "Year": "2013", "Avg": "9%" }
];
var x0Scale = d3.scale.ordinal()
.domain(dataset.map(function(d)
{
return d.Month;
}))
.rangeRoundBands([margin.left, width - margin.right], 0.1);
var x1Scale = d3.scale.ordinal()
.domain([0, d3.max(dataset, function(d)
{
return d.TotalOrders;
})])
.rangeRoundBands([margin.left, width - margin.right], 0.1);
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d)
{
return (d.TotalTicket + 10000);
})])
.range([height - margin.top - margin.bottom, 0]);
var xAxis = d3.svg.axis()
.scale(x0Scale)
.tickSize(5)
.tickSubdivide(true)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.tickSize(5)
.orient("left")
.tickSubdivide(true);
var commaFormat = d3.format(',');
// SVG element
var svg = d3.select("#chart")
.append("svg")
.attr("width", width)
.attr("height", height)
.attr("margin", margin);
// Draw X Axis values
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + (height - margin.bottom - margin.top) + ')')
.call(xAxis);
// Draw Y Axis values
svg.append('g')
.attr('class', 'y axis')
.attr('transform', 'translate(' + margin.left + ',0)')
.call(yAxis);
// Graph Bars
var sets = svg.selectAll(".set")
.data(dataset)
.enter().append("g")
.attr("class", "set")
.attr("transform", function(d)
{
return "translate(" + x0Scale(d.Month) + ",0)"
});
sets.append("rect")
.attr("class", "TotalTicket")
.attr("width", x0Scale.rangeBand() / 2)
.attr("y", function(d)
{
return yScale(d.TotalTicket);
})
.attr("x", x0Scale.rangeBand() / 2)
.attr("height", function(d)
{
return height - margin.top - margin.bottom - yScale(d.TotalTicket);
})
.attr("fill", colors[0][1]);
sets.append("rect")
.attr("class", "TotalOrders")
.attr("width", x0Scale.rangeBand() / 2)
.attr("y", function(d)
{
return yScale(d.TotalOrders);
})
.attr("height", function(d)
{
return height - margin.top - margin.bottom - yScale(d.TotalOrders);
})
.attr("fill", colors[1][1])
var legend = svg.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(-30,20)');
var legendRect = legend.selectAll('rect').data(colors);
legendRect.enter()
.append("rect")
.attr("x", width - 65)
.attr("width", 10)
.attr("height", 10);
legendRect
.attr("y", function(d, i)
{
return i * 20;
})
.style("fill", function(d)
{
return d[1];
});
var legendText = legend.selectAll('text').data(colors);
legendText.enter()
.append("text")
.attr("x", width - 52);
legendText
.attr("y", function(d, i)
{
return i * 20 + 9;
})
.text(function(d)
{
return d[0];
});
svg.selectAll("text")
.data(dataset, function(d)
{
return d.Avg;
})
.enter()
.append("text")
.text(function(d)
{
return d.Avg;
})
.attr("class", "bartext")
.attr("text-anchor", "middle")
.attr("x", function(d)
{
return x0Scale(d.Month) + x0Scale.rangeBand() / 2;
})
.attr("y", function(d)
{
return yScale(d.TotalTicket) - 10;
})
.attr("font-family", "sans-serif")
.attr("font-size", "15px")
.attr("fill", "black");
}
createGroupchart()svg .axis path, .axis line {
fill : none;
stroke : #000;
shape-rendering : crispEdges;
}
svg .x.axis path {
display : none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='chart'></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
