Initially, the setExtremes function works fine for the chart. However, when I switch pages or reopen the chart with a new JSON file, the setExtremes function stops working and fails to update the min and max values. Any idea why this could be happening?
yAxis[BtnID].setExtremes(val1, val2);
The only workaround I found is to force reload my app, then the setExtremes function starts working again when I reopen or open a new chart with a new JSON file.
Here is my actual code. The issue does not lie with the JSON data as I am able to retrieve BtnID, val1, and val2 values successfully; it's just that the setExtremes function does not work after the initial load.
Upon clicking on buttons in the navbar, a modal opens where the user enters val1 and val2. These values are then sent to index.js.
Navbar.razor:
<button @ref="_btn1Ref" id="0" @onclick=OpenDialog1>dialog1</button>
<button @ref="_btn2Ref" id="1" @onclick=OpenDialog2>dialog2</button>
@code{
private MyData model1 = new MyData { val1= 0, val2= 0 };
private MyData model2 = new MyData { val1= 0, val2= 0 };
private IModalDialog? modalDialog;
private async Task OpenDialog1()
{
var request = new ModalRequest { InData = this.model1 };
if (this.modalDialog is not null)
await modalDialog.ShowAsync<MyForm>(request);
await JSRuntime.InvokeVoidAsync("getValues", this.model1.val1, this.model1.val2, _btn1Ref);
}
...
Index.razor:
protected override async Task OnAfterRenderAsync(bool firstRender)
{
var fileName = @fileNameFromLandingPage;
await JSRuntime.InvokeVoidAsync("CreateChart", fileName);
}
Index.js:
function CreateChart(fileName) {
$.getJSON(fileName, function (data) {
var chart = Highcharts.chart('container', { ....
//Actual code
window.getValues = function (val1, val2, elem) {
var BtnID = elem.getAttribute('id');
yAxis[BtnID].setExtremes(val1, val2);
// If I directly use onclick ID to setExtremes instead of window.getValues, it always works. But not able to pass dialog val1 val2.Have harcoded below.
$("#0").click(function () {
yAxis[0].setExtremes(4, 8);
});
}
});
}