I'm using jquery flot library to plot a bar chart. The bars in my chart are consistantly too thin, about 2px in width. But when I set
lineWidth: 15
the bars become the width I want, but the first and the last bars spill over the graph border. I found a simple test flot bar chart with a limited number of points, which looks fine when implemented locally. My conclusion is that maybe I have way too much data, and so the bars are thin in contrast to the amount of points. But I'm hoping there is a way to get the bars to be wider some other way and for them not to spill over the graph border.
Any suggestions are much appreciated. Here is what I have:
$.plot(this.get('datasets'), {
bars: {
show: true,
align: "center",
fill: true,
//lineWidth: 15
},
xaxis: {
mode: "time", //"categories",
timezone: "browser",
tickLength: 0
}
});
You're using lineWidth instead of barWidth. So your bars are the same width; they just look thicker (and spill over the border) because the lines around them are thick.
The reason why your bars are so narrow are because the width is expressed in axis units, not pixels. In your case, where you're using a time-mode axis, the bar width will be quite large. If you want a bar to cover one hour, then your barWidth should be 60 * 60 * 1000 = 3600000.
Related
I have a bar plot, and I try to get the pixel height and width of each bar by:
def get_dims(bars):
fig = plt.gcf()
fig.canvas.draw()
r = fig.canvas.get_renderer()
heights = [bar.get_window_extent(r).height for bar in bars]
widths = [bar.get_window_extent(r).width for bar in bars]
return widths, heights
I use these dimensions to then crop an image and paste over the bar. However, it seems like get_window_extents does not return the ACTUAL pixel height and width because the final image ends up like this:
What do I need to call to get the True display size in pixels? Am I using the wrong fig?
Patch is the object with get_extents(). The Rectangle has get_height(), and now you can use a proportional factor. It would still be nice to somehow gain the scale, which the plot is using.
I'm using the https://github.com/ariutta/svg-pan-zoom library
I have a svg with an element "g" inside. This element has a viewBox = "2727 -2840 1630 1115"
I want to zoom in a specific point (which is inside the viewbox)
panzoom.zoomAtPoint(2, {x: 3000, y: -2500});
However it doesn't work. The svg got moved outside the viewbox apparently. It looks that the panzoom take as initial x,y = 0,0 and its viewbox is 0 0 900 787
zoomAtPoint is zooming into the rendered SVG point. For example if your original SVG viewport was 1000 by 1000, but the SVG element on page is of size 400 x 400 (and fit option is enabled) then:
Zooming to {x: 200, y: 200} will zoom to the center
Zooming to {x: 500, y: 500} will zoom outside of the SVG (as it currently has only 400 x 400)
This was done so that handling zooming by mouse is easy. If you need to zoom in a specific point then take a look at https://stackoverflow.com/a/33682381/1194327 and at https://github.com/ariutta/svg-pan-zoom/issues/183
I have a "real space" plot where I'm visualizing planetary orbits. I would like to force square x- and y-ticks such that I'm looking at a square grid on which the orbits are plotted. I've tried setting ticks, tickSize, and minTickSize all to 1 in the options, but this didn't work. (Note that the tick size doesn't necessarily have to be 1.) In flot chart ticks lines not uniform, there is someone trying to do something similar, but this seems to be pretty specific to EKG charts. Alternatively, is it possible to turn off auto-scaling? I wonder if this would accomplish what I'm after.
When your chart is square and has the same min-/max-values for both axes you get a square grid automatically. No need to set any of the tick options. See this example fiddle.
var options = {
xaxis: {
min: 0,
max: 10
},
yaxis: {
min: 0,
max: 10
}
};
I'm using JQuery Flot with the stacking plugin to create a stacked bar chart of revenue over time from a number of different sources. The problem I'm running into is that there is one timepoint where one source gained revenue a couple of orders of magnitude larger than any other in the entire chart.
The end result is that this value dominates the graph, shrinking all the other bars to an unusable height. I can set a max height on the graph, but then you lose being able to visualize the outstanding value.
Is there any best practice in data visualization to address a situation like this? Some flot option/plugin that could help? Or a library that would handle the situation in a way better than flot?
I'm not certain about financial plots, but in scientific plotting, to emphasize data closer to 0, a logarithmic scaled axis is frequently used. Unlike a linear scaled axis where each equally spaced tick represents a +N, in a log scaled axis each equally spaced tick represents an order of magnitude increase. The simplest case is an exponential increase where the axis goes 0.1, 1, 10, 100, 1000, etc...
For instance here's the same bar graph with a linear and log scaled axis:
Here's the flot code I used to generate this (fiddle here):
$(function() {
var series = {data: [[0, 0.1], [1, 1], [2, 10], [3, 100000]],
lines: {show: false},
bars: {show: true}}
$.plot("#linear", [ series ]);
$.plot("#log", [ series ], {
yaxis: {
min: 0.1,
max: 150000,
ticks: [[0.1,"0.1"], 1, 10, 100, 1000, 10000],
transform: function (v) {
return (v == 0) ? Math.log(0.0001) : Math.log(v);
},
inverseTransform: function (v) {
return Math.exp(v);
}
}
});
});
I have a weird issue in my bar graph realized using d3.js: the 1 px padding between each rectangle appears irregular. I gather either or both the width or x position are the culprit but i don't understand what i'm doing wrong: the width is a fraction of the svg area and the X position is obtained via a D3 scale.
I've put a demo here: http://jsfiddle.net/pixeline/j679N/4/
The code ( a scale) controling the x position:
var xScale = d3.time.scale().domain([minDate, maxDate]).rangeRound([padding, w - padding]);
The code controlling the width:
var barWidth = Math.floor((w/dataset.length))-barPadding;
Thank you for your insight.
It's irregular because you are rounding your output range (rangeRound). In some cases, the distance between two bars is 3 pixels and sometimes only 2. This is because the actual x position is a fractional value and ends up being rounded one way in some cases and the other way on other cases.
You can mitigate the effect but changing rangeRound to range, but that won't eliminate it entirely as you'll still get fractional pixel values for positions. The best thing to do is probably to simply increase the padding so that the differences aren't as obvious.