TeeChart .NET For Blazor Chart not displaying

[dynamicrisk]

Hello,

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

Code: Select all

@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

[Edu]

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]

Hi Edu,

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

[dynamicrisk]

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>

[Edu]

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.

[Edu]

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 69462 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]

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

[Edu]

Hello,

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

Best regards,
Edu

[dynamicrisk]

Getting this when I navigate to the link.

[Marc]

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

[Marc]

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]

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.

[Marc]

Hello,

The file hasn't uploaded correctly. Please note, to keep the filesize down, it is only necessary to upload the source of the project without bin or obj folders.

Regards,
Marc

[dynamicrisk]

Ok it says the file has been successfully uploaded.

[Edu]

Hello,

I have been reviewing your project. I noticed you are using our demos as a baseline and then adding things on top to test things out. This practice is perfectly fine, however, there are a few things that I would like to point out. This is a step-by-step guide not only for resolving the current issue, but also for troubleshooting similar errors you might face in the future:

First, I tried executing the script that your GetJSChart() function is generating, inside the browser's console as a function

Code: Select all

function myFunction() {
  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=[7.374336292927364,5.030405780197599,2.4891124414831434,7.7335394429889615,6.804288547691501,7.7554843716377855,6.762839968645858,8.057512182269743,7.0735489706269306,1.571803961556439,11.809179870966561,1.7199815987304583,0.37027369128764454,11.510794652066775,10.535477942080066,7.763845672322516,8.68589827765998,4.554194827416467,5.697657082192507,1.5278836985031465,2.1975271630536475,8.423483416637321,9.511123319243843,10.66102019715813,6.443147903223487];
Series1.data.x=[0,221.2991477926203,6.216716278395595,942.3114199578014,518.7994991770339,503.70842697056105,445.17336707852485,143.18510460021827,844.2474620223383,782.5786462667759,901.2621823748542,149.35842236690712,672.852998272712,54.65256961878207,819.1666804200174,237.60740600280317,757.909733799048,282.94989458834294,732.2272839260371,233.12878795172543,17.68130133203161,19.416985653117113,20.23672772723517,639.561034418862,67.95528536885232];
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=[218.4633309810864,639.5588659666585,447.0538989149273,746.7567323356377,794.7336101648588,607.5089064034231,825.8553499344015,314.26717665202966,557.0990515582674,672.3941935573557,863.9822889435252,262.13461444910223,463.3810582396278,352.0585433794622,373.9090981412486];
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=[4.155316009932106,0.24540222410033818,9.805908558941976,6.099377284827051,11.708695189016762,6.93589697753039,2.362053685155081,2.0514513293029073,7.566437725967028,5.656935778877728,8.253997805427867,7.238806100528138,7.214590288783576,8.090620353015844,4.410135420862099,4.32037388124647,1.7880576346596464,0.38084225937918736,10.283260370108039,1.2087196817537929];
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.activeStyle="checkbox";
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(7.374336292927364);
axisX2 = dynoTeeChart.axes.bottom.calc(47);
axisY2 = dynoTeeChart.axes.left.calc(64);
myFormat.rectangle(axisX1-(47/2),axisY1-(64/2),47,64);
axisX1 = dynoTeeChart.axes.bottom.calc(221.2991477926203);
axisY1 = dynoTeeChart.axes.left.calc(5.030405780197599);
axisX2 = dynoTeeChart.axes.bottom.calc(1);
axisY2 = dynoTeeChart.axes.left.calc(61);
myFormat.rectangle(axisX1-(1/2),axisY1-(61/2),1,61);
axisX1 = dynoTeeChart.axes.bottom.calc(6.216716278395595);
axisY1 = dynoTeeChart.axes.left.calc(2.4891124414831434);
axisX2 = dynoTeeChart.axes.bottom.calc(48);
axisY2 = dynoTeeChart.axes.left.calc(10);
myFormat.rectangle(axisX1-(48/2),axisY1-(10/2),48,10);
axisX1 = dynoTeeChart.axes.bottom.calc(942.3114199578014);
axisY1 = dynoTeeChart.axes.left.calc(7.7335394429889615);
axisX2 = dynoTeeChart.axes.bottom.calc(5);
axisY2 = dynoTeeChart.axes.left.calc(20);
myFormat.rectangle(axisX1-(5/2),axisY1-(20/2),5,20);
axisX1 = dynoTeeChart.axes.bottom.calc(518.7994991770339);
axisY1 = dynoTeeChart.axes.left.calc(6.804288547691501);
axisX2 = dynoTeeChart.axes.bottom.calc(0);
axisY2 = dynoTeeChart.axes.left.calc(53);
myFormat.rectangle(axisX1-(0/2),axisY1-(53/2),0,53);
axisX1 = dynoTeeChart.axes.bottom.calc(503.70842697056105);
axisY1 = dynoTeeChart.axes.left.calc(7.7554843716377855);
axisX2 = dynoTeeChart.axes.bottom.calc(24);
axisY2 = dynoTeeChart.axes.left.calc(99);
myFormat.rectangle(axisX1-(24/2),axisY1-(99/2),24,99);
axisX1 = dynoTeeChart.axes.bottom.calc(445.17336707852485);
axisY1 = dynoTeeChart.axes.left.calc(6.762839968645858);
axisX2 = dynoTeeChart.axes.bottom.calc(25);
axisY2 = dynoTeeChart.axes.left.calc(19);
myFormat.rectangle(axisX1-(25/2),axisY1-(19/2),25,19);
axisX1 = dynoTeeChart.axes.bottom.calc(143.18510460021827);
axisY1 = dynoTeeChart.axes.left.calc(8.057512182269743);
axisX2 = dynoTeeChart.axes.bottom.calc(3);
axisY2 = dynoTeeChart.axes.left.calc(33);
myFormat.rectangle(axisX1-(3/2),axisY1-(33/2),3,33);
axisX1 = dynoTeeChart.axes.bottom.calc(844.2474620223383);
axisY1 = dynoTeeChart.axes.left.calc(7.0735489706269306);
axisX2 = dynoTeeChart.axes.bottom.calc(44);
axisY2 = dynoTeeChart.axes.left.calc(32);
myFormat.rectangle(axisX1-(44/2),axisY1-(32/2),44,32);
axisX1 = dynoTeeChart.axes.bottom.calc(782.5786462667759);
axisY1 = dynoTeeChart.axes.left.calc(1.571803961556439);
axisX2 = dynoTeeChart.axes.bottom.calc(14);
axisY2 = dynoTeeChart.axes.left.calc(31);
myFormat.rectangle(axisX1-(14/2),axisY1-(31/2),14,31);
axisX1 = dynoTeeChart.axes.bottom.calc(901.2621823748542);
axisY1 = dynoTeeChart.axes.left.calc(11.809179870966561);
axisX2 = dynoTeeChart.axes.bottom.calc(23);
axisY2 = dynoTeeChart.axes.left.calc(25);
myFormat.rectangle(axisX1-(23/2),axisY1-(25/2),23,25);
axisX1 = dynoTeeChart.axes.bottom.calc(149.35842236690712);
axisY1 = dynoTeeChart.axes.left.calc(1.7199815987304583);
axisX2 = dynoTeeChart.axes.bottom.calc(44);
axisY2 = dynoTeeChart.axes.left.calc(0);
myFormat.rectangle(axisX1-(44/2),axisY1-(0/2),44,0);
axisX1 = dynoTeeChart.axes.bottom.calc(672.852998272712);
axisY1 = dynoTeeChart.axes.left.calc(0.37027369128764454);
axisX2 = dynoTeeChart.axes.bottom.calc(39);
axisY2 = dynoTeeChart.axes.left.calc(20);
myFormat.rectangle(axisX1-(39/2),axisY1-(20/2),39,20);
axisX1 = dynoTeeChart.axes.bottom.calc(54.65256961878207);
axisY1 = dynoTeeChart.axes.left.calc(11.510794652066775);
axisX2 = dynoTeeChart.axes.bottom.calc(28);
axisY2 = dynoTeeChart.axes.left.calc(90);
myFormat.rectangle(axisX1-(28/2),axisY1-(90/2),28,90);
axisX1 = dynoTeeChart.axes.bottom.calc(819.1666804200174);
axisY1 = dynoTeeChart.axes.left.calc(10.535477942080066);
axisX2 = dynoTeeChart.axes.bottom.calc(38);
axisY2 = dynoTeeChart.axes.left.calc(8);
myFormat.rectangle(axisX1-(38/2),axisY1-(8/2),38,8);
axisX1 = dynoTeeChart.axes.bottom.calc(237.60740600280317);
axisY1 = dynoTeeChart.axes.left.calc(7.763845672322516);
axisX2 = dynoTeeChart.axes.bottom.calc(43);
axisY2 = dynoTeeChart.axes.left.calc(72);
myFormat.rectangle(axisX1-(43/2),axisY1-(72/2),43,72);
axisX1 = dynoTeeChart.axes.bottom.calc(757.909733799048);
axisY1 = dynoTeeChart.axes.left.calc(8.68589827765998);
axisX2 = dynoTeeChart.axes.bottom.calc(43);
axisY2 = dynoTeeChart.axes.left.calc(10);
myFormat.rectangle(axisX1-(43/2),axisY1-(10/2),43,10);
axisX1 = dynoTeeChart.axes.bottom.calc(282.94989458834294);
axisY1 = dynoTeeChart.axes.left.calc(4.554194827416467);
axisX2 = dynoTeeChart.axes.bottom.calc(24);
axisY2 = dynoTeeChart.axes.left.calc(41);
myFormat.rectangle(axisX1-(24/2),axisY1-(41/2),24,41);
axisX1 = dynoTeeChart.axes.bottom.calc(732.2272839260371);
axisY1 = dynoTeeChart.axes.left.calc(5.697657082192507);
axisX2 = dynoTeeChart.axes.bottom.calc(11);
axisY2 = dynoTeeChart.axes.left.calc(71);
myFormat.rectangle(axisX1-(11/2),axisY1-(71/2),11,71);
axisX1 = dynoTeeChart.axes.bottom.calc(233.12878795172543);
axisY1 = dynoTeeChart.axes.left.calc(1.5278836985031465);
axisX2 = dynoTeeChart.axes.bottom.calc(4);
axisY2 = dynoTeeChart.axes.left.calc(17);
myFormat.rectangle(axisX1-(4/2),axisY1-(17/2),4,17);
axisX1 = dynoTeeChart.axes.bottom.calc(17.68130133203161);
axisY1 = dynoTeeChart.axes.left.calc(2.1975271630536475);
axisX2 = dynoTeeChart.axes.bottom.calc(45);
axisY2 = dynoTeeChart.axes.left.calc(32);
myFormat.rectangle(axisX1-(45/2),axisY1-(32/2),45,32);
axisX1 = dynoTeeChart.axes.bottom.calc(19.416985653117113);
axisY1 = dynoTeeChart.axes.left.calc(8.423483416637321);
axisX2 = dynoTeeChart.axes.bottom.calc(44);
axisY2 = dynoTeeChart.axes.left.calc(75);
myFormat.rectangle(axisX1-(44/2),axisY1-(75/2),44,75);
axisX1 = dynoTeeChart.axes.bottom.calc(20.23672772723517);
axisY1 = dynoTeeChart.axes.left.calc(9.511123319243843);
axisX2 = dynoTeeChart.axes.bottom.calc(27);
axisY2 = dynoTeeChart.axes.left.calc(21);
myFormat.rectangle(axisX1-(27/2),axisY1-(21/2),27,21);
axisX1 = dynoTeeChart.axes.bottom.calc(639.561034418862);
axisY1 = dynoTeeChart.axes.left.calc(10.66102019715813);
axisX2 = dynoTeeChart.axes.bottom.calc(37);
axisY2 = dynoTeeChart.axes.left.calc(36);
myFormat.rectangle(axisX1-(37/2),axisY1-(36/2),37,36);
axisX1 = dynoTeeChart.axes.bottom.calc(67.95528536885232);
axisY1 = dynoTeeChart.axes.left.calc(6.443147903223487);
axisX2 = dynoTeeChart.axes.bottom.calc(48);
axisY2 = dynoTeeChart.axes.left.calc(33);
myFormat.rectangle(axisX1-(48/2),axisY1-(33/2),48,33);
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(4.155316009932106);
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(0.24540222410033818);
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(9.805908558941976);
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(6.099377284827051);
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.708695189016762);
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(6.93589697753039);
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(2.362053685155081);
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.0514513293029073);
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(7.566437725967028);
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(5.656935778877728);
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(8.253997805427867);
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(7.238806100528138);
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(7.214590288783576);
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(8.090620353015844);
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(4.410135420862099);
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(4.32037388124647);
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(1.7880576346596464);
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.38084225937918736);
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(10.283260370108039);
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(1.2087196817537929);
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();
}

Then, executing it gives shows an error ( Tee is not defined ), like so:

Dyna1.png (8.32 KiB) Viewed 64515 times

This happens because in your HTML <head>, you're not importing the Steema JS references.

So add these lines to your App.razor file (following the same structure that the demo you're working with originally has)

Code: Select all

    <script src="_content/Microsoft.AspNetCore.Components.Web.Extensions/headManager.js"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart.js" type="text/javascript"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-extras.js" type="text/javascript"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/date.format.js" type="text/javascript"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-maps.js" type="text/javascript"></script>
    <script src="https://www.steema.com/files/public/teechart/html5/latest/src/teechart-animations.js" type="text/javascript"></script>

Now, when executing the function from the console, Tee is no longer 'not defined', however, another issue appears:

Dyna2.png (9.52 KiB) Viewed 64515 times

This happens because the functions 'chartFeatures' (as well as resizeC), in our demos, are defined in another file. Please check the 'js' folder inside 'wwwroot' on our 'TeeChartOnBlazor' NET8 demo.
In this case, the function chartFeatures is inside wwwroot/js/stdsetup.js, while the function resizeC is inside wwwroot/js/utils.js instead.

Assuming that your code is generating those lines by mistake, given that they're not present in your project, for this next step I'll just remove them, however, if your intention is to use those functions, then simply add the references so that they can be called normally. If thats not your intention, then make sure that your script doesn't generate those lines.

After removing the lines ( chartFeatures(dynoTeeChart);
resizeC(dynoTeeChart); from the script, which then I turn to a function for testing purposes, the function executes properly:

Dyna3.png (7.03 KiB) Viewed 64515 times

Now the chart appears properly and can be interacted with, like using the checkboxes, zooming and scrolling, to name a few.

Note, however, that I used the console only to test and debug. Please adapt your code as needed to ensure it aligns with your specific requirements.

I hope this was helpful. Feel free to contact us if you need any further clarifications or adjustments.
Best regards,
Edu