setExtremes does not work after initial load

Question

Below setExtremes works fine for initial chart. But when I switch pages and reopen chart again or open new chart(new json file), below setExtremes stops working and does not update min max anymore. Any suggestion why this would happen.

yAxis[BtnID].setExtremes(val1, val2);

The only way I could make it work is by force reloading my app, then it works when I reopen chart or open new chart(new json file). Below is my actual code. There is no problem with json data. I am getting BtnID, val1, val2 values fine, only setExtremes does not work (works first time but not after) .

Button click on navbar as shown below, opens a modal, where user enters val1 and val2. Which s 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);
             });

                
       }

   });
 }

Hi, I have added chart initialization code above. Thank you. — Tar270, Sep 11 '22 at 08:49
If I directly use onclick ID to setExtremes instead of window.getValues, it always works. But not able to pass dialog val1 val2. I am stuck on this. I would appreciate if you have any suggestion. — Tar270, Sep 12 '22 at 06:46
Try to change `var BtnID = elem.getAttribute('id');` to `var BtnID = parseInt(elem.getAttribute('id'));` — Dimitris Maragkos, Sep 12 '22 at 07:00

score 1 · Accepted Answer · answered Sep 12 '22 at 07:08

1

Not sure if this is causing the problem but why is window.getValues nested inside CreateChart function? Your Index.js should look like this:

function CreateChart(fileName) {  
    $.getJSON(fileName, function (data) {
       
       ...
       //Actual code
    });
}

function getValues(val1, val2, elem) {    
    var BtnID = elem.getAttribute('id');
    yAxis[BtnID].setExtremes(val1, val2);                  
}

answered Sep 12 '22 at 07:08

Dimitris Maragkos

8,932
2
8
26

1

Check this answer: https://stackoverflow.com/a/13051825/10839134 the "All versions" section. – Dimitris Maragkos Sep 12 '22 at 08:22
1

Your solution was of real help. I really appreciate it. Thank you. – Tar270 Sep 12 '22 at 08:31

setExtremes does not work after initial load

1 Answers1