In one of my windows application, wherein I am using TChart for .Net 2010, I am displaying a chart with 3 error series on it. Each of these series have 2 points. X points for all these series are identical.
e.g. Series1 has Point1(x1=0.2, bar=0, StdErr=5) & Point2(x1=0.6, bar=1, StdErr=8) whereas Series2 has Point1(x1=0.2, bar=0, StdErr=8) & Point2(x1=0.6, bar=1, StdErr=10).
The expected chart should display overlapped error bars at 2 locations 0.2 and 0.6 on x axis. But in fact, it displaying error bars with sufficient separation between them.
Is this a problem with TChart or do I need to have some settings to overlap these error bars? Please let me know if anyone has solution for it.
thanks,
kapil
This is not a TeeChart problem but default behaviour. All series deriving from Steema.TeeChart.Styles.CustomBar class have MultiBar property which lets the programmer choose how bars will be plotted in such circumstances. By default MultiBar is set to Steema.TeeChart.Styles.MultiBars.Side. Setting it to Steema.TeeChart.Styles.MultiBars.None solves your problem, for example:
tChart1.Aspect.View3D = false;
for (int i = 0; i < 3; i++)
{
Steema.TeeChart.Styles.ErrorBar errorBar = new Steema.TeeChart.Styles.ErrorBar(tChart1.Chart);
errorBar.MultiBar = Steema.TeeChart.Styles.MultiBars.None;
errorBar.FillSampleValues();
}
If that's not what you were looking for you can try with different MultiBar settings and let us know if it still doesn't fit your needs.
Related
Im implementing the code below in a React, Typescript project.
When hovering over my graph I don't get the nearest entity its roughly 5 years off, on my x-axis(time).
I've tried switching out entityNearest for entityNearestXThenY but it yielded similar results.
Below is my pointer interaction function:
new Plottable.Interactions.Pointer()
.attachTo(Chart)
.onPointerMove(function(p) {
var entity = hiddenGraph.entityNearest(p);
var date = parseTime(entity.datum.x);
var value = currencySymbolNoPrecision(entity.datum.y);
var displayValue = (value + " • " + date);
guideline.value(entity.datum.x);
xAxis.annotatedTicks([entity.datum.x]);
title.text(displayValue).yAlignment();
})
.onPointerExit(function() {
guideline.pixelPosition(-10);
xAxis.annotatedTicks([]);
});
Pointer tracking is also very jumpy. My dataset is the gold price per month since 1950. I've checked the dataset to ensure that there are no problems there.
In the image below my mouse is hovering roughly where the red circle is.
Please let me know if I can provide any further information.
I eventually reached a solution by directly editing the coordinates of the mouse after it had bean calculated:
.onPointerMove(p){
p={x: p.x-(compensationValue), y:p.y}
...
...
...
}
While I understand this is by far not the best solution to the problem I had, it has managed to resolve the problem and seemingly with no adverse effects on different screen sizes or when nesting components.
I have created my Pivot plotting and now looking for resctricting it for the last few days only.
I am not able to restrict the same. can some one help me on the same.
In the plot function use show_last = x
Where x is the number of bars to show from the latest bar.
For example to plot the pivots on the last 10 bars use:
plot(series = pivots, title = "Pivots", show_last = 10)
I'm trying to create a column chart with minimum pixel height columns. This is easy in chartjs (set the minBarLength property), however I can't figure out how to do so in amcharts.
I've tried setting series.column.template.minHeight to no effect. I've also tried setting pixelHeight and height, but also with no luck.
one workaround can be using scrollbar in Y axis like this following:
chart.scrollbarY = new am4core.Scrollbar();
chart.scrollbarY.start = 0;
chart.scrollbarY.end = 0.08;
with value Axis
valueAxis.min = 0;
valueAxis.max = 10;
This is not the best solution i agree but you can use it to slightly zoom with the buttons and scale and see
let me know if it works!
In my image I have 5 Objects in black-white form. Some are respectively small, some are bigger.
So what i am trying to do is drawing a BoundingBox or tag the objects which has less area than others (ex. under 10pixels/area) .
I couldn't make this happen, can anyone help?
That's two separate problems. The first is to select only objects above a certain area. So simply remove all objects below it:
clean = bwareaopen (im, 10); # remove all objects with area below 10
Then for the second problem there are many possibilities. You can get their borders:
borders = bwperim (clean);
imshow (borders);
You can label them:
labeled = bwlabel (clean);
imshow (labeled);
Or you can get their bounding box (which depending on the shape of your objects may overlap):
props = regionprops (clean, 'BoundingBox');
all_bb = props.BoundingBox;
boxes = false (size (clean));
for i = 1:numel (all_bb)
bb = all_bb{i};
bb(round (bb(2):bb(2)+bb(4), bb(1):bb(1)+bb(3))) = true;
end
imshow (boxes);
Note: this was written out of my head, no testing. There may be small oversights, but nothing major.
Is there a way in d3 to not draw overlapping tick labels? For example, if I have a bar chart, but the bars are only 5 pixels wide and the labels are 10 pixels wide, I end up with a cluttered mess. I'm currently working on an implementation to only draw the labels when they do not overlap. I can't find any existing way to do that, but wasn't sure if anyone else had dealt with this problem.
There is no way of doing this automatically in D3. You can set the number of ticks or the tick values explicitly (see the documentation), but you'll have to figure out the respective numbers/values yourself. Another option would be to rotate the labels such that there is less chance of them overlapping.
Alternatively, like suggested in the other answer, you could try using a force layout to place the labels. To clarify, you would use the force layout on the labels only -- this is completely independent of the type of chart. I have done this in this example, which is slightly more relevant than the one linked in the other answer.
Note that if you go with the force layout solution, you don't have to animate the position of the labels. You could simply compute the force layout until it converges and then plot the labels.
I've had a similar problem with multiple (sub-)axis, where the last tick overlaps my vertical axis in some situations (depending on the screen width), so I've just wrote a little function that compares the position of the end of the text label with the position of the next axis. This code is very specific to my use case, but could adapted easily to your needs:
var $svg = $('#svg');
// get the last tick of each of my sub-axis
$('.tick-axis').find('.tick:last-of-type').each(function() {
// get position of the end of this text field
var endOfTextField = $(this).offset().left + $(this).find('text').width();
// get the next vertical axis
var $nextAxis = $('line[data-axis="' + $(this).closest('.tick-axis').attr('data-axis') + '"]');
// there is no axis on the very right, so just use the svg width
var positionOfAxis = ($nextAxis.length > 0) ? $nextAxis.offset().left : $svg.offset().left + $svg.width();
// hide the ugly ones!
if (endOfTextField > positionOfAxis) {
$(this).attr('class', 'tick hide');
}
});
The ticks with color: aqua are the hidden ones: