Ufdjrw

I am using setInterval to update 3 charts for 60 sec time of interval. So I created a global variable i.e. "Updatetimer" and called 3 charts seperately at the time of rendering of elements. So Now, My Charts are being updating in every 60 seconds(this is for "30mins" data).

So far this is good.

Now problem is coming when I am clicking one of the charts to render for different Time i.e for "24hrs" data. So what should happen is Updatetimer should update the data for 24hrs" data for 1st chart and continue on updating "30 mins" data for other two charts. but as I have calling all charts using single variable i.e. "UpdateTimer" On clearing "UpdateTimer" and calling setInterval for clicked event is simply fetching data for on 1st chart "30mins" data.

I tried to solve this by creating three different Timers for 3 charts and by running setInterval on them seperately, but this would update charts at different Time Interval and will make calls every now and then.

I want to come up with a solution where I can setInterval on charts at init and set the Interval on charts using single variable and when the is an event clicked on the DOM let say "24hrs" data of first chart is clicked. I want to set the update timer on the 1st chart without affecting other charts timer.

// Demo Code
function init() 
updatetimer = setInterval(function() function A_30min(); function B_30min(); function C_30min() ,60000);


events: 
 "click .A_24" : "A_24hr" //lets say class selector is .A_24



function A_30min() //statement// 
function A_24hr() 
 clearInterval(updatetimer);
 setInterval(A_24hr, 60000); 

function B_30min() //statement// 
function B_24hr() //statement// 
function C_30min() //statement// 
function C_24hr() //statement// 

Any help would be welcome, Thanks

I have found an Answer other than using suggested data element of jquery.

What I did is created 3 global variable those are initializing with default events or property. Now when the page loads and renders the elements on DOM and lets say User clicked on any events on charts (suppose he/she clicked on 24hrs on chart1) So what I am doing is getting the click event from that event trigger and checking the triggered event with my global variable. So If my global variable is different than the click event, Global variable will change to the new click event triggered.

Now I am calling my functions based using setInterval and when functions are called it will check with the with new current clicked item, if it is clicked event it will call those API's otherwise Default one will be called.

Demo:

function init() 
this.current_selected_chartA = "A_30";
this.current_selected_chartB = "B_30";
this.current_selected_chartC = "C_30";
updatetimer = setInterval(function() function A_30min(); function B_30min(); 
function C_30min() ,60000);

events: 
"click .A_24, .A_30, .B_24, .B_30, .C_24, .C_30" : "clickEvent" //lets say user selects any of these selectors


clickEvent: function(event) {
if(event.currentTarget.attributes.name.value == "A_24") 
this.current_selected_chartA = "A_24";
this.A(); 
this.B();
this.C();
setInterval(function() this.A();this.B();this.C();,60000);
 
else 
//statement// 
 // same if condition will check current selected events for other events like A_30, B_30, B_24, C_30,and C_24.

function A() //statement//
 if(this.current_selected_chartA == "A_30")
 // callA_30 API's
 
 else 
 // callA_24 API's
 

function B() //similar if else condition will follow for function B// 
function C() //similar if else condition will follow for function B//