TeeChart .NET For Blazor Chart does not zoom out correctly

[dynamicrisk]

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

[dynamicrisk]

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.

[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

[dynamicrisk]

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 (29.8 KiB) Viewed 14989 times

Thanks

[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

[dynamicrisk]

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

[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