Steema Central

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

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.

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. and set some tangible axis scale, eg. then it becomes a little clearer.

I commented the Point style line too: That doesn't seem to be a correctly parsed line from C# PointerStyle.

I thought it useful to see the pointer: Regards,
Marc Meumann

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. Thanks

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:
That will parse to javascript:
With respect axis scale and clipping. It could be resolved in this way in the ondraw event:
Regards,
Marc

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

Hello,

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

ie:
Regards,
Marc