How can i refere to an object variable dynamically?

Question

Im creating multiple charts at the same page, now i want a smart function to either update a single chart or all of them

It works fine when i hard code the object name but i want to be able to get the object name from the button it was executed from

<button class="update" name="prodChart1" funtionName="f_A_GetTotalWorkedHours"> Test</button>

var prodChart1 = document.getElementById('ProdChart1');
var prodChart1 = new Chart( prodChart1, {
  type: "line",
  data: <%=f_A_GetTotalWorkedHours(Dateadd("d",-2,Date), Date, 48, Line, "")%>,
  options: {
        color: 'red',
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});


$(".update").click(function(){  
    UpdateChart($(this).attr("name"),"") 
});

function UpdateChart(chartName, aFunction) {
    $.ajax({
        type: 'POST', //post method
        url: 'AnalyticsAPI.asp?',
        dataType: "text",
        data: {requestParam: 'f_A_GetTotalWorkedHours|'+ getParam()[0] +'|'+ getParam()[1] +'|48' },
        success: function (result, textStatus, jqXHR)
        {
            data3= result; 
            chartName.config.data = JSON.parse(data3);
            chartName.update();

        },  
        error: function (xhr, ajaxOptions, thrownError) {
       // alert(xhr.status);
        alert(thrownError);
      }
    });
};

So the "update" function should get the name of the existing chart object, the object name is part of the button name attribute. The error i get is that "UpdateChart(chartName, aFunction)" chartname isnt a object. If i would hardcode the object name in the call it works.

score 0 · Accepted Answer · answered Aug 30 '19 at 16:04

0

Try this: Get global variable dynamically by name string in JavaScript

Or add your chart to an Object of which you can access the keys:

var charts = {};
charts.populationIncrease = new Chart(...);

function updateChart(chartName, value) {
    charts[chartName].value = value;
}

updateChart('populationIncrease', { ... });

answered Aug 30 '19 at 16:04

TemporaryName

487
5
16

The window "stuff" worked like a charm, thanks. i also tried you second suggestion above but got the same result, the array just contained the name and not the object of the specific chart. – Evilaid Aug 30 '19 at 16:45
It should not be an array, but an objection. It is possible, but it is possible that the new Chart() constructor only returns the name of the object it is attached to. In which case you should save the DOMNode or search for it dynamically. Anyway, if it worked, it's fine. Try staying out of the global / window spaces with your variables, though. If you're not advanced enough yet, don't worry about it for now. – TemporaryName Aug 30 '19 at 16:48

score 0 · Answer 2 · answered Aug 30 '19 at 16:08

Issue you have is that you are trying to access the objects property (getting and setting) however you are trying to access properties of the string $(this).attr("name") where instead you should be using $(this)

see fixed code below

var prodChart1 = document.getElementById('ProdChart1');
var prodChart1 = new Chart( prodChart1, {
  type: "line",
  data: <%=f_A_GetTotalWorkedHours(Dateadd("d",-2,Date), Date, 48, Line, "")%>,
  options: {
        color: 'red',
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero: true
                }
            }]
        }
    }
});


$(".update").click(function(){  
    UpdateChart($(this), $(this).attr("name"),""); //Pass in the object and the name
});

function UpdateChart(chartObject, chartName, aFunction) {
    $.ajax({
        type: 'POST', //post method
        url: 'AnalyticsAPI.asp?',
        dataType: "text",
        data: {requestParam: 'f_A_GetTotalWorkedHours|'+ getParam()[0] +'|'+ getParam()[1] +'|48' },
        success: function (result, textStatus, jqXHR)
        {
            data3= result; 
            chartObject.config.data = JSON.parse(data3); //you are using the object not the string attribute of name
            chartObject.update();

        },  
        error: function (xhr, ajaxOptions, thrownError) {
       // alert(xhr.status);
        alert(thrownError);
      }
    });
};

How can i refere to an object variable dynamically?

2 Answers2