Reseting zoom and pan when updating chart in livecharts - wpf

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.

Related

In wpf, using livecharts, how can I set minimum distance between point and columns?

I'm using wpf and livecharts to wpf app. I want to set minimum distances at but can't find out options.
I'm using 2 kind of charts. one is lineseries chart and the other is column series chart.
Because livechart automatically resize axis X and Y to fit, sometimes the chart is too crowded to see. So I want to set minimum distance between points and columns. panning will solve browsing part.
But problem is, I can't find out setting option. I've checked chart, axis and series options and tried some options. width, minwidth, margin, padding.. but all options didn't work.
My last option is make page and let user change page to see. But if user want to compare another page's value, it is not easy. So I want to avoid it.
Is there any option I'm missing? Please help.
You have to zoom in and out. To do this you have to manually assign an axis to the chart. Axis exposes properties like MinValue and MaxValue. You can use this values to zoom in (e.g. MaxValue < max data x value) or out (e.g. MaxValue > max data x value). MinValue and MaxValue control the visible section (or range). You would need to pan the graph to view other ranges.
To enable panning you have to set the Zoom property on the chart to the axis you wish to pan:
<wpf:CartesianChart Zoom="Xy">
<wpf:CartesianChart.AxisX>
<wpf:Axis MinValue="0" MaxValue="20" />
</wpf:CartesianChart.AxisX >
<wpf:CartesianChart.Series>
<wpf:LineSeries Title="Values" Values="{Binding DataValues}" />
</wpf:CartesianChart.Series>
</wpf:CartesianChart>

yAxis labels are being cut off in ngEchars (Echarts)

I have user ngEcharts (angularjs plugin of Echarts). When i implement bar chart yaxis labels are cutting off.
can anyone point me on the direction to how to prevent this or increase yAxis label area or decrease chart area?
After Ovilia's link i was able to remove cut off using it's grid property.
It has containLabel property.
Once i set containLabel it to true, i didn't need to set grid size. it worked!

How to set telerik chart TrackBall position programatically

I have created a custom control which has Telerik RadCartesianChart. This custom control creates any number of charts based on user dropdown selection. The number of charts on screen can vary but all have same x axis. I added a chart track ball line on custom control which is working fine on one chart on mouse movement. I want to add the same track ball line on all of the other chart on window so that movement on one track ball would reflect the same position on the other charts.
How could I implement this behavior programmatically?
I don't know if you can do what you are attempting without adding a ChartTrackBallController to every chart.
What I'd suggest is adding multiple series to the one chart, share the X axis but have multiple Y axes as required. This way the ChartTrackBallController will pick a point on all series in the chart.
// Trackball
ChartTrackballController ctbcMain = new ChartTrackballController();
ctbcMain.TextNeeded += ctbcMain_TextNeeded;
ctbcMain.InnerPointSize = new SizeF(0, 0);
ctbcMain.OuterPointsSize = new SizeF(0, 0);
rcvUPM.Controllers.Add(ctbcMain);
rcvUPM.ShowTrackBall = true;
In the above code snippit, rcvUPM is a radchartview containing all the data series you want to show, and ctbcMain_TextNeeded is used to customise the content of what the hover for the trackball shows.
It seems that by default the hover content will contain multiple points from each series, even after the InnerPointSize and OuterPointsSize was set to zero on advice by Telerik support a LINQ FirstOrDefault was needed on the collection of DataPointInfo objects to limit it to one point per series.

how to get slider line on x axis and y axis for Chart in codenameone

I want two slider lines - one for x-axis and another for y-axis to show accurate result at any point in the line chart. As slider line move through the any axis it should display the crossing point values (display cross point values w.r.t. axis where slider line overlaps graph ) on the chart. Is there any method available for it ? If not how do I proceed for this ?
You can just place a horizontal and vertical slider next to the charts. However, I'm assuming you want to use them like a scrollbar?
You might prefer using gestures like drag and pinch to work with charts.

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