Steema Central

Steema Software - Customer Support Forums
http://216.92.243.79/support/

TeeChart .NET For Blazor Chart does not zoom out correctly

http://216.92.243.79/support/viewtopic.php?f=4&t=18264

Page 1 of 1

TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Tue Nov 05, 2024 10:17 pm
by 15695569
Hello,

I have a chart that is being generated with the following script.

<script> var dynoTeeChart;
dynoTeeChart=new Tee.Chart('canvas1');
dynoTeeChart.scroll.direction ='both';
dynoTeeChart.zoom.direction ='both';
dynoTeeChart.panel.format.fill='#FFFFFF';
dynoTeeChart.panel.format.gradient.colors = ['#EAEAEA', '#FFFFFF'];
dynoTeeChart.panel.format.gradient.direction = 'topbottom';
dynoTeeChart.panel.format.gradient.visible = false;
dynoTeeChart.panel.format.stroke.fill='';
dynoTeeChart.panel.format.stroke.cap='butt';
dynoTeeChart.panel.format.shadow.visible=false;
dynoTeeChart.panel.margins.left=3;
dynoTeeChart.panel.margins.right=3;
dynoTeeChart.panel.margins.top=4;
dynoTeeChart.panel.margins.bottom=4;
dynoTeeChart.walls.back.visible=false;
dynoTeeChart.walls.back.format.fill='';
dynoTeeChart.walls.back.format.stroke.fill='';
dynoTeeChart.walls.back.format.gradient.colors = ['#EAEAEA', '#FFFFFF'];
dynoTeeChart.walls.back.format.gradient.direction = 'topbottom';
dynoTeeChart.walls.back.format.gradient.visible = true;
dynoTeeChart.walls.back.format.stroke.fill='#000000';
dynoTeeChart.walls.back.format.stroke.cap='butt';
dynoTeeChart.walls.back.format.shadow.visible=false;
dynoTeeChart.title.text='ILI Chart';
dynoTeeChart.title.format.font.style='16px Verdana';
dynoTeeChart.title.format.font.fill='#808080';
dynoTeeChart.title.format.font.shadow.color='#A9A9A9';
dynoTeeChart.title.format.font.shadow.width=1;
dynoTeeChart.title.format.font.shadow.height=1;
dynoTeeChart.title.format.font.shadow.visible=false;
dynoTeeChart.title.format.font.shadow.blur=0;
dynoTeeChart.footer.visible=false;
dynoTeeChart.axes.left.visible=true;
dynoTeeChart.axes.left.inverted=true;
dynoTeeChart.axes.left.automatic=false;
dynoTeeChart.axes.left.maximum=12;
dynoTeeChart.axes.left.minimum=0;
dynoTeeChart.axes.left.start=10;
dynoTeeChart.axes.left.end=100;
dynoTeeChart.axes.left.position=0;
dynoTeeChart.axes.left.labels.format.font.style='13px Verdana';
dynoTeeChart.axes.left.labels.format.font.fill='#808080';
dynoTeeChart.axes.left.labels.format.font.shadow.color='#A9A9A9';
dynoTeeChart.axes.left.labels.format.font.shadow.width=1;
dynoTeeChart.axes.left.labels.format.font.shadow.height=1;
dynoTeeChart.axes.left.labels.format.font.shadow.visible=false;
dynoTeeChart.axes.left.labels.format.font.shadow.blur=0;
dynoTeeChart.axes.left.format.stroke.fill='';
dynoTeeChart.axes.left.format.stroke.size=2;
dynoTeeChart.axes.left.format.stroke.cap='butt';
dynoTeeChart.axes.left.grid.format.stroke.fill='#A9A9A9';
dynoTeeChart.axes.left.grid.format.stroke.cap='butt';
dynoTeeChart.axes.left.title.text='Clock';
dynoTeeChart.axes.left.title.format.round.x=0;
dynoTeeChart.axes.left.title.format.round.y=0;
dynoTeeChart.axes.left.title.format.font.style='15px Verdana';
dynoTeeChart.axes.left.title.format.font.fill='#404040';
dynoTeeChart.axes.left.title.format.font.shadow.color='#A9A9A9';
dynoTeeChart.axes.left.title.format.font.shadow.width=1;
dynoTeeChart.axes.left.title.format.font.shadow.height=1;
dynoTeeChart.axes.left.title.format.font.shadow.visible=false;
dynoTeeChart.axes.left.title.format.font.shadow.blur=0;
dynoTeeChart.axes.left.title.format.fill='';
dynoTeeChart.axes.left.title.format.stroke.fill='';
dynoTeeChart.axes.left.title.format.gradient.colors = ['#FFD700', '#FFFFFF'];
dynoTeeChart.axes.left.title.format.gradient.direction = 'topbottom';
dynoTeeChart.axes.left.title.format.gradient.visible = false;
dynoTeeChart.axes.left.title.format.stroke.fill='#000000';
dynoTeeChart.axes.left.title.format.stroke.cap='butt';
dynoTeeChart.axes.left.title.format.shadow.visible=false;
dynoTeeChart.axes.top.visible=true;
dynoTeeChart.axes.top.start=0;
dynoTeeChart.axes.top.end=100;
dynoTeeChart.axes.top.position=0;
dynoTeeChart.axes.top.labels.format.font.style='13px Verdana';
dynoTeeChart.axes.top.labels.format.font.fill='#808080';
dynoTeeChart.axes.top.labels.format.font.shadow.color='#A9A9A9';
dynoTeeChart.axes.top.labels.format.font.shadow.width=1;
dynoTeeChart.axes.top.labels.format.font.shadow.height=1;
dynoTeeChart.axes.top.labels.format.font.shadow.visible=false;
dynoTeeChart.axes.top.labels.format.font.shadow.blur=0;
dynoTeeChart.axes.top.format.stroke.fill='#404040';
dynoTeeChart.axes.top.format.stroke.size=2;
dynoTeeChart.axes.top.format.stroke.cap='butt';
dynoTeeChart.axes.top.grid.format.stroke.fill='#A9A9A9';
dynoTeeChart.axes.top.grid.format.stroke.cap='butt';
dynoTeeChart.axes.right.visible=true;
dynoTeeChart.axes.right.start=0;
dynoTeeChart.axes.right.end=100;
dynoTeeChart.axes.right.position=0;
dynoTeeChart.axes.right.labels.format.font.style='13px Verdana';
dynoTeeChart.axes.right.labels.format.font.fill='#808080';
dynoTeeChart.axes.right.labels.format.font.shadow.color='#A9A9A9';
dynoTeeChart.axes.right.labels.format.font.shadow.width=1;
dynoTeeChart.axes.right.labels.format.font.shadow.height=1;
dynoTeeChart.axes.right.labels.format.font.shadow.visible=false;
dynoTeeChart.axes.right.labels.format.font.shadow.blur=0;
dynoTeeChart.axes.right.format.stroke.fill='';
dynoTeeChart.axes.right.format.stroke.size=2;
dynoTeeChart.axes.right.format.stroke.cap='butt';
dynoTeeChart.axes.right.grid.format.stroke.fill='#A9A9A9';
dynoTeeChart.axes.right.grid.format.stroke.cap='butt';
dynoTeeChart.axes.bottom.visible=true;
dynoTeeChart.axes.bottom.automatic=false;
dynoTeeChart.axes.bottom.maximum=17.52 + 0.5;
dynoTeeChart.axes.bottom.minimum=17.52 - 0.5;
dynoTeeChart.axes.bottom.start=0;
dynoTeeChart.axes.bottom.end=100;
dynoTeeChart.axes.bottom.position=0;
dynoTeeChart.axes.bottom.labels.format.font.style='13px Verdana';
dynoTeeChart.axes.bottom.labels.format.font.fill='#808080';
dynoTeeChart.axes.bottom.labels.format.font.shadow.color='#A9A9A9';
dynoTeeChart.axes.bottom.labels.format.font.shadow.width=1;
dynoTeeChart.axes.bottom.labels.format.font.shadow.height=1;
dynoTeeChart.axes.bottom.labels.format.font.shadow.visible=false;
dynoTeeChart.axes.bottom.labels.format.font.shadow.blur=0;
dynoTeeChart.axes.bottom.format.stroke.fill='#404040';
dynoTeeChart.axes.bottom.format.stroke.size=2;
dynoTeeChart.axes.bottom.format.stroke.cap='butt';
dynoTeeChart.axes.bottom.grid.visible=false;
dynoTeeChart.axes.bottom.grid.format.stroke.fill='';
dynoTeeChart.axes.bottom.grid.format.stroke.cap='butt';
dynoTeeChart.axes.bottom.title.text='Odometer';
dynoTeeChart.axes.bottom.title.format.round.x=0;
dynoTeeChart.axes.bottom.title.format.round.y=0;
dynoTeeChart.axes.bottom.title.format.font.style='15px Verdana';
dynoTeeChart.axes.bottom.title.format.font.fill='#404040';
dynoTeeChart.axes.bottom.title.format.font.shadow.color='#A9A9A9';
dynoTeeChart.axes.bottom.title.format.font.shadow.width=1;
dynoTeeChart.axes.bottom.title.format.font.shadow.height=1;
dynoTeeChart.axes.bottom.title.format.font.shadow.visible=false;
dynoTeeChart.axes.bottom.title.format.font.shadow.blur=0;
dynoTeeChart.axes.bottom.title.format.fill='';
dynoTeeChart.axes.bottom.title.format.stroke.fill='';
dynoTeeChart.axes.bottom.title.format.gradient.colors = ['#FFD700', '#FFFFFF'];
dynoTeeChart.axes.bottom.title.format.gradient.direction = 'topbottom';
dynoTeeChart.axes.bottom.title.format.gradient.visible = false;
dynoTeeChart.axes.bottom.title.format.stroke.fill='#000000';
dynoTeeChart.axes.bottom.title.format.stroke.cap='butt';
dynoTeeChart.axes.bottom.title.format.shadow.visible=false;
var Series1=dynoTeeChart.addSeries(new Tee.PointXY());
Series1.title='Anomalies';
Series1.format.fill='#7799D6';
Series1.format.stroke.cap='butt';
Series1.format.shadow.visible=false;
Series1.color = '#7799D6';
Series1.legendcolor = '#7799D6';
Series1.colorEach='no';
Series1.hover.enabled=false;
Series1.data.values=[0.045];
Series1.data.x=[17.52];
Series1.pointer.format.gradient.visible=false;
Series1.pointer.style='point';
Series1.pointer.width=0;
Series1.pointer.height=0;
Series1.pointer.format.shadow.visible=false;
Series1.dateFormat='d';
Series1.marks.visible=false;
Series1.marks.format.round.x=0;
Series1.marks.format.round.y=0;
Series1.marks.format.font.style='12px Verdana';
Series1.marks.format.font.fill='#000000';
Series1.marks.format.font.shadow.color='#A9A9A9';
Series1.marks.format.font.shadow.width=1;
Series1.marks.format.font.shadow.height=1;
Series1.marks.format.font.shadow.visible=false;
Series1.marks.format.font.shadow.blur=0;
Series1.marks.format.fill='#FFFFFF';
Series1.marks.format.gradient.colors = ['#FFD700', '#FFFFFF'];
Series1.marks.format.gradient.direction = 'topbottom';
Series1.marks.format.gradient.visible = false;
Series1.marks.format.stroke.fill='#6B8AC1';
Series1.marks.format.stroke.cap='butt';
Series1.marks.format.shadow.visible=false;
Series1.marks.arrow.visible=false;
Series1.marks.arrow.length=0;
dynoTeeChart.legend.position='right';
dynoTeeChart.legend.legendStyle='series';
dynoTeeChart.legend.format.round.x=0;
dynoTeeChart.legend.format.round.y=0;
dynoTeeChart.legend.format.font.style='13px Verdana';
dynoTeeChart.legend.format.font.fill='#080808';
dynoTeeChart.legend.format.font.shadow.color='#A9A9A9';
dynoTeeChart.legend.format.font.shadow.width=1;
dynoTeeChart.legend.format.font.shadow.height=1;
dynoTeeChart.legend.format.font.shadow.visible=false;
dynoTeeChart.legend.format.font.shadow.blur=0;
dynoTeeChart.legend.format.fill='';
dynoTeeChart.legend.format.stroke.fill='';
dynoTeeChart.legend.format.gradient.colors = ['#FFD700', '#FFFFFF'];
dynoTeeChart.legend.format.gradient.direction = 'topbottom';
dynoTeeChart.legend.format.gradient.visible = false;
dynoTeeChart.legend.format.stroke.fill='';
dynoTeeChart.legend.format.stroke.cap='butt';
dynoTeeChart.legend.format.shadow.visible=false;
dynoTeeChart.legend.transparent=true;
dynoTeeChart.legend.fontColor=true;
dynoTeeChart.legend.symbol.format.stroke.fill='#00000000';
dynoTeeChart.legend.symbol.format.stroke.cap='butt';
dynoTeeChart.legend.symbol.format.shadow.color='#A9A9A9';
dynoTeeChart.legend.symbol.format.shadow.width=0;
dynoTeeChart.legend.symbol.format.shadow.height=0;
dynoTeeChart.legend.symbol.format.shadow.visible=false;
dynoTeeChart.legend.symbol.format.shadow.blur=0;
dynoTeeChart.axes.bottom.labels.format.font.fill = 'rgba(0,0,0,0.6)';
dynoTeeChart.axes.bottom.labels.format.font.setSize('10px');
dynoTeeChart.series.items[0].marks.transparent = true;
chartFeatures(dynoTeeChart);
resizeC(dynoTeeChart);
var myFormat = new Tee.Format(dynoTeeChart);
myFormat.fill=Series1.color;
myFormat.transparency=0.2;
var axisX1, axisY1, axisX2, axisY2, vertAxis;
dynoTeeChart.ondraw = function()
{
axisX1 = dynoTeeChart.axes.bottom.calc(17.52);
axisY1 = dynoTeeChart.axes.left.calc(0.045);
axisX2 = dynoTeeChart.axes.bottom.calc(17.530583333333333333333333333);
axisY2 = dynoTeeChart.axes.left.calc(0.1546483937348400055308467568);
myFormat.rectangle(axisX1, axisY1, axisX2-axisX1, axisY2-axisY1);

};
dynoTeeChart.isNLc = true;
dynoTeeChart.draw();
</script>

The axis values are being generated with this c# method:

private string GetBoxParameters(AnomalyChartPoint[] points)
{
StringBuilder sb = new StringBuilder();
foreach (AnomalyChartPoint point in points)
{
sb.AppendFormat("axisX1 = dynoTeeChart.axes.bottom.calc({0});\n", point.XBegin);
sb.AppendFormat("axisY1 = dynoTeeChart.axes.left.calc({0});\n", point.YBegin / 30.0m);
sb.AppendFormat("axisX2 = dynoTeeChart.axes.bottom.calc({0});\n", point.XBegin + point.XLength);
sb.AppendFormat("axisY2 = dynoTeeChart.axes.left.calc({0});\n", (point.YBegin + point.YLength) / 30.0m);
sb.AppendLine("myFormat.rectangle(axisX1, axisY1, axisX2-axisX1, axisY2-axisY1);");
}
return sb.ToString();
}

The chart zoom out was working correctly prior to the axis values being generated from GetBoxParameters.

Thanks,
Jeff

Re: TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Wed Nov 06, 2024 5:10 pm
by 15695569
It looks like the zoom out is working correctly but it doesn't reset the chart to the original size. I currently have my bottom axis set to +-0.5 for my data range and zoom seems to be using a different property to set the chart back to the original size.

Re: TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Thu Nov 07, 2024 2:54 pm
by Marc
Hello,

On unzoom, the Axes are resetting to automatic. With only one point in the Chart there is no delimitation to the next point .. it could be infinite. That means that the plotted rectangle has no tangible limit.

If you were to plot two points, eg.

Code: Select all

Series1.data.values=[0.045,0.05];
Series1.data.x=[17.52,17.53];
and set some tangible axis scale, eg.

Code: Select all

dynoTeeChart.axes.bottom.increment = 0.01;
then it becomes a little clearer.

I commented the Point style line too:

Code: Select all

//Series1.pointer.style='point';
That doesn't seem to be a correctly parsed line from C# PointerStyle.

I thought it useful to see the pointer:

Code: Select all

Series1.pointer.width=4;
Series1.pointer.height=4;
Regards,
Marc Meumann

Re: TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Thu Nov 07, 2024 3:54 pm
by 15695569
Hi Marc,

Is it possible to override this somehow with an event handler or something? I already have my zoom and scroll direction set to horizontal, but I need to ensure that my left axis is always set from 0 - 12 regardless of the data set being displayed in the graph.
Do you know if there is also a way I can make the boxes disappear similar to the series points when I scroll the chart. They currently scroll/display across the entire canvas instead of staying within the bounds of the chart.
Graph.PNG
Graph.PNG (29.8 KiB) Viewed 613 times
Thanks

Re: TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Mon Nov 11, 2024 10:38 am
by Marc
Hello,

The example code from your earlier post enables both zoom and scroll as 'both' directions. If you require only horizontal, then the C# code for the chart would be:

Code: Select all

tChart.Zoom.Direction = ZoomDirections.Horizontal;
tChart.Chart.Panning.Allow = ScrollModes.Horizontal;
That will parse to javascript:

Code: Select all

dynoTeeChart.scroll.direction ='horizontal';
dynoTeeChart.zoom.direction ='horizontal';
With respect axis scale and clipping. It could be resolved in this way in the ondraw event:

Code: Select all

dynoTeeChart.ondraw = function()
{
	dynoTeeChart.axes.left.setMinMax(0,12);
	dynoTeeChart.aspect.clipRect(dynoTeeChart.chartRect);

	axisX1 = dynoTeeChart.axes.bottom.calc(17.52);
	axisY1 = dynoTeeChart.axes.left.calc(0.045);
	axisX2 = dynoTeeChart.axes.bottom.calc(17.530583333333333333333333333);
	axisY2 = dynoTeeChart.axes.left.calc(0.1546483937348400055308467568);
	myFormat.rectangle(axisX1, axisY1, axisX2-axisX1, axisY2-axisY1);

};
Regards,
Marc

Re: TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Tue Nov 12, 2024 10:54 pm
by 15695569
Hi Marc,

I have the chart zooming out correctly now thanks. However I noticed that when I added dynoTeeChart.aspect.clipRect(dynoTeeChart.chartRect) that my chart axes no longer updated when I zoomed in or out?

Thanks

Re: TeeChart .NET For Blazor Chart does not zoom out correctly

Posted: Wed Nov 13, 2024 3:13 pm
by Marc
Hello,

Ah yes, good point, the clipping zone needs to be restored after this use.

ie:

Code: Select all

dynoTeeChart.ondraw = function()
{
	dynoTeeChart.axes.left.setMinMax(0,12);
	dynoTeeChart.aspect.clipRect(dynoTeeChart.chartRect);

	axisX1 = dynoTeeChart.axes.bottom.calc(17.52);
	axisY1 = dynoTeeChart.axes.left.calc(0.045);
	axisX2 = dynoTeeChart.axes.bottom.calc(17.530583333333333333333333333);
	axisY2 = dynoTeeChart.axes.left.calc(0.1546483937348400055308467568);
	myFormat.rectangle(axisX1, axisY1, axisX2-axisX1, axisY2-axisY1);

	dynoTeeChart.ctx.restore();
};
Regards,
Marc
All times are UTC
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Limited
https://www.phpbb.com/