I need to hide the label -200 in yaxis, is there any way to hide the first yaxis label?
So the yaxis label result will be [empty] ,0, 200, 400, 600, 800
What i did is return an empty string for negative value.
tickOptions: {
formatter: function (format, value) {
if (value < 0) {
return ' ';
}
else {
return value
}
}
}
Let say your chart is included in a div with "chart1" as id, you can hide the first yaxis label using :
$("div#chart1 div.jqplot-yaxis div.jqplot-yaxis-tick:nth-child(1)").css('display','none');
Where div#chart1 represents your chart, div.jqplot-yaxis your yaxis ticks container and jqplot-yaxis-tick:nth-child(x) the x-th ticks in this container (it goes from 1 to number of ticks - where 1 represents the ticks at the bottom of your chart)
Related
I am trying to disable brush extent on a line chart and set a fixed width.
I am aware this subject has been discussed several times. I have tried without success to work on this answer: Disable brush resize (DC.js, D3.js) but I couldn't find a solution matching my situation.
If it makes any difference, I am expanding on the brushable ordinal chart discussed in this question: DC.js - Custom ordering of ordinal scale line chart
Here is the chart initialization code:
line
.width(950)
.height(350)
.margins({top: 10, right: 50, bottom: 35, left: 30})
.dimension(graphDim)
.keyAccessor(function(kv) { return graphGroup.ord2int(kv.key); })
.group(graphGroup)
.x(d3.scaleLinear().domain(linear_domain))
.xAxisLabel("Chronologie")
.yAxisLabel("Effectif")
.brushOn(true)
.renderArea(true)
.renderHorizontalGridLines(true)
.renderVerticalGridLines(true)
.elasticY(true)
.filter(dc.filters.RangedFilter(0,0.9));
line.yAxis().ticks(4);
line.xAxis()
.tickValues(d3.range(data.length))
.tickFormat(function(d) { return graphGroup.int2ord(d); });
line.filterHandler(function(dimension, filters) {
if(!filters || !filters.length) {
dimension.filter(null);
return filters;
}
console.assert(filters.length === 1);
console.assert(filters[0].filterType === 'RangedFilter');
var inside = graphGroup.all().filter(function(kv) {
var i = graphGroup.ord2int(kv.key);
return filters[0][0] <= i && i < filters[0][1];
}).map(function(kv) { return kv.key; });
dimension.filterFunction(function(d) {
return inside.indexOf(d) >= 0;
});
return filters;
})
And the fiddle: https://jsfiddle.net/bob_magnus_1/sr7hmnvf/9/`
Is there a simple way to override coordinateGridMixin.extendBrush function in such a chart?
The previous question was for DCv2. Fixed-width brushes are even easier in DCv3+ (because of improvements to d3-brush in D3v4).
It's the same technique as before: look at how extendBrush is implemented, and then replace it. Here's how it looks in DCv3:
_chart.extendBrush = function (brushSelection) {
if (brushSelection && _chart.round()) {
brushSelection[0] = _chart.round()(brushSelection[0]);
brushSelection[1] = _chart.round()(brushSelection[1]);
}
return brushSelection;
};
(source)
It takes a selection – an array of two elements – and returns a new selection.
In your case, your data is ordinal but the scale is linear in order to enable brushing. The brush should match the scale.
To keep it at 0.9 width:
line.extendBrush = function(brushSelection) {
brushSelection[1] = brushSelection[0] + 0.9;
return brushSelection;
};
Hiding the brush handles (which have weird behavior) with CSS:
.brush .custom-brush-handle {
display: none;
}
Fork of your fiddle.
Ordinal brush with snapping
I realized (looking at your 0.9 width brush) that you probably want proper ordinal brushing where it snaps to the region around the one selected point.
You can do this by setting the begin and end of the selection:
line.extendBrush = function(brushSelection) {
brushSelection[0] = Math.round(brushSelection[0]) - 0.5;
brushSelection[1] = brushSelection[0] + 1;
return brushSelection;
};
We find the the currently hovered point by rounding, and then set the begin to 0.5 before it, and the end to 0.5 after it.
Initialize the filter to surround the zero point:
line
.filter(dc.filters.RangedFilter(-0.5,0.5));
Revised fiddle.
Floating point bug fix
I noticed that if you select 20/30 above (linear value 3), brushSelection[0] will have changed from 2.5 to 2.49999999, causing the brush to jump back by one. Some numbers don't represent correctly in floating point.
It's safer to use the average of begin and end:
line.extendBrush = function(brushSelection) {
const point = Math.round((brushSelection[0] + brushSelection[1])/2);
return [
point - 0.5,
point + 0.5
];
};
Fiddle version with 20/30 selectable.
How can I have the labels outside the bar in a row chart with dc.js?
I'd like a graph like this:
however, the labels are inside the actual bars... is there any settings i need to change to have it like this?
I finally got this working and here is the trick,
As mentioned by the Gordon it can be done on renderlet.
First I have gave the margin for my row chart ,
.margins({ top: 20, right: 20, bottom: 40, left: 110 })
Then took the label outside by giving x value in negative.
.labelOffsetX(-10)
This will perfectly move our label but its still need some style changes to look fine and that need to be done on renderlet,
.on('renderlet', function (chart) {
chart.selectAll("g.row text")
.style("text-anchor", "end")
.call(function (t) {
t.each(function (d) {
var self = d3.select(this);
var text = self.text();
if (text.length > 14) {
self.text('');
text = text.substring(0, 14) + '..';
self.text(text);
}
})
});
})
You can ignore .call() function as I place this just to make sure my label length does not cross certain limit.
Hope that work for you.!
I have a very simple line chart in dimple. I want to change the x and y axis colour to white.
var svg = dimple.newSvg(".line_chart_container", 400, 300),dataset;
var chart = new dimple.chart(svg, dataset);
var x = chart.addCategoryAxis("x", "Attempts");
//x.style ("fill","red")
var y = chart.addMeasureAxis("y", "Value");
y.showGridlines = true;
x.showGridlines = true;
var s = chart.addSeries(["Metric", "Value"], dimple.plot.bubble);
var lines = chart.addSeries("Metric", dimple.plot.line);
lines.lineWeight = 2;
lines.lineMarkers = true;
chart.assignColor("Metric", "#30D630");
chart.draw();
s.shapes.style("opacity", function (d) {
return (d.yValue === 0 ? 0 : 0.8);
});
I've checked dimple.axis documentation in GitHub but couldn't find any thing. There is a dimple.axis.colors attribute, but it changes the color of the data and not the axis. Does dimple even support this?
I've also tried to add style attribute(like in D3):
x.style ("fill","red")
but caught an error: Uncaught TypeError: x.style is not a function
Any idea?
x is not a d3 selection, it is a dimple.axis. You can access the inner d3 selection with the shapes property (which is standard for any dimple object). There is an example of that here.
Depending on if you want to change the line color, text color, or everything, you would do
x.shapes.selectAll("*").style("fill", "white")
where * could also be "text" or "line".
One note : the individual tick marks are <line> nodes, and to change their color you need to use 'stroke', not 'fill'.
Also, the actual axis line itself is not a <line> element, it's a <path> element. So to change that color would be :
x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");
You can also just manually write a css rule to override the style for a chart :
g.dimple-axis > g.tick > line, g.dimple-axis path.dimple-custom-axis-line {
stroke:white;
}
For X-axis
d3.selectAll("path.domain")[0][0].style.stroke = "red";
For Y-axis
d3.selectAll("path.domain")[0][1].style.stroke = "yellow";
I'm trying to set the width and height of a nvd3 multi bar chart programmatically using
chart.width(600);
chart.height(400);
See the example here:
http://jsfiddle.net/hPgyq/20/
As you can see this really messes up the chart. I know I can do this is CSS with:
#chart svg {
width: 600px;
height: 400px;
}
but I thought this was also possible using the width() and height() functions on the chart. Am I doing something wrong here or am I mis-using the two functions?
Yes it is possible, like you have specified the width & height of the chart, you have to use the d3.select and set its width & height attribute.
Changes to the code are below and there is a version of the code here
function visualizeData(data) {
nv.addGraph(function() {
var width = 600, height = 400;
chart = nv.models.multiBarChart().x(function(d) {
return d.x;
}).y(function(d) {
return d.y;
}).color(['#aec7e8', '#7b94b5', '#486192']).stacked(true)
//.margin({top:150,right:150,bottom:150,left:150})
.width(width).height(height);
chart.multibar.hideable(false);
chart.xAxis.showMaxMin(true).tickFormat(d3.format(',f'));
chart.yAxis.tickFormat(d3.format(',.1f'));
d3.select('#chart svg').datum(data).transition().duration(500).call(chart).style({ 'width': width, 'height': height });
nv.utils.windowResize(chart.update);
return chart;
});
}
For the AngularJs version (angular-nvd3), I had to add the height either in chart options and as an attribute:
chart.html
<nvd3 options='vm.chartOptions' data='vm.chartData' height="250" config="vm.chartConfig">
</nvd3>
chart.controller.js
vm.chartOptions = {
chart : {
height : 250,
type : "pieChart",
donut : true,
showLegend : false,
//The rest of the configuration
};
As it is told in the comments, first seems to control the height of the inner svg and the second does the global chart height.
I'm new to jqplot, when I want to draw a bar chart, x axis is date, interval is 1 day. This is part of my code:
axesDefaults:{
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions:{
fontSize:'10pt',
},
},
axes:{
xaxis:{
renderer:$x_renderer,
tickOptions:{
formatString:'%Y-%#m-%#d',
},
rendererOptions:{
tickOptions:{
angle:-90,
}
},
label:'$label',
tickInterval:'86400000',
},
yaxis:{
tickOptions:{
formatString:'%.2f',
},
autoscale:true
},
},
highlighter:{
show:true,
},
But I find the width of each bar is too large to cover each other. How to fix it?
Thanks!
The AnthonyLeGovic answer is indeed correct, but if you need to change the column width according to the number of data points you can do the following:
// Get the size of the container of the plot
var width = jQuery(containerName).width();
// Divide by the number of data points.
width = width / number_of_data_points;
// Reduce the width to a % of the total for each data point.
width = (width * 20) / 100;
// Set the value
$.jqplot(containerName, [data],
{
// whatever
// ...
seriesDefault:
{
renderer: $.jqplot.BarRenderer,
rendererOptions: { barWidth: width }
}
// whatever
// ...
}
Note that I'm not taking into account the width of the legend. The legend width can only be obtained after plotting, so if you want to reduce the column width considering even the width of the legend you must do it after plotting, and then replot.
I've prepared a fiddle that shows an example.
Hope it helps.
You can specify it in your series options :
seriesDefault:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 5
}
}
Don't forget to include barRenderer plugins.
For more documentations about bar chart on jqplot please take a look at : Jqplot documentation
I added below code and I got the result.
The reason behind my width was coming too large because of bar-width were not set in series Default block.
seriesDefault:{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 5
}
}
Thanks to :AnthonyLeGovic