Oxyplot move all Axis labels by a custom constraint - winforms

I have a problem with OxyPlot (Windows form) Axis labels: I'd like to move y Axis label by a custom constraint, for example put all labels where indicated by arrows in the figure:
Something like Axis.LabelPadding = 10;
The Axis is a CategoryAxis with Position = AxisPosition.Left, nothing else.
How should I add a padding to each label of my axis?

To solve this problem you have to use IsTickCentered = true property when you define your CategoryAxis.
new CategoryAxis { IsTickCentered = true };

Related

Change axis label Color (JFreeChart)

Can anyone tell me how I can proceed to change the color of the axes' labels as circled below?
You can use setTickLabelPaint() and setLabelPaint() like this:
Axis domain = plot.getDomainAxis();
domain.setTickLabelPaint(Color.blue);
domain.setLabelPaint(Color.blue);
Axis range = plot.getRangeAxis();
range.setTickLabelPaint(Color.red);
range.setLabelPaint(Color.red);

Reseting zoom and pan when updating chart in livecharts

I'm using beto-rodriguez's livecharts for VB.NET/WPF, where I'm setting the source data in the code-behind and showing a plot when the user clicks a button.
I have enabled the zooming feature on my chart using chart.Zoom = ZoomingOptions.X. My issue here if that if I zoom to 150% and pan away from the point (0,0) for example, and I load a new plot on the same control, the zoom is not reset, as the new plot will be zoomed 150% and panned by the same value.
Is there a way to reset the chart zoom and pan every time its .Series value is reset ?
By the way, my x-axis contains dates, therefore, setting the min and max values wouldn't work.
Your answer is right, there you are forcing the range of your axis, but you can also let the chart to try to auto scale setting your axis limits to double.NaN
From the site: https://lvcharts.net/App/examples/v1/wf/Zooming%20and%20panning
cartesianChart1.AxisX[0].MinValue = double.NaN;
cartesianChart1.AxisX[0].MaxValue = double.NaN;
cartesianChart1.AxisY[0].MinValue = double.NaN;
cartesianChart1.AxisY[0].MaxValue = double.NaN;
I found the solution :
xAxis.Labels = labels
' Run these two lines every time the chart is updated
xAxis.MinValue = 0
xAxis.MaxValue = labels.Count - 1
Where xAxis is the name of my Axis control and labels is a list of strings containing the x-axis dates.

Add Markers in WPF

I need to add markers to my map. Problem: I'm using WPF, not WinForms.
GMapMarker marker = new GMapMarker(new PointLatLng(-25.966688, 32.580528));
gmap.Markers.Add(marker);
Now according to this question the solution is:
marker.Shape = new MarkerShape(....);
Could someone explain to me, how to I initalize this shape?
Thanks!
I resolved the problem with:
marker.Shape = new Ellipse
{
Width = 10,
Height = 10,
Stroke = Brushes.Black,
StrokeThickness = 1.5
};
That's a little black circle.
You have to add a new UserControl - your own, and inside the control put a image you like (for example pin image). Note that all the events (like Click event) must be implement inside a control.
After that you can add the marker like:
GMapMarker marker = new GMapMarker(new PointLatLng(##, ##));
marker.Shape = new PinControl();
gmap.Markers.Add(marker);

Fabric.js auto-size group controls when contained objects change size

When I have a group of fabric IText objects and I change all their font sizes together, the grouped text objects all shrink or grow according to the font size, but the group controls and border stay in place rather than also changing in size. My question is, how do I get the group controls to auto-size after changing the objects inside the group?
Looking through the code for Fabric, I can't figure out how the boundaries get set in the first place on the group. I have tried calling _setCoords() and setCoords() on the group, but that moves the group to 0, 0 on the canvas and keeps the height and width the same. Calling _setCoords(true) has no effect.
I have also tried the following code in which I attempt to replace the old group with a new one containing the same objects, which would theoretically draw new boundaries, but it seems like a clunky solution. Also, it doesn't work: the new group boundaries and controls do not appear.
var selected = [];
var all = scope.canvas.getObjects();
for(var x in all) {
if(all.active) {
selected[selected.length] = x;
}
}
scope.canvas._discardActiveGroup();
var objects = [];
for(var x in selected) {
objects[x] = scope.canvas.getObjects()[x];
}
var group = new fabric.Group(objects,{
originX: 'center',
originY: 'center',
canvas: scope.canvas
});
//Using $timeout so that this will wait until current $scope digest is finished
$timeout(function () {
scope.canvas.setActiveGroup(group);
scope.canvas.renderAll();
}, 0);
scope.canvas.renderAll();
EDIT:
I think this is related to another problem where after the text object changes size due to font size change, its selection area remains where it was before the size change. That is, it selects the object if you click within the pre-resize bounding rectangle, regardless of the post-resize bounding rectangle. Only after selecting some other object or deselecting all objects does selection work as expected for the object. I call setCoords() for the objects, so their boundaries are drawn correctly.
There were two parts to this problem, as I said in my edit to the question. Solving my problem required both of the solutions below.
Bug #1: IText object's selection area remains as it was before size change even if you use setCoords(). This is because setCoords() "sets corner position coordinates based on current angle, width and height" -- but it does not update width and height based on changes to the text. That only occurs during the method _renderViaNative(ctx):
//inside _renderViaNative:
this.width = this._getTextWidth(ctx, textLines);
this.height = this._getTextHeight(ctx, textLines);
Solution: Because I am actually using a custom descending class of IText, I used an override of the setCoords function to fix it. Something like this override should really be part of the IText class:
/** #Override */
setCoords : function () {
var ctx = this.canvas.getContext();
var textLines = this.text.split(this._reNewline);
this._setTextStyles(ctx);
this.width = this._getTextWidth(ctx, textLines);
this.height = this._getTextHeight(ctx, textLines);
this.callSuper('setCoords');
},
Bug #2: The group's selection area does not refresh after the IText object(s) that it contains change size, even if you call setCoords. If you call _calcBounds with a false parameter, it sets the group's center point by calculating the objects' center point -- but because the objects have been reset to have coordinates relative to the group center as (0,0) for them, the recalculation comes up with (0,0) as the center, and therefore, the whole group moves so that its center is at (0,0) on the canvas. If you call _calcBounds with a true parameter, it resizes around its original center, rather than around the new center, and you can't manually reset the center because that will make the objects move, too.
Solution: Recalculate the boundaries from scratch by resetting the objects' coordinates. I did this mainly by cannibalizing the function addWithUpdate(object).
// set the objects to their not-in-group coordinates
activeGroup.destroy();
// since _restoreObjectsState (inside destroy) set objects inactive, set them active
activeGroup.forEachObject(activeGroup._setObjectActive, activeGroup);
// now we can call _calcBounds without bouncing the group to 0,0
activeGroup._calcBounds();
// set the objects to their in-group coordinates
activeGroup._updateObjectsCoords();

Telerik bar chart x-axis with long texts

I'm trying the telerik bar chart in my mvc application. The texts on the x-axis labels can sometimes be very long and then they overlap.
How can i solve this? can i use a tooltip for this? and how to set the tooltip text for each bar?
Thanks in advance.
You can add a tooltip by adding Tooltip(true) like so:
Html.Telerik().Chart()
.Name("chart")
.Theme("vista")
.Series( series => series
.Bar( /*data*/)
.CategoryAxis( axis => axis
.Categories( /*data*/)
.Tooltip(true)
This will display the value of the Series (x-axis) on hover.
I know you can rotate the labels on the category axis by doing something like this:
.CategoryAxis( axis =>
{
axis.Categories( /*data*/ );
axis.Labels(labels => labels.Rotation(45));//this rotates 45 degrees (you can use whatever value you want)
}
but I don't think the Label method is available on the Series. You may consider flipping the Series and the Axis (if that would still make sense for your data). You may also consider formatting (abbreviating) the x-axis labels and adding your own legend.

Resources