TeeChart .NET For Blazor Chart not displaying

dynamicrisk · Post by **dynamicrisk** » Wed Oct 02, 2024 9:10 pm

Hello,

I am trying to display a chart in a test project. My Chart.razor file contains the following code:

@page "/chart"

@using TestApp.Chart;
@using Microsoft.Extensions.Localization;
@using System.Reflection;
@using System.Resources;
@using System.IO;
@using Microsoft.AspNetCore.Components;

<h3>
    @((MarkupString)(title))
</h3>

<br />
<br />

@((MarkupString)(supportUnit))
@((MarkupString)(chartResize))

<!-- Tab content -->
<div id="Example" class="tabcontent">

    <canvas id="canvas1" width="1400" height="500" style="border: 0px solid #808080;" oncl>
        This browser does not seem to support HTML5 Canvas.
    </canvas>

</div>

<div id="Source" class="tabcontent">
    <br />
    @((MarkupString)chartCode)
</div>

@((MarkupString)chartJS)

@code
{
    String chartImage;
    String chartCode;
    String chartResize;
    String supportUnit;
    String? chartJS = String.Empty;
    string title;

    protected override async Task OnInitializedAsync()
    {
        ChartCreationFactory chart = new ChartCreationFactory();
        chartJS = await chart.CreateJSChart();

        title = "Chart";
    }
}

======

chart.CreateJSChart() returns the following script:

Code: Select all

<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.palette= new Tee.Palette(["#7799D6", "#FFCF68", "#FF7F47", "#81CADB", "#5E739E", "#50AE96", "#E63B41", "#FFF390", "#90EAD1", "#A3A3A3", "#FFFFC0", "#E7E7E7"]);
  dynoTeeChart.axes.left.visible=true;
  dynoTeeChart.axes.left.start=0;
  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.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=1000;
  dynoTeeChart.axes.bottom.minimum=0;
  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 axis0=  dynoTeeChart.axes.add(false,false);
axis0.visible=true;
axis0.start=0;
axis0.end=8;
axis0.position=0;
axis0.labels.format.font.style="13px Verdana";
axis0.labels.format.font.fill="#808080";
axis0.labels.format.font.shadow.color="#A9A9A9";
axis0.labels.format.font.shadow.width=1;
axis0.labels.format.font.shadow.height=1;
axis0.labels.format.font.shadow.visible=false;
axis0.labels.format.font.shadow.blur=0;
axis0.format.stroke.fill="";
axis0.format.stroke.size=2;
axis0.format.stroke.cap="butt";
axis0.grid.format.stroke.fill="#A9A9A9";
axis0.grid.format.stroke.cap="butt";
var axis1=  dynoTeeChart.axes.add(false,false);
axis1.visible=true;
axis1.inverted=true;
axis1.automatic=false;
axis1.maximum=12;
axis1.minimum=0;
axis1.start=10;
axis1.end=100;
axis1.position=0;
axis1.labels.format.font.style="13px Verdana";
axis1.labels.format.font.fill="#808080";
axis1.labels.format.font.shadow.color="#A9A9A9";
axis1.labels.format.font.shadow.width=1;
axis1.labels.format.font.shadow.height=1;
axis1.labels.format.font.shadow.visible=false;
axis1.labels.format.font.shadow.blur=0;
axis1.format.stroke.fill="";
axis1.format.stroke.size=2;
axis1.format.stroke.cap="butt";
axis1.grid.format.stroke.fill="#A9A9A9";
axis1.grid.format.stroke.cap="butt";
axis1.title.text="Clock";
axis1.title.format.round.x=0;
axis1.title.format.round.y=0;
axis1.title.format.font.style="15px Verdana";
axis1.title.format.font.fill="#404040";
axis1.title.format.font.shadow.color="#A9A9A9";
axis1.title.format.font.shadow.width=1;
axis1.title.format.font.shadow.height=1;
axis1.title.format.font.shadow.visible=false;
axis1.title.format.font.shadow.blur=0;
axis1.title.format.fill="";
axis1.title.format.stroke.fill="";
axis1.title.format.gradient.colors = ["#FFD700", "#FFFFFF"];
axis1.title.format.gradient.direction = "topbottom";
axis1.title.format.gradient.visible = false;
axis1.title.format.stroke.fill="#000000";
axis1.title.format.stroke.cap="butt";
axis1.title.format.shadow.visible=false;
  var Series1=dynoTeeChart.addSeries(new Tee.PointXY());
  Series1.title="points1";
  Series1.format.fill="#7799D6";
  Series1.format.stroke.cap="butt";
  Series1.format.shadow.visible=false;
  Series1.colorEach="no";
  Series1.hover.enabled=false;
  Series1.data.values=[1.0007928867830755,5.09095980594684,0.3233929793485668,8.991546865987512,8.406538656752122,7.848772044361571,6.195099755469368,2.470215724838154,5.889326610739117,11.76066005522772,7.625285168066473,2.635777544192528,7.160955813741605,10.316956390432349,9.2154334344742,6.25269777465043,1.719453664796112,0.38376268976601935,8.831074576833824,2.142060697407624,6.635003994450328,10.561246032657225,4.1417271150369706,10.643084622833513,2.6746995747409845];
  Series1.data.x=[0,893.2457182573048,552.0158581390341,44.99631612292043,561.3558141411736,669.8950982788415,317.2411646119212,871.7600268280412,591.8532106131445,396.8103641151822,676.9772074452405,660.9123959515119,328.39571454787506,845.9016046056041,930.434172213013,323.3827796396561,712.7021339775562,920.3844694143121,367.89096587426275,94.80184135303004,117.77314340544054,641.1678651717632,570.5001158145282,454.6752348191526,210.04994414903376];
  Series1.pointer.format.gradient.visible=false;
  Series1.pointer.style="rectangle";
  Series1.pointer.width=8;
  Series1.pointer.height=8;
  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;
  Series1.vertAxis=axis1;
  var Series2=dynoTeeChart.addSeries(new Tee.PointXY());
  Series2.title="points2";
  Series2.format.fill="#FFCF68";
  Series2.format.stroke.cap="butt";
  Series2.format.shadow.visible=false;
  Series2.colorEach="no";
  Series2.hover.enabled=false;
  Series2.data.values=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  Series2.data.x=[810.2725773061984,186.40463703504295,5.371035277584091,495.2649261218918,66.77719199825371,634.6808656133829,58.11407302427784,373.8322237885081,296.3020475934274,601.7501670574128,786.1798466329458,199.81992928099746,557.3521876108592,295.4526209647182,102.9324445552724];
  Series2.pointer.format.gradient.visible=false;
  Series2.pointer.style="downtriangle";
  Series2.pointer.width=24;
  Series2.pointer.height=24;
  Series2.pointer.format.shadow.visible=false
  Series2.dateFormat="d";
  Series2.marks.visible=false;
  Series2.marks.format.round.x=0;
  Series2.marks.format.round.y=0;
  Series2.marks.format.font.style="12px Verdana";
  Series2.marks.format.font.fill="#000000";
  Series2.marks.format.font.shadow.color="#A9A9A9";
  Series2.marks.format.font.shadow.width=1;
  Series2.marks.format.font.shadow.height=1;
  Series2.marks.format.font.shadow.visible=false;
  Series2.marks.format.font.shadow.blur=0;
  Series2.marks.format.fill="#FFFFFF";
  Series2.marks.format.gradient.colors = ["#FFD700", "#FFFFFF"];
  Series2.marks.format.gradient.direction = "topbottom";
  Series2.marks.format.gradient.visible = false;
  Series2.marks.format.stroke.fill="#E6BA5E";
  Series2.marks.format.stroke.cap="butt";
  Series2.marks.format.shadow.visible=false;
  Series2.marks.arrow.visible=false;
  Series2.marks.arrow.length=0;
  Series2.vertAxis=axis0;
  var Series3=dynoTeeChart.addSeries(new Tee.PointXY());
  Series3.visible=false;
  Series3.title="points3";
  Series3.format.fill="#FF7F47";
  Series3.format.stroke.cap="butt";
  Series3.format.shadow.visible=false;
  Series3.colorEach="no";
  Series3.hover.enabled=false;
  Series3.data.values=[9.34846513378554,5.705295072804015,10.697416915560254,3.8480405750688846,11.591726434551433,9.728859719168792,1.8131468969486213,2.423217710941529,0.7852049700313479,0.3785440475087434,11.111580353767822,2.2951156177060894,2.7255197890305425,5.727988143044055,8.904809783286836,7.525374003765464,4.898394080552196,0.7033589806421761,5.958256563234704,10.278307738182525];
  Series3.pointer.format.gradient.visible=false;
  Series3.pointer.style="rectangle";
  Series3.pointer.width=8;
  Series3.pointer.height=8;
  Series3.pointer.format.shadow.visible=false
  Series3.dateFormat="d";
  Series3.marks.visible=false;
  Series3.marks.format.round.x=0;
  Series3.marks.format.round.y=0;
  Series3.marks.format.font.style="12px Verdana";
  Series3.marks.format.font.fill="#000000";
  Series3.marks.format.font.shadow.color="#A9A9A9";
  Series3.marks.format.font.shadow.width=1;
  Series3.marks.format.font.shadow.height=1;
  Series3.marks.format.font.shadow.visible=false;
  Series3.marks.format.font.shadow.blur=0;
  Series3.marks.format.fill="#FFFFFF";
  Series3.marks.format.gradient.colors = ["#FFD700", "#FFFFFF"];
  Series3.marks.format.gradient.direction = "topbottom";
  Series3.marks.format.gradient.visible = false;
  Series3.marks.format.stroke.fill="#E67240";
  Series3.marks.format.stroke.cap="butt";
  Series3.marks.format.shadow.visible=false;
  Series3.marks.arrow.visible=false;
  Series3.marks.arrow.length=0;
  Series3.vertAxis=axis1;
  var Series4=dynoTeeChart.addSeries(new Tee.PointXY());
  Series4.visible=false;
  Series4.title="points4";
  Series4.format.fill="#81CADB";
  Series4.format.stroke.cap="butt";
  Series4.format.shadow.visible=false;
  Series4.colorEach="no";
  Series4.hover.enabled=false;
  Series4.data.values=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
  Series4.data.x=[0,50,100,150,200,250,300,350,400,450,500,550,600,650,700,750,800,850,900,950];
  Series4.pointer.format.gradient.visible=false;
  Series4.pointer.style="rectangle";
  Series4.pointer.width=8;
  Series4.pointer.height=8;
  Series4.pointer.format.shadow.visible=false
  Series4.dateFormat="d";
  Series4.marks.visible=false;
  Series4.marks.format.round.x=0;
  Series4.marks.format.round.y=0;
  Series4.marks.format.font.style="12px Verdana";
  Series4.marks.format.font.fill="#000000";
  Series4.marks.format.font.shadow.color="#A9A9A9";
  Series4.marks.format.font.shadow.width=1;
  Series4.marks.format.font.shadow.height=1;
  Series4.marks.format.font.shadow.visible=false;
  Series4.marks.format.font.shadow.blur=0;
  Series4.marks.format.fill="#FFFFFF";
  Series4.marks.format.gradient.colors = ["#FFD700", "#FFFFFF"];
  Series4.marks.format.gradient.direction = "topbottom";
  Series4.marks.format.gradient.visible = false;
  Series4.marks.format.stroke.fill="#74B6C5";
  Series4.marks.format.stroke.cap="butt";
  Series4.marks.format.shadow.visible=false;
  Series4.marks.arrow.visible=false;
  Series4.marks.arrow.length=0;
  Series4.vertAxis=axis1;
  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="#404040";
  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.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);
const myFormat = new Tee.Format(dynoTeeChart);
myFormat.fill='lime';
myFormat.transparency=0.2;
let axisX1, axisY1, axisX2, axisY2, vertAxis;
dynoTeeChart.ondraw = function()
{
axisX1 = dynoTeeChart.axes.bottom.calc(0);
axisY1 = dynoTeeChart.axes.left.calc(1.0007928867830755);
axisX2 = dynoTeeChart.axes.bottom.calc(16);
axisY2 = dynoTeeChart.axes.left.calc(62);
myFormat.rectangle(axisX1-(16/2),axisY1-(62/2),16,62);
axisX1 = dynoTeeChart.axes.bottom.calc(893.2457182573048);
axisY1 = dynoTeeChart.axes.left.calc(5.09095980594684);
axisX2 = dynoTeeChart.axes.bottom.calc(33);
axisY2 = dynoTeeChart.axes.left.calc(55);
myFormat.rectangle(axisX1-(33/2),axisY1-(55/2),33,55);
axisX1 = dynoTeeChart.axes.bottom.calc(552.0158581390341);
axisY1 = dynoTeeChart.axes.left.calc(0.3233929793485668);
axisX2 = dynoTeeChart.axes.bottom.calc(48);
axisY2 = dynoTeeChart.axes.left.calc(90);
myFormat.rectangle(axisX1-(48/2),axisY1-(90/2),48,90);
axisX1 = dynoTeeChart.axes.bottom.calc(44.99631612292043);
axisY1 = dynoTeeChart.axes.left.calc(8.991546865987512);
axisX2 = dynoTeeChart.axes.bottom.calc(48);
axisY2 = dynoTeeChart.axes.left.calc(82);
myFormat.rectangle(axisX1-(48/2),axisY1-(82/2),48,82);
axisX1 = dynoTeeChart.axes.bottom.calc(561.3558141411736);
axisY1 = dynoTeeChart.axes.left.calc(8.406538656752122);
axisX2 = dynoTeeChart.axes.bottom.calc(38);
axisY2 = dynoTeeChart.axes.left.calc(91);
myFormat.rectangle(axisX1-(38/2),axisY1-(91/2),38,91);
axisX1 = dynoTeeChart.axes.bottom.calc(669.8950982788415);
axisY1 = dynoTeeChart.axes.left.calc(7.848772044361571);
axisX2 = dynoTeeChart.axes.bottom.calc(30);
axisY2 = dynoTeeChart.axes.left.calc(20);
myFormat.rectangle(axisX1-(30/2),axisY1-(20/2),30,20);
axisX1 = dynoTeeChart.axes.bottom.calc(317.2411646119212);
axisY1 = dynoTeeChart.axes.left.calc(6.195099755469368);
axisX2 = dynoTeeChart.axes.bottom.calc(22);
axisY2 = dynoTeeChart.axes.left.calc(16);
myFormat.rectangle(axisX1-(22/2),axisY1-(16/2),22,16);
axisX1 = dynoTeeChart.axes.bottom.calc(871.7600268280412);
axisY1 = dynoTeeChart.axes.left.calc(2.470215724838154);
axisX2 = dynoTeeChart.axes.bottom.calc(12);
axisY2 = dynoTeeChart.axes.left.calc(47);
myFormat.rectangle(axisX1-(12/2),axisY1-(47/2),12,47);
axisX1 = dynoTeeChart.axes.bottom.calc(591.8532106131445);
axisY1 = dynoTeeChart.axes.left.calc(5.889326610739117);
axisX2 = dynoTeeChart.axes.bottom.calc(26);
axisY2 = dynoTeeChart.axes.left.calc(29);
myFormat.rectangle(axisX1-(26/2),axisY1-(29/2),26,29);
axisX1 = dynoTeeChart.axes.bottom.calc(396.8103641151822);
axisY1 = dynoTeeChart.axes.left.calc(11.76066005522772);
axisX2 = dynoTeeChart.axes.bottom.calc(18);
axisY2 = dynoTeeChart.axes.left.calc(14);
myFormat.rectangle(axisX1-(18/2),axisY1-(14/2),18,14);
axisX1 = dynoTeeChart.axes.bottom.calc(676.9772074452405);
axisY1 = dynoTeeChart.axes.left.calc(7.625285168066473);
axisX2 = dynoTeeChart.axes.bottom.calc(34);
axisY2 = dynoTeeChart.axes.left.calc(95);
myFormat.rectangle(axisX1-(34/2),axisY1-(95/2),34,95);
axisX1 = dynoTeeChart.axes.bottom.calc(660.9123959515119);
axisY1 = dynoTeeChart.axes.left.calc(2.635777544192528);
axisX2 = dynoTeeChart.axes.bottom.calc(10);
axisY2 = dynoTeeChart.axes.left.calc(19);
myFormat.rectangle(axisX1-(10/2),axisY1-(19/2),10,19);
axisX1 = dynoTeeChart.axes.bottom.calc(328.39571454787506);
axisY1 = dynoTeeChart.axes.left.calc(7.160955813741605);
axisX2 = dynoTeeChart.axes.bottom.calc(47);
axisY2 = dynoTeeChart.axes.left.calc(96);
myFormat.rectangle(axisX1-(47/2),axisY1-(96/2),47,96);
axisX1 = dynoTeeChart.axes.bottom.calc(845.9016046056041);
axisY1 = dynoTeeChart.axes.left.calc(10.316956390432349);
axisX2 = dynoTeeChart.axes.bottom.calc(3);
axisY2 = dynoTeeChart.axes.left.calc(50);
myFormat.rectangle(axisX1-(3/2),axisY1-(50/2),3,50);
axisX1 = dynoTeeChart.axes.bottom.calc(930.434172213013);
axisY1 = dynoTeeChart.axes.left.calc(9.2154334344742);
axisX2 = dynoTeeChart.axes.bottom.calc(9);
axisY2 = dynoTeeChart.axes.left.calc(17);
myFormat.rectangle(axisX1-(9/2),axisY1-(17/2),9,17);
axisX1 = dynoTeeChart.axes.bottom.calc(323.3827796396561);
axisY1 = dynoTeeChart.axes.left.calc(6.25269777465043);
axisX2 = dynoTeeChart.axes.bottom.calc(26);
axisY2 = dynoTeeChart.axes.left.calc(93);
myFormat.rectangle(axisX1-(26/2),axisY1-(93/2),26,93);
axisX1 = dynoTeeChart.axes.bottom.calc(712.7021339775562);
axisY1 = dynoTeeChart.axes.left.calc(1.719453664796112);
axisX2 = dynoTeeChart.axes.bottom.calc(32);
axisY2 = dynoTeeChart.axes.left.calc(95);
myFormat.rectangle(axisX1-(32/2),axisY1-(95/2),32,95);
axisX1 = dynoTeeChart.axes.bottom.calc(920.3844694143121);
axisY1 = dynoTeeChart.axes.left.calc(0.38376268976601935);
axisX2 = dynoTeeChart.axes.bottom.calc(48);
axisY2 = dynoTeeChart.axes.left.calc(11);
myFormat.rectangle(axisX1-(48/2),axisY1-(11/2),48,11);
axisX1 = dynoTeeChart.axes.bottom.calc(367.89096587426275);
axisY1 = dynoTeeChart.axes.left.calc(8.831074576833824);
axisX2 = dynoTeeChart.axes.bottom.calc(37);
axisY2 = dynoTeeChart.axes.left.calc(32);
myFormat.rectangle(axisX1-(37/2),axisY1-(32/2),37,32);
axisX1 = dynoTeeChart.axes.bottom.calc(94.80184135303004);
axisY1 = dynoTeeChart.axes.left.calc(2.142060697407624);
axisX2 = dynoTeeChart.axes.bottom.calc(12);
axisY2 = dynoTeeChart.axes.left.calc(87);
myFormat.rectangle(axisX1-(12/2),axisY1-(87/2),12,87);
axisX1 = dynoTeeChart.axes.bottom.calc(117.77314340544054);
axisY1 = dynoTeeChart.axes.left.calc(6.635003994450328);
axisX2 = dynoTeeChart.axes.bottom.calc(35);
axisY2 = dynoTeeChart.axes.left.calc(15);
myFormat.rectangle(axisX1-(35/2),axisY1-(15/2),35,15);
axisX1 = dynoTeeChart.axes.bottom.calc(641.1678651717632);
axisY1 = dynoTeeChart.axes.left.calc(10.561246032657225);
axisX2 = dynoTeeChart.axes.bottom.calc(42);
axisY2 = dynoTeeChart.axes.left.calc(53);
myFormat.rectangle(axisX1-(42/2),axisY1-(53/2),42,53);
axisX1 = dynoTeeChart.axes.bottom.calc(570.5001158145282);
axisY1 = dynoTeeChart.axes.left.calc(4.1417271150369706);
axisX2 = dynoTeeChart.axes.bottom.calc(1);
axisY2 = dynoTeeChart.axes.left.calc(12);
myFormat.rectangle(axisX1-(1/2),axisY1-(12/2),1,12);
axisX1 = dynoTeeChart.axes.bottom.calc(454.6752348191526);
axisY1 = dynoTeeChart.axes.left.calc(10.643084622833513);
axisX2 = dynoTeeChart.axes.bottom.calc(21);
axisY2 = dynoTeeChart.axes.left.calc(41);
myFormat.rectangle(axisX1-(21/2),axisY1-(41/2),21,41);
axisX1 = dynoTeeChart.axes.bottom.calc(210.04994414903376);
axisY1 = dynoTeeChart.axes.left.calc(2.6746995747409845);
axisX2 = dynoTeeChart.axes.bottom.calc(19);
axisY2 = dynoTeeChart.axes.left.calc(97);
myFormat.rectangle(axisX1-(19/2),axisY1-(97/2),19,97);
const mySites = new Tee.Format(dynoTeeChart);
mySites.stroke.cap='round';
mySites.transparency=0.7;
let stripX1, stripY1, stripX2, stripY2;
mySites.fill='orange';
stripX1 = dynoTeeChart.axes.bottom.startPos;
stripY1 = dynoTeeChart.axes.left.startPos;
stripX2 = dynoTeeChart.axes.bottom.calc(300);
stripY2 = dynoTeeChart.axes.left.endPos;
mySites.rectangle(stripX1, stripY2 - (stripY2-stripY1)/2, stripX2-stripX1, (stripY2-stripY1)/2);
mySites.fill='green';
stripX1 = dynoTeeChart.axes.bottom.startPos;
stripY1 = dynoTeeChart.axes.left.calc(6);
stripX2 = dynoTeeChart.axes.bottom.calc(250);
stripY2 = dynoTeeChart.axes.left.calc(12);
mySites.rectangle(stripX1, stripY1, stripX2-stripX1, stripY1-stripY2);
mySites.fill='blue';
stripX1 = dynoTeeChart.axes.bottom.calc(250);
stripY1 = dynoTeeChart.axes.left.calc(6);
stripX2 = dynoTeeChart.axes.bottom.calc(500);
stripY2 = dynoTeeChart.axes.left.calc(12);
mySites.rectangle(stripX1, stripY1, stripX2-stripX1, stripY1-stripY2);
mySites.fill='green';
stripX1 = dynoTeeChart.axes.bottom.calc(500);
stripY1 = dynoTeeChart.axes.left.calc(6);
stripX2 = dynoTeeChart.axes.bottom.calc(1000);
stripY2 = dynoTeeChart.axes.left.calc(12);
mySites.rectangle(stripX1, stripY1, stripX2-stripX1, stripY1-stripY2);
mySites.fill='orange';
stripX1 = dynoTeeChart.axes.bottom.calc(600);
stripY1 = dynoTeeChart.axes.left.startPos;
stripX2 = dynoTeeChart.axes.bottom.calc(1000);
stripY2 = dynoTeeChart.axes.left.endPos;
mySites.rectangle(stripX1, stripY2 - (stripY2-stripY1)/2, stripX2-stripX1, (stripY2-stripY1)/2);
const ctx = dynoTeeChart.ctx;
let x1;
x1 = dynoTeeChart.axes.bottom.calc(0);
x2 = dynoTeeChart.axes.bottom.calc(50);
y1 = dynoTeeChart.axes.left.calc(9.34846513378554);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(50);
x2 = dynoTeeChart.axes.bottom.calc(100);
y1 = dynoTeeChart.axes.left.calc(5.705295072804015);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(100);
x2 = dynoTeeChart.axes.bottom.calc(150);
y1 = dynoTeeChart.axes.left.calc(10.697416915560254);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(150);
x2 = dynoTeeChart.axes.bottom.calc(200);
y1 = dynoTeeChart.axes.left.calc(3.8480405750688846);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(200);
x2 = dynoTeeChart.axes.bottom.calc(250);
y1 = dynoTeeChart.axes.left.calc(11.591726434551433);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(250);
x2 = dynoTeeChart.axes.bottom.calc(300);
y1 = dynoTeeChart.axes.left.calc(9.728859719168792);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(300);
x2 = dynoTeeChart.axes.bottom.calc(350);
y1 = dynoTeeChart.axes.left.calc(1.8131468969486213);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(350);
x2 = dynoTeeChart.axes.bottom.calc(400);
y1 = dynoTeeChart.axes.left.calc(2.423217710941529);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(400);
x2 = dynoTeeChart.axes.bottom.calc(450);
y1 = dynoTeeChart.axes.left.calc(0.7852049700313479);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(450);
x2 = dynoTeeChart.axes.bottom.calc(500);
y1 = dynoTeeChart.axes.left.calc(0.3785440475087434);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(500);
x2 = dynoTeeChart.axes.bottom.calc(550);
y1 = dynoTeeChart.axes.left.calc(11.111580353767822);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(550);
x2 = dynoTeeChart.axes.bottom.calc(600);
y1 = dynoTeeChart.axes.left.calc(2.2951156177060894);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(600);
x2 = dynoTeeChart.axes.bottom.calc(650);
y1 = dynoTeeChart.axes.left.calc(2.7255197890305425);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(650);
x2 = dynoTeeChart.axes.bottom.calc(700);
y1 = dynoTeeChart.axes.left.calc(5.727988143044055);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(700);
x2 = dynoTeeChart.axes.bottom.calc(750);
y1 = dynoTeeChart.axes.left.calc(8.904809783286836);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(750);
x2 = dynoTeeChart.axes.bottom.calc(800);
y1 = dynoTeeChart.axes.left.calc(7.525374003765464);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(800);
x2 = dynoTeeChart.axes.bottom.calc(850);
y1 = dynoTeeChart.axes.left.calc(4.898394080552196);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(850);
x2 = dynoTeeChart.axes.bottom.calc(900);
y1 = dynoTeeChart.axes.left.calc(0.7033589806421761);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(900);
x2 = dynoTeeChart.axes.bottom.calc(950);
y1 = dynoTeeChart.axes.left.calc(5.958256563234704);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(950);
x2 = dynoTeeChart.axes.bottom.calc(1000);
y1 = dynoTeeChart.axes.left.calc(10.278307738182525);
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y1);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'red';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(0);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(50);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(100);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(150);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(200);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(250);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(300);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(350);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(400);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(450);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(500);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(550);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(600);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(650);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(700);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(750);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(800);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(850);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(900);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
x1 = dynoTeeChart.axes.bottom.calc(950);
y1 = dynoTeeChart.axes.left.startPos;
y2 = dynoTeeChart.axes.left.endPos;
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x1, y2);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
ctx.stroke();
dynoTeeChart.onzoom = function()
{
console.log('zoom function triggered.')
DotNet.invokeMethodAsync('TeeChartOnBlazor', 'ReturnArrayAsync')
.then(result =>
{
console.log(result)
});
}
dynoTeeChart.afterdraw = function()
{
console.log('draw function triggered.')
DotNet.invokeMethodAsync('TeeChartOnBlazor', 'ReturnArrayAsync')
.then(result =>
{
console.log(result)
});
}
}
  dynoTeeChart.isNLc = true;
  dynoTeeChart.draw();
</script>

=======

When I navigate to the chart page nothing is displaying and I am not getting any console errors. Any help would be appreciated.

Thanks

Post by **Edu** » Thu Oct 03, 2024 11:49 am

Hello,

The problem appears to be caused by a part of the code that we assume to be added by customCode being added to the export. All appears to work corrcetly except for this part:

Code: Select all

  dynoTeeChart.onzoom = function()
  {
  console.log('zoom function triggered.')

  DotNet.invokeMethodAsync('TeeChartOnBlazor', 'ReturnArrayAsync')
  .then(result =>
  {
  console.log(result)
  });
  }
   
  dynoTeeChart.afterdraw = function()
  {
  console.log('draw function triggered.')
  DotNet.invokeMethodAsync('TeeChartOnBlazor', 'ReturnArrayAsync')
  .then(result =>
  {
  console.log(result)
  });
  }
  }

If you remove that, the render works correctly. We perhaps see your intention, to provide feedback to the server and will look to offer a better proposal to achieve that.

Please remove those lines and see and check if the page still appears blank.

Also, as a reminder of something we mentioned a while ago, dynoTeeChart.afterdraw = function(){} this function will never trigger as written. You should use ondraw instead (like you’ve done just below the line of code with let axisX1, axisY1, axisX2, axisY2, vertAxis;). While this isn’t causing your current issue, it's worth correcting.

dynamicrisk · Post by **dynamicrisk** » Thu Oct 03, 2024 2:11 pm

Hi Edu,

Thanks for the reply. I removed those lines and it looks like the chart is still not rendering.

dynamicrisk · Post by **dynamicrisk** » Thu Oct 03, 2024 2:35 pm

Update: The following scripts do not render a chart either.

<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.palette= new Tee.Palette(["#7799D6", "#FFCF68", "#FF7F47", "#81CADB", "#5E739E", "#50AE96", "#E63B41", "#FFF390", "#90EAD1", "#A3A3A3", "#FFFFC0", "#E7E7E7"]);
dynoTeeChart.axes.left.visible=true;
dynoTeeChart.axes.left.start=0;
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.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=1000;
dynoTeeChart.axes.bottom.minimum=0;
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;
</script>

OR

<script> var dynoTeeChart; dynoTeeChart=new Tee.Chart("canvas1");</script>

Post by **Edu** » Thu Oct 03, 2024 2:43 pm

Hello,

Thank you for your reply. Could you please share the entire project so I can review it and suggest a more effective solution? If the project contains sensitive data, a simplified version will work just as well.

Post by **Edu** » Thu Oct 03, 2024 3:42 pm

dynamicrisk wrote: ↑

Thu Oct 03, 2024 2:35 pm

Update: The following scripts do not render a chart either.

Code: Select all


<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.palette= new Tee.Palette(["#7799D6", "#FFCF68", "#FF7F47", "#81CADB", "#5E739E", "#50AE96", "#E63B41", "#FFF390", "#90EAD1", "#A3A3A3", "#FFFFC0", "#E7E7E7"]);
  dynoTeeChart.axes.left.visible=true;
  dynoTeeChart.axes.left.start=0;
  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.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=1000;
  dynoTeeChart.axes.bottom.minimum=0;
  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;
</script>

If you add dynoTeeChart.draw(); at the end of the script, you will see a drawing. However, the script only contains information about the chart's axes, walls, panel ... and no series. Therefore, only a title will show up. But it will, at least, render something.

If you add these lines, for example (taken from your code from earlier) before the dynoTeeChart.draw() method

Code: Select all

var Series1=dynoTeeChart.addSeries(new Tee.PointXY());
    Series1.data.values=[1.0007928867830755,5.09095980594684,0.3233929793485668,8.991546865987512,8.406538656752122,7.848772044361571,6.195099755469368,2.470215724838154,5.889326610739117,11.76066005522772,7.625285168066473,2.635777544192528,7.160955813741605,10.316956390432349,9.2154334344742,6.25269777465043,1.719453664796112,0.38376268976601935,8.831074576833824,2.142060697407624,6.635003994450328,10.561246032657225,4.1417271150369706,10.643084622833513,2.6746995747409845];
    Series1.data.x=[0,893.2457182573048,552.0158581390341,44.99631612292043,561.3558141411736,669.8950982788415,317.2411646119212,871.7600268280412,591.8532106131445,396.8103641151822,676.9772074452405,660.9123959515119,328.39571454787506,845.9016046056041,930.434172213013,323.3827796396561,712.7021339775562,920.3844694143121,367.89096587426275,94.80184135303004,117.77314340544054,641.1678651717632,570.5001158145282,454.6752348191526,210.04994414903376];
    Series1.pointer.format.gradient.visible=false;
    Series1.pointer.style="rectangle";
    Series1.pointer.width=8;
    Series1.pointer.height=8;
    Series1.pointer.format.shadow.visible=false
    Series1.dateFormat="d";

the chart will have some data, thus rendering something more visual.
It would like this:

: image.png (59.54 KiB) Viewed 656 times

I hope this clarifies things, but I still recommend sharing your project—or a simplified version—so we can provide more accurate guidance.

dynamicrisk · Post by **dynamicrisk** » Thu Oct 03, 2024 9:00 pm

Hi Edu,

The chart is still not rendering. Is there a way to send the test app as the forum says the .zip is too large to share?

Thanks

Post by **Edu** » Fri Oct 04, 2024 6:57 am

Hello,

You can upload your zip file through this link https://steema.net/uploads/

Best regards,
Edu

dynamicrisk · Post by **dynamicrisk** » Fri Oct 04, 2024 1:48 pm

Getting this when I navigate to the link.

Post by **Marc** » Fri Oct 04, 2024 3:01 pm

Hello,

Apologies, there's seems to be a technical problem with the upload location. We're looking to resolve it and will get back to this thread when it's active.

Regards,
Marc Meumann

Post by **Marc** » Fri Oct 04, 2024 3:22 pm

We've prepared a new upload link:

https://steema.net/FileUploads/

Please try again at that location. Apologies for the inconvenience caused.

Regards,
Marc

dynamicrisk · Post by **dynamicrisk** » Fri Oct 04, 2024 9:25 pm

Hi,

I uploaded the file. I am not sure if it completed though. Here is a screenshot of the web page I received after uploading.

TeeChart .NET For Blazor Chart not displaying

TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying

Re: TeeChart .NET For Blazor Chart not displaying