Search code examples
javascriptamcharts

Dynamically change value & toValue of guides (AMCharts)


I'm trying to dynamically change the value & toValue field of the guides parameter with a button to reset it. this is my code how i'm trying it:

function changeTresh(){
    var treshhold1 = parseFloat(document.getElementById("treshhold1").value);
    var treshhold2 = parseFloat(document.getElementById("treshhold2").value);
    
    console.log(treshhold1);
    console.log(treshhold2);
    if(treshhold1 & treshhold2 != 0){
    chartConfig.guides["0"].value = treshhold1;
    chartConfig.guides["0"].toValue = treshhold2;
    
        
    chartConfig.guides["1"].toValue= treshhold1;
    
    chartConfig.guides["2"].value = treshhold2;
    
    }
}

This is the code for the button:

<label for="treshhold1">Minimum value:</label>
<input type="number" name="treshhold1" id="treshhold1"><br>
<label for="treshhold2">Maximum value:</label>
<input type="number" name="treshhold2" id="treshhold2">
<input type="button" value="Change treshholds" id="btChangeTresh" onclick="changeTresh()">

My function doesn't give any errors but still it doesn't work. i've tried console.log and it performs the function perfectly until the chartConfig.guides["0"].value = treshhold1; line. There it just stops, but doesn't give an error.

Somebody knows what's up?


Solution

  • guides is an array, not an object. Quoting indices on an array is not correct:

    chartConfig.guides[0].value = treshhold1;
    chartConfig.guides[0].toValue = treshhold2;
    
    
    chartConfig.guides[1].toValue= treshhold1;
    
    chartConfig.guides[2].value = treshhold2;
    

    Also note that when updating any property in the chart, you have to call validateData on your chart object making your changes, e.g. chart.validateData(). I'm not sure if chartConfig corresponds to an actual chart object, but if it doesn't, you'll need to access the chart object variable that is returned from AmCharts.makeChart and call validateData from that variable. You can also access all of your chart objects through the global AmCharts object through the charts array, i.e. AmCharts.charts[0].validateData(), etc.