H4rris
Reputation: 35
Limited horizontal ticks in D3js v4 bar chart
I'm trying to reduce the number of ticks in the x-axis due to overlapping values.
First I tried by setting up manually a limited number of axis by using .call(d3.axisBottom(x).ticks(10)); but no results. I tried also to use an interval of four days between ticks : .call(d3.axisBottom(x).tickFormat(dateFormat).ticks(d3.timeDay.every(4))); but still not working.
Any ideas please ?
function stacked_bar_chart_d3js(data, size_width, size_height, id_chart, data_groups) {
var input = {
'data': data,
'width': size_width,
'height': size_height,
'id_chart': id_chart,
'data_groups': data_groups,
},
canvas = setUpSvgCanvas(input);
drawBars(input, canvas);
function drawBars(input, canvas) {
var params = {
'input': input,
'canvas': canvas
};
initialize(params);
update(params);
}
function initialize(params) {
// unpacking params
var canvas = params.canvas,
input = params.input;
// unpacking canvas
var svg = canvas.svg,
width = params.width = canvas.width,
height = params.height = canvas.height;
// processing Data and extracting binNames and clusterNames
var formattedData = formatData(input.data, input.data_groups),
blockData = params.blockData = formattedData.blockData,
binNames = params.binNames = formattedData.binNames,
clusterNames = params.clusterNames = formattedData.clusterNames;
// initialize color
var color = setUpColors()
.domain(clusterNames);
// initialize scales and axis
var scales = initializeScales(width, height),
x = scales.x,
y = params.y = scales.y;
x.domain(binNames);
y.domain([0, d3.max(blockData, function(d) {
return d.y1;
})]);
initializeAxis(svg, x, y, height, width);
// initialize bars
var bar = params.bar = svg.selectAll('.bar')
.data(blockData)
.enter()
.append('g')
.attr('class', 'bar');
bar.append('rect')
.attr('x', function(d) {
return x(d.x);
})
.attr('y', function() {
return y(0);
})
.attr('width', x.bandwidth())
.attr('height', 0)
.attr('fill', function(d) {
return color(d.cluster);
});
var bar_label = params.bar_label = svg.selectAll('.bar_label')
.data(params.input.data)
.enter()
.append('g')
.attr('class', 'bar_label');
bar_label.append('text')
.attr("x", function(d) {
return (x(d.period) + (x.bandwidth() / 2));
})
.attr("y", function(d) {
return y(d3.sum(d3.values(d))) - 8;
})
.attr("dy", "0.32em")
.attr("text-anchor", "middle")
.attr('style', 'font-size:10px')
.text(function(d) {
return d3.format("$")(d3.sum(d3.values(d))
.toFixed(2));
})
.style({
fill: 'black'
});
// heights is a dictionary to store bar height by cluster
// this hierarchy is important for animation purposes
// each bar above the chosen bar must collapse to the top of the
// selected bar, this function defines this top
params.heights = setUpHeights(clusterNames, blockData);
// defining max of each bin to convert later to percentage
params.maxPerBin = setUpMax(clusterNames, blockData);
params.view = false;
}
function update(params) {
// retrieving params to avoid putting params.x everywhere
var svg = params.canvas.svg,
y = params.y,
blockData = params.blockData,
width = params.width,
height = params.height,
bar = params.bar,
bar_label = params.bar_label;
var transDuration = 700;
// update Y axis
y.domain([0, d3.max(blockData, function(d) {
return d.y1;
})]);
var axisY = d3.axisLeft(y)
.ticks(4, ".2s")
.tickSize(-width);
svg.selectAll('.axisY')
.transition()
.duration(transDuration)
.call(axisY);
// update bars
bar.selectAll('rect')
.transition()
.duration(transDuration)
.attr('y', function(d) {
return y(d.y1);
})
.attr('height', function(d) {
return height - y(d.height);
});
bar_label.selectAll('text')
.transition()
.duration(transDuration)
.attr("y", function(d) {
return y(d3.sum(d3.values(d))) - 8;;
})
.attr("dy", "0.32em")
.attr("text-anchor", "middle")
.attr('style', 'font-size:10px')
.text(function(d) {
return d3.sum(d3.values(d)) > 0.00 ?
d3.format("$")(d3.sum(d3.values(d)).toFixed(2)) :
"$0.00";
});
}
// heights is a dictionary to store bar height by cluster
// this hierarchy is important for animation purposes
function setUpHeights(clusterNames, blockData) {
var heights = {};
clusterNames.forEach(function(cluster) {
var clusterVec = [];
blockData.filter(function(d) {
return d.cluster == cluster;
})
.forEach(function(d) {
clusterVec.push(d.height);
});
heights[cluster] = clusterVec;
});
return heights;
}
// getting the max value of each bin, to convert back and forth to percentage
function setUpMax(clusterNames, blockData) {
var lastClusterElements = blockData.filter(function(d) {
return d.cluster == clusterNames[clusterNames.length - 1];
});
var maxDict = {};
lastClusterElements.forEach(function(d) {
maxDict[d.x] = d.y1;
});
return maxDict;
}
function initializeScales(width, height) {
var x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.7);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
return {
x: x,
y: y,
};
}
function initializeAxis(svg, x, y, height) {
var yAxis = d3.axisLeft(y)
.ticks(4, ".2s");
svg.append('g')
.attr('class', 'axisY')
.call(yAxis);
svg.append('g')
.attr('class', 'axisX')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x));
}
function setUpSvgCanvas(input) {
var margin = {
top: 20,
right: 100,
bottom: 20,
left: 45
},
width = input.width - margin.left - margin.right,
height = input.height - margin.top - margin.bottom;
var svg = d3.select(input.id_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 + ')');
return {
svg: svg,
margin: margin,
width: width,
height: height,
};
}
function setUpColors() {
return d3.scaleOrdinal(d3.schemeCategory20);
}
// formatting Data to a more d3-friendly format
// extracting binNames and clusterNames
function formatData(data, data_groups) {
var clusterNames = d3.values(data_groups);
var binNames = [];
var blockData = [];
for (var i = 0; i < data.length; i++) {
var y = 0;
binNames.push(data[i].period);
for (var j = 0; j < clusterNames.length; j++) {
var height = typeof data[i][clusterNames[j]] === "undefined" ? 0 : parseFloat(data[i][clusterNames[j]]);
var block = {
'y0': parseFloat(y),
'y1': (height === 0) ? parseFloat(y) : parseFloat(y) + parseFloat(height),
'height': height.toFixed(2),
'x': data[i].period,
'cluster': clusterNames[j],
};
y += parseFloat(height);
blockData.push(block);
}
}
return {
blockData: blockData,
binNames: binNames,
clusterNames: clusterNames,
};
}
}
var data = {
"column_chart_data": [{
"period": "2020-10-28",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-27",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-26",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-25",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-24",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-23",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-22",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-21",
"Autres": 0,
"demouic": 0.21,
"rghm": 0,
},
{
"period": "2020-10-20",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-19",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-18",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-17",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-16",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-15",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-14",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-13",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-12",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-11",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-10",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-09",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-08",
"Autres": 0,
"demouic": 0,
"rghm": 0,
},
{
"period": "2020-10-07",
"Autres": 0,
"demouic": 0,
"rghm": 0.99,
},
{
"period": "2020-10-06",
"Autres": 0,
"demouic": 0,
"rghm": 0.31,
},
{
"period": "2020-10-05",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-10-04",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-10-03",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-10-02",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-10-01",
"Autres": 0,
"demouic": 0,
"rghm": 0.01,
},
{
"period": "2020-09-30",
"Autres": 0,
"demouic": 0.23,
"rghm": 0.43,
},
{
"period": "2020-09-29",
"Autres": 0,
"defaultresourcegroup-par": 0,
"demouic": 0.51,
"rghm": 0.68,
},
{
"period": "2020-09-28",
"Autres": 0,
"defaultresourcegroup-par": 0,
"demouic": 0.5,
"rghm": 0.68,
},
{
"period": "2020-09-27",
"Autres": 0,
"defaultresourcegroup-par": 0,
"demouic": 0.5,
"rghm": 0.68,
},
{
"period": "2020-09-26",
"Autres": 0,
"defaultresourcegroup-par": 0,
"demouic": 0.5,
"rghm": 0.68,
},
{
"period": "2020-09-25",
"Autres": 0,
"demouic": 0.55,
"rghm": 0.65,
},
{
"period": "2020-09-24",
"Autres": 0,
"demouic": 0.6,
"rghm": 0.38,
},
{
"period": "2020-09-23",
"Autres": 0,
"demouic": 0.72,
},
{
"period": "2020-09-22",
"Autres": 0,
"demouic": 0.51,
},
{
"period": "2020-09-21",
"Autres": 0,
"demouic": 0.69,
},
{
"period": "2020-09-20",
"Autres": 0,
"demouic": 0.72,
},
{
"period": "2020-09-19",
"Autres": 0,
"demouic": 0.72,
},
{
"period": "2020-09-18",
"Autres": 0,
"demouic": 0.67,
},
{
"period": "2020-09-17",
"Autres": 0,
"demouic": 0.71,
},
{
"period": "2020-09-16",
"Autres": 0,
"demouic": 0.74,
"uicdemo": 0.56,
},
{
"period": "2020-09-15",
"Autres": 0,
"demouic": 0.78,
},
{
"period": "2020-09-14",
"Autres": 0,
"demouic": 0.69,
},
{
"period": "2020-09-13",
"Autres": 0,
"demouic": 0.74,
},
{
"period": "2020-09-12",
"Autres": 0,
"demouic": 0.72,
},
{
"period": "2020-09-11",
"Autres": 0,
"demouic": 0.65,
},
{
"period": "2020-09-10",
"Autres": 0,
"demouic": 0.7,
},
{
"period": "2020-09-09",
"Autres": 0,
"demouic": 0.7,
},
{
"period": "2020-09-08",
"Autres": 0,
"demouic": 0.71,
},
{
"period": "2020-09-07",
"Autres": 0,
"demouic": 0.7,
},
{
"period": "2020-09-06",
"Autres": 0,
"demouic": 0.71,
},
{
"period": "2020-09-05",
"Autres": 0,
"demouic": 0.67,
},
{
"period": "2020-09-04",
"Autres": 0,
"demouic": 0.7,
},
{
"period": "2020-09-03",
"Autres": 0,
"demouic": 0.71,
},
{
"period": "2020-09-02",
"Autres": 0,
"demouic": 0.77,
},
{
"period": "2020-09-01",
"Autres": 0,
"demouic": 2.52,
},
{
"period": "2020-08-31",
"Autres": 0,
"demouic": 1.31,
},
{
"period": "2020-08-30",
"Autres": 0,
"demouic": 0.74,
},
{
"period": "2020-08-29",
"Autres": 0,
"demouic": 0.75,
},
{
"period": "2020-08-28",
"Autres": 0,
"demouic": 0.72,
},
{
"period": "2020-08-27",
"Autres": 0,
"demouic": 0.71,
},
{
"period": "2020-08-26",
"Autres": 0,
"demouic": 0.7,
},
{
"period": "2020-08-25",
"Autres": 0,
"demouic": 0.67,
},
{
"period": "2020-08-24",
"Autres": 0,
"demouic": 0.52,
},
{
"period": "2020-08-23",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-22",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-21",
"Autres": 0,
"demouic": 0.51,
},
{
"period": "2020-08-20",
"Autres": 0,
"demouic": 0.48,
},
{
"period": "2020-08-19",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-18",
"Autres": 0,
"demouic": 0.51,
},
{
"period": "2020-08-17",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-16",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-15",
"Autres": 0,
"demouic": 0.48,
},
{
"period": "2020-08-14",
"Autres": 0,
"demouic": 0.48,
},
{
"period": "2020-08-13",
"Autres": 0,
"demouic": 0.48,
},
{
"period": "2020-08-12",
"Autres": 0,
"demouic": 0.5,
},
{
"period": "2020-08-11",
"Autres": 0,
"demouic": 0.5,
},
{
"period": "2020-08-10",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-09",
"Autres": 0,
"demouic": 0.48,
},
{
"period": "2020-08-08",
"Autres": 0,
"demouic": 0.48,
},
{
"period": "2020-08-07",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-06",
"Autres": 0,
"demouic": 0.5,
},
{
"period": "2020-08-05",
"Autres": 0,
"demouic": 0.49,
},
{
"period": "2020-08-04",
"Autres": 0,
"demouic": 1.06,
},
{
"period": "2020-08-03",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-08-02",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-08-01",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-31",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-30",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-29",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-28",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-27",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-26",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-25",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-24",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-23",
"Autres": 0,
"demouic": 0.45,
},
{
"period": "2020-07-22",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-21",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-20",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-19",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-18",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-17",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-16",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-15",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-14",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-13",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-12",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-11",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-10",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-09",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-08",
"Autres": 0,
"demouic": 0.98,
},
{
"period": "2020-07-07",
"Autres": 0,
"demouic": 0.53,
},
{
"period": "2020-07-06",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-05",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-04",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-03",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-02",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-07-01",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-30",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-29",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-28",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-27",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-26",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-25",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-24",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-23",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-22",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-21",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-20",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-19",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-18",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-17",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-16",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-15",
"Autres": 0,
"demouic": 0.42,
},
{
"period": "2020-06-14",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-13",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-12",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-11",
"Autres": 0,
"demouic": 0.77,
},
{
"period": "2020-06-10",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-09",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-08",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-07",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-06",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-05",
"Autres": 0,
"demouic": 0.01,
},
{
"period": "2020-06-04",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-03",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-02",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-06-01",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-05-31",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-05-30",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-05-29",
"Autres": 0,
"demouic": 0.57,
},
{
"period": "2020-05-28",
"Autres": 0,
"demouic": 0.11,
},
{
"period": "2020-05-27",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-05-26",
"Autres": 0,
"demouic": 0,
},
{
"period": "2020-05-25",
"Autres": 0,
"demouic": 0,
},
],
"data_groups": [
"defaultresourcegroup-par",
"rdzrg10",
"uicdemo",
"rghm",
"demouic",
],
};
stacked_bar_chart_d3js(
data.column_chart_data,
$('#column_chart_cost_per_trend').width(),
$('#column_chart_cost_per_trend').height() - 30,
'#column_chart_cost_per_trend',
data.data_groups
);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="col-md-12" id="column_chart_cost_per_trend" style="height: 320px;"></div>Upvotes: 0
Views: 57
Answers (1)
Ruben Helsloot
Reputation: 13139
You're using scaleBand, which is for categorical data and assumes there is absolutely no relationship between the x values. So it doesn't sort them, think one is closer to the others, or anything. But your data is not categorical, it's over time. So what you should do is parse your dates, and use d3.scaleTime instead:
var data = [
{ "period": "2020-10-28" },
{ "period": "2020-10-27" },
{ "period": "2020-10-26" },
{ "period": "2020-10-25" },
{ "period": "2020-10-24" },
{ "period": "2020-10-23" },
{ "period": "2020-10-22" },
{ "period": "2020-10-21" },
{ "period": "2020-10-20" },
{ "period": "2020-10-19" },
{ "period": "2020-10-18" },
{ "period": "2020-10-17" },
{ "period": "2020-10-16" },
{ "period": "2020-10-15" },
{ "period": "2020-10-14" },
{ "period": "2020-10-13" },
{ "period": "2020-10-12" },
{ "period": "2020-10-11" },
{ "period": "2020-10-10" },
{ "period": "2020-10-09" },
{ "period": "2020-10-08" },
{ "period": "2020-10-07" },
{ "period": "2020-10-06" },
{ "period": "2020-10-05" },
{ "period": "2020-10-04" },
{ "period": "2020-10-03" },
{ "period": "2020-10-02" },
{ "period": "2020-10-01" },
{ "period": "2020-09-30" },
{ "period": "2020-09-29" },
{ "period": "2020-09-28" },
{ "period": "2020-09-27" },
{ "period": "2020-09-26" },
{ "period": "2020-09-25" },
{ "period": "2020-09-24" },
{ "period": "2020-09-23" },
{ "period": "2020-09-22" },
{ "period": "2020-09-21" },
{ "period": "2020-09-20" },
{ "period": "2020-09-19" },
{ "period": "2020-09-18" },
{ "period": "2020-09-17" },
{ "period": "2020-09-16" },
{ "period": "2020-09-15" },
{ "period": "2020-09-14" },
{ "period": "2020-09-13" },
{ "period": "2020-09-12" },
{ "period": "2020-09-11" },
{ "period": "2020-09-10" },
{ "period": "2020-09-09" },
{ "period": "2020-09-08" },
{ "period": "2020-09-07" },
{ "period": "2020-09-06" },
{ "period": "2020-09-05" },
{ "period": "2020-09-04" },
{ "period": "2020-09-03" },
{ "period": "2020-09-02" },
{ "period": "2020-09-01" },
{ "period": "2020-08-31" },
{ "period": "2020-08-30" },
{ "period": "2020-08-29" },
{ "period": "2020-08-28" },
{ "period": "2020-08-27" },
{ "period": "2020-08-26" },
{ "period": "2020-08-25" },
{ "period": "2020-08-24" },
{ "period": "2020-08-23" },
{ "period": "2020-08-22" },
{ "period": "2020-08-21" },
{ "period": "2020-08-20" },
{ "period": "2020-08-19" },
{ "period": "2020-08-18" },
{ "period": "2020-08-17" },
{ "period": "2020-08-16" },
{ "period": "2020-08-15" },
{ "period": "2020-08-14" },
{ "period": "2020-08-13" },
{ "period": "2020-08-12" },
{ "period": "2020-08-11" },
{ "period": "2020-08-10" },
{ "period": "2020-08-09" },
{ "period": "2020-08-08" },
{ "period": "2020-08-07" },
{ "period": "2020-08-06" },
{ "period": "2020-08-05" },
{ "period": "2020-08-04" },
{ "period": "2020-08-03" },
{ "period": "2020-08-02" },
{ "period": "2020-08-01" },
{ "period": "2020-07-31" },
{ "period": "2020-07-30" },
{ "period": "2020-07-29" },
{ "period": "2020-07-28" },
{ "period": "2020-07-27" },
{ "period": "2020-07-26" },
{ "period": "2020-07-25" },
{ "period": "2020-07-24" },
{ "period": "2020-07-23" },
{ "period": "2020-07-22" },
{ "period": "2020-07-21" },
{ "period": "2020-07-20" },
{ "period": "2020-07-19" },
{ "period": "2020-07-18" },
{ "period": "2020-07-17" },
{ "period": "2020-07-16" },
{ "period": "2020-07-15" },
{ "period": "2020-07-14" },
{ "period": "2020-07-13" },
{ "period": "2020-07-12" },
{ "period": "2020-07-11" },
{ "period": "2020-07-10" },
{ "period": "2020-07-09" },
{ "period": "2020-07-08" },
{ "period": "2020-07-07" },
{ "period": "2020-07-06" },
{ "period": "2020-07-05" },
{ "period": "2020-07-04" },
{ "period": "2020-07-03" },
{ "period": "2020-07-02" },
{ "period": "2020-07-01" },
{ "period": "2020-06-30" },
{ "period": "2020-06-29" },
{ "period": "2020-06-28" },
{ "period": "2020-06-27" },
{ "period": "2020-06-26" },
{ "period": "2020-06-25" },
{ "period": "2020-06-24" },
{ "period": "2020-06-23" },
{ "period": "2020-06-22" },
{ "period": "2020-06-21" },
{ "period": "2020-06-20" },
{ "period": "2020-06-19" },
{ "period": "2020-06-18" },
{ "period": "2020-06-17" },
{ "period": "2020-06-16" },
{ "period": "2020-06-15" },
{ "period": "2020-06-14" },
{ "period": "2020-06-13" },
{ "period": "2020-06-12" },
{ "period": "2020-06-11" },
{ "period": "2020-06-10" },
{ "period": "2020-06-09" },
{ "period": "2020-06-08" },
{ "period": "2020-06-07" },
{ "period": "2020-06-06" },
{ "period": "2020-06-05" },
{ "period": "2020-06-04" },
{ "period": "2020-06-03" },
{ "period": "2020-06-02" },
{ "period": "2020-06-01" },
{ "period": "2020-05-31" },
{ "period": "2020-05-30" },
{ "period": "2020-05-29" },
{ "period": "2020-05-28" },
{ "period": "2020-05-27" },
{ "period": "2020-05-26" },
{ "period": "2020-05-25" },
];
var margin = { top: 20, right: 100, bottom: 20, left: 45 },
width = 600 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var svg = d3.select("div")
.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 + ')');
// initialize scales and axis
var scaleBand = d3.scaleBand()
.rangeRound([0, width])
.padding(0.7)
.domain(data.map(function(d) { return d.period; }));
var parser = d3.timeParse("%Y-%m-%d");
var scaleTime = d3.scaleTime()
.range([0, width])
.domain(d3.extent(data, function(d) { return parser(d.period); }));
svg.append('g')
.attr('class', 'axisX')
.attr('transform', 'translate(0,' + (height / 2) + ')')
.call(d3.axisBottom(scaleBand));
svg.append('g')
.attr('class', 'axisX')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(scaleTime));<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div class="col-md-12" id="column_chart_cost_per_trend" style="height: 320px;"></div>Upvotes: 1
Related Questions
- How to set fixed number of ticks on axis in d3.js?
- How to fix no. of ticks on X Axis in Bar Chart using d3?
- D3.js: display limited number of ticks
- Can't set the number of ticks on time-based x-axis to custom amount for bar chart
- Limit number of Y axis ticks by keeping a top tick above the bar in d3
- d3 bar chart y axis ticks and grid lines above max value
- Custom D3 `tickValue` on x axis -- horizontal bar chart
- How to control the number of tick values in a graph with d3js
- d3.js: how can I get 'full width' ticks on the y-axis
- Wrong number of lines/ticks on d3 bar chart