Is there any way to set the min and max values to go a bit further than the min/max of the data?
I would like to prevent the max value to be in the chart's limit, like in this image:
As you can see, the max is 255.00 and when the line is at that value, it kinda stays in the chart border. I would like to set the chart to have a small padding on that area.
Thanks
Related
I have a dc.js heatmap working:
But I want to add grid lines to it, like so:
You can see that the lines to not match up with the bottom edges of the rects. Inserting the lines themselves is easy, you just start at zero and add 11 lines based on the height of the rects, which in this case will always be 11 / chart.effectiveHeight().
The reason they do not match up, seems to be that the top rect row does not always start at 0, instead, there seems to be a random(?) y position that the chart starts at, this will change with the height of the chart container, eg this y position starts at 5:
If it was consistent, then I could just start appending lines from that number instead of 0, but it is not. I have tried a couple of hacky work arounds, however I am unsure as to how to get the y position of all the rects after they are available in the DOM.
Interestingly the demo heatmap does not have this issue:
Here is the code for the heatmap:
const heat_map = dc.heatMap('#heatmap');
heat_map
.width(0)
.height(0)
.margins(margins)
.dimension(hm_dim)
.group(hm_group)
.keyAccessor(function(d) { return +d.key[0]; })
.valueAccessor(function(d) { return +d.key[1]; })
.colorAccessor(function(d) { return +d.value; })
.colors(color_scale)
.calculateColorDomain()
.yBorderRadius(0)
.xBorderRadius(0)
heat_map.render();
Is there a way to force the rects to begin at 0? Or get the random y position for the top rows? I did have a look at the source code but got a bit lost. Also I thought about creating a false group that would include each rect in the grid, and the grid lines could then be rect borders, but I thought that was a bit heavy handed.
Outlining the cells using CSS
It's easy to outline the cells using CSS:
rect.heat-box {
stroke-width: 1;
stroke: black;
}
Example fiddle.
However, as you point out, this only works if all the cells have values; crossfilter will not create the empty ones and I agree it would be absurd fill them in using a fake group just for some lines.
So, to answer your original question...
Why is there a gap at the top of the chart?
The heatmap calculates an integer size for the cells, and there may be space left over (since the space doesn't divide perfectly).
It's kind of nasty but the heatmap example avoids having extra space by calculating the width and height for the chart using the count of cells in each dimension:
chart
.width(45 * 20 + 80)
.height(45 * 5 + 40)
The default margins are {top: 10, right: 50, bottom: 30, left: 30} so this allocates 45x45 pixels for each cell and adds on the margins to get the right chart size.
Since the heatmap in this example draws 20 columns by 5 rows, it will calculate the cell width and height as 45.
Alternative Answer for Responsive/Resizable Charts
I am revisiting this question after rewriting my heatmap chart to be responsive - using the "ResizeObserver" method outlined in the dc.js resizing examples and Gordon's answer to this question
While specifying the chart width and height for the heatmap in Gordon's answer still works, it does not combine well with the resizing method because resized charts will have their .width and .height set to 'null'. Which means that this rounding issue will reoccur and the heat boxes will be again be offset by a random integer x or y value of anywhere between 0 and 5 (unless you want to write a custom resizing function for heatmaps).
The alternative answer is relatively simple and can be determined by selecting just one heat-box element in the heatmap.
The vertical offset value for the heat boxes is the remainder value when the heat-box y attribute is divided by the heat-box height attribute.
const heatbox_y = heat_map.select('.heat-box').attr('y);
const heatbox_height = heat_map.select('.heat-box').attr('height')
const vertical_offset = heatbox_y % heatbox_height
The modulus % will return the remainder.
The horizontal offset can be determined in the same way.
Thus you can append lines to the chart at regular intervals determined by the heatbox_height + the vertical_offset values.
This will work if you pick any heat-box in the chart, and so it is suitable for instances like this where you cannot guarantee that there will be a heat-box at each x or y level. And it means that you are free to set your chart height and width to 'null' if needed.
I would like to compare 2 d3Plus bar charts, next to ech other, and for that I need that both charts have the same max y value (let's say 1000 even if max data value of the first chart is 700, and max data value of the second is 550).
Thanx in advance.
Use the "range" property of each chart's y-axis:
.y({range: [0, 1000]})
For reference, here is the documentation for all of the properties for an axis: https://github.com/alexandersimoes/d3plus/wiki/Visualizations#x
I am using dateaxis render for my x-axis. How can I find the min and max value from the x-axis valuse?
If you want the minimum/maximum x-axis value from your dataset you can use:
plot1.axes.xaxis._dataBounds.min
If you want the minimum/maximum from the x-axis (i.e. tick label) you can use:
plot1.axes.xaxis.min
where plot1 is a reference to the jqplot object. These return the minimum/maximum dates in milliseconds.
Please see this Fiddle for an example. The 2 buttons can be used to display the min or max values.
I've made a map in d3 that is tinted my values, so I've got:
var color= d3.scale.quantize().range(["#FAE3C3", "#EBAD95","#DB7768", "#CC403A", "#BC0A0C"]);
How does one find the actual limits of the scale, so I can create the map key? (I'd want it to update if I fed in new data).
You can get back the lower and upper bounds for a bin like so:
var bounds = color.invertExtent('#FAE3C3')
A possible solution for a legend would be to iterate through the color array and call color.invertExtent for each color.
If you want tidier breakpoints, I think you have to define them yourself and set them as the domain, for example if your minimum is 2 and your maximum is 59 you could do the following:
color= d3.scale.quantize()
.domain([0, 60])
.range(["#FAE3C3", "#EBAD95","#DB7768", "#CC403A", "#BC0A0C"]);
so that maximum - minumum is divisible by the number of colors.
I am a newbie to jqPlot and I am currently using it to generate charts
so I need you helps for some questions following please
I would like to do a chart like this http://picturepush.com/public/11972209
but I don't want show the min and max values de axis X (min = 99, max = 106).
(NOTHING ELSE CHANGES!)
how could I fix the *W*idth and *H*eigh of the 'rectangle' of chart?
(independently with the label ticks, axis label, legend ...)
how could I set the position of xaxis, yaxis label?
thanks a lot
About your questions :
You can set the ticks you want using ticks options : http://www.jqplot.com/docs/files/jqplot-core-js.html#Axis.ticks
Here is a related question I asked some months ago : JqPlot : Set a fix height value for the graph area not including y axe labels
You should have a look here : http://www.jqplot.com/docs/files/jqplot-axisTickRenderer-js.html#