I am using FancyBox lightbox from "http://fancyapps.com/fancybox/"
I want to show a "dynamic table" generating at runtime, in this Lightbox.
Please find the code of Table which will be generation at runtime on click of any <div class="bin">
<div class="vault overflowHidden">
<div class="floatLeft">
<div class="bin" data-cols="4" data-rows="3">
<div class="number">S1</div>
<div class="type">4x3</div>
<div class="description">
Designed to hold max size packages.
<br>
Est. capacity: 23 pkgs
</div>
</div>
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S3</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
<div class="bin" data-cols="7" data-rows="4">
<div class="number">S4</div>
<div class="type">7x4</div>
<div class="description">Est. capacity: 72.8 packages</div>
</div>
<div class="bin" data-cols="9" data-rows="5">
<div class="number">S5</div>
<div class="type">9x5</div>
<div class="description">Est. capacity: 121 packages</div>
</div>
<div class="bin" data-cols="4" data-rows="3">
<div class="number">S6</div>
<div class="type">4x3</div>
<div class="description">
Designed to hold max size packages.
<br>
Est. capacity: 23 packages
</div>
</div>
<div class="bin repack" data-cols="9" data-rows="5">
<div class="number">S8</div>
<div class="type">9x5 Repack</div>
<div class="description">Est. capacity: 117 packages</div>
</div>
</div>
<div class="floatRight">
<div class="bin repack" data-cols="9" data-rows="5">
<div class="number">S2</div>
<div class="type">9x5 Repack</div>
<div class="description">Est. capacity: 117 packages</div>
</div>
<div class="loader">
<div class="lot" data-cols="8" data-rows="1">
<div class="number">L1</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="7" data-rows="1">
<div class="number">L2</div>
<div class="type">50.5-77.5</div>
</div>
<div class="lot" data-cols="4" data-rows="1">
<div class="number">L3</div>
<div class="type">93.6-119</div>
</div>
<div class="lot repack" data-cols="8" data-rows="1">
<div class="number">L4</div>
<div class="type">Repack</div>
</div>
<div class="lot removed">
<div class="number">L5</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="4" data-rows="1">
<div class="number">L6</div>
<div class="type">93.6-119</div>
</div>
<div class="lot" data-cols="8" data-rows="1">
<div class="number">L7</div>
<div class="type">42-50.5</div>
</div>
<div class="lot removed">
<div class="number">L8</div>
<div class="type">42-50.5</div>
</div>
<div class="lot" data-cols="7" data-rows="1">
<div class="number">L9</div>
<div class="type">50.5-77.5</div>
</div>
</div>
<div class="bin" data-cols="9" data-rows="5">
<div class="number">S7</div>
<div class="type">9x5</div>
<div class="description">Est. capacity: 121 packages</div>
</div>
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S9</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
</div>
</div>
Here is the Table which will be generating on click of any above DIV:-
<div class="beanStructure overflowHidden">
<div class="tableContainer">
<table class="container">
</table>
</div>
</div>
Jquery for generating Table :-
<script>
function generateTable(rows, cols) {
$('table.container').add
$('table.container').each(function () {
for (i = 0; i < rows; i++) {
$(this).hide().append('<tr>').fadeIn(100);;
}
});
$('table.container tr').each(function () {
for (j = 0; j < cols; j++) {
$(this).hide().append('<td></td>').fadeIn(100);;
}
});
}
$(function() {
$('.bin, .lot').click(function() {
var repack = '';
if ($(this).hasClass('repack')) {
repack = ' repack';
}
var myRows = $(this).attr('data-rows');
var myCols = $(this).attr('data-cols');
$("table.container").html('');
$("div.tableContainer").removeClass().addClass('tableContainer bin-' + myCols + 'x' + myRows + repack + '');
generateTable(myRows, myCols);
//$('.beanStructure div').hide();
//$('.beanStructure div.bin-' + $(this).children('.type').html() + '').show();
});
});
</script>
Code for Calling Lightbox:-
<script>
//Lightbox Function
$(document).ready(function () {
$(".various").fancybox({
maxWidth: 1000,
maxHeight: 800,
fitToView: false,
width: '80%',
height: '80%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
</script>
Please let me know if you need any other information.
Thank You
Thanks Guys for looking into it! I got the solution!!
All I did is:-
I gave <a class="various" href="#inline"> tag outside each
<div class="bin">... </div></a>
Ex:-
<div class="bin" data-cols="5" data-rows="4">
<div class="number">S3</div>
<div class="type">5x4</div>
<div class="description">Est. capacity: 34.5 packages</div>
</div>
And give id="inline" to the div inside which dynamic table is generating:-
<div class="beanStructure overflowHidden" id="inline">
<div class="tableContainer">
<table class="container">
</table>
</div>
</div>
Thanks once again
Related
I'm stuck with problem in cypress
there is dynamic DOM:
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
elements .Item appear dynamically how I can wait until "Item" with
<div class="Name"> Name3 </div>
<div class="Color"> Color3 </div>
appear in this list and get .Item via Cypress
DOM before
before
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
</div>
after
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
or it could be
<div class="Table">
<div class="Item">
<div class="Name"> Name1 </div>
<div class="Color"> Color1 </div>
<div class="Add"> Add </div>
</div>
<div class="Item">
<div class="Name"> Name2 </div>
<div class="Color"> Color2 </div>
<div class="Add"> Add </div>
</div>
</div>
need to wait second row appear by Name and Color
Since class="Item" is the common factor, use a cy.get() with retry on the count of it.
cy.get('.Item').should('have.length', 2)
on npm there is a package named cypress-wait-until that should work fine
Installation
npm i -D cypress-wait-until
Import
import 'cypress-wait-until';
Usage
Refere to the official npm site
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
I need to do a function that
if class="btn btn-default" exists
click them
this would be problematic bcz there are more btn defaults besides this ones :D
so how do i work with the "Chest unlocked"
<div class="chest_container">
<div class="chest unlocked"></div>
Here's the html
<div id="daily_bonus_content">
<div class="rewards_grid">
<div class="reward day_1">
<div class="center">
<div class="chest_container">
<div class="chest unlocked"></div>
<div class="day">1</div>
<div class="actions">Abrir</div>
</div>
</div>
</div>
<div class="reward day_2">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">2</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_3">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">3</div>
<div class="actions"></div>
</div>
</div>
</div>
<div class="reward day_4">
<div class="center">
<div class="chest_container">
<div class="chest"></div>
<div class="day">4</div>
<div class="actions"></div>
</div>
</div>
</div>
In vanillaJS, clicking every btn-default in a chest_container
var buttons = document.querySelector(".chest_container .btn-default");
buttons.forEach(function(button) {
button.click();
});
If you catch the click in an event, you can reach the chest_unlocked by doing the following, where e is the event:
var chestUnlockedDiv = e.target.parentElement.parentElement.querySelector(".chest.unlocked");
I'm using Scroll Reveal for on-scroll reveal animation. what I want to do is to reveal child items of a container sequentially when its position is reached. How can I do that? I'm finding it hard to understand its documentation.
This is my code,
<div class="container-fluid features" style="padding-bottom: 75px;">
<h2 style="text-align: center;">Features</h2>
<div class="row">
<div class="col-md-4">
<div class="featureOne">
<div class="row">
<div class="col-md-10">
<h3>Lorem</h3>
</div>
<div class="col-md-2">
<img src="img/cog-upd.png" style="margin-top: 42px;position: absolute;right: -55px;" />
</div>
</div>
</div>
<div class="featureTwo">
<div class="row">
<div class="col-md-10">
<h3>Lorem</h3>
</div>
<div class="col-md-2">
<img src="img/task-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
</div>
</div>
</div>
<div class="featureThree">
<div class="row">
<div class="col-md-10">
<h3>Lorem</h3>
</div>
<div class="col-md-2">
<img src="img/payment-upd.png" style="margin-top: 50px;position: absolute;right: -55px;" />
</div>
</div>
</div>
</div>
<div class="col-md-4">
<img class="ipad" src="img/ipad-center.png" style="display:block;margin:auto;padding-top: 35px;" />
</div>
<div class="col-md-4">
<div class="featureFour">
<div class="row">
<div class="col-md-2">
<img src="img/integration-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
</div>
<div class="col-md-10">
<h3>Lorem</h3>
</div>
</div>
</div>
<div class="featureFive">
<div class="row">
<div class="col-md-2">
<img src="img/ach-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
</div>
<div class="col-md-10">
<h3>Lorem</h3>
</div>
</div>
</div>
<div class="featureSix">
<div class="row">
<div class="col-md-2">
<img src="img/config-upd.png" style="margin-top: 50px;position: absolute;left: -55px;" />
</div>
<div class="col-md-10">
<h3>Lorem</h3>
</div>
</div>
</div>
</div>
</div>
</div>
Scroll reveal code,
<script>
window.sr = ScrollReveal();
sr.reveal('.ipad', {
duration: 500,
origin: 'bottom'
});
sr.reveal('.featureOne', {
duration: 1000,
origin: 'left',
delay: 500
});
sr.reveal('.featureTwo', {
duration: 1000,
origin: 'left',
delay: 800
});
sr.reveal('.featureThree', {
duration: 1000,
origin: 'left',
delay: 1300
});
sr.reveal('.featureFour', {
duration: 1000,
origin: 'left',
delay: 1800
});
sr.reveal('.featureFive', {
duration: 1000,
origin: 'left',
delay: 2200
});
sr.reveal('.featureSix', {
duration: 1000,
origin: 'left',
delay: 2600
});
</script>
I am using highChart and highMap with div's created as slides.We are using jquery cycle 2 for the slide effect.
After certain time, the charts are overlapping in Mozilla. But in Chrome hidden slides chart disappears,but legend are present.
Image Link is given below.
https://www.facebook.com/photo.php?fbid=709625395825970&set=a.709625732492603.1073741832.100003355489549&type=1&theater
Sample Code:
jsp code:
<div id="cycle-slideshow" style="width: 100%;">
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for map
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for piechart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
</div>
code for slider:
function getslider(){
$('#cycle-slideshow').cycle({
timeout: 90000,
slides: '> div',
fx:'fade'
});
$( '#cycle-slideshow' ).on( 'cycle-after', function( event, opts ) {
console.log("lastRunTime "+lastRunTime);
console.log("timedifference "+((lastRunTime-event.timeStamp)/1000));
lastRunTime=event.timeStamp;
});
}
code for piechart:
function getShareOfVoice() {
$.ajax({
type:"POST",
dataType:"json",
url:'<s:url value="XXXXXX',
data:{sampledata : sampledate},
cache: false,
async:"false",
success:function(data) {
console.log("in success for share of voice");
var vals = JSON.parse(JSON.stringify(data));
if(vals.data.length>0){
var dataArray = vals.data;
var overallseries = [];
overallShareOfVoiceOptions.chart.renderTo = divid;
for ( var pos = 0; pos < dataArray.length; pos++) {
var d = dataArray[pos];
var dd = {};
var legend_icon = " ";
if (d.pic != null
&& typeof d.pic !== "undefined"
&& d.pic.length > 0) {
legend_icon = '<img style="width: 45px; height: 30px" src="'+d.pic+'" >';
} else {
legend_icon = d.name;
}
dd.color = d.cssStyle;
dd.y = d.count;
dd.name = legend_icon;
overallseries.push(dd);
}
overallShareOfVoiceOptions.series[0].data = overallseries;
if (overallseries.length > 0) {
var shareOfVoiceOverallGraph = new Highcharts.Chart(
overallShareOfVoiceOptions);
}
if (draw !== true) {
progressbar(divid);
}
setTimeout(function() {
getShareOfVoice();
}, 5 * 60 * 1000);
}
},error:function(data){
setTimeout(function() {
getShareOfVoice();
}, 2 * 60 * 1000);
}
});
}
code for highMap:
function getRegionChart() {
$.ajax({
type:"POST",
url:'XXXXXXXXXXXXXXXX',
dataType:'json',
data : {sampledata : sampledata},
success : function(data){
var regions = JSON.parse(JSON.stringify(data));
if(regions.length > 0){
$('#' + divid).highcharts('Map',{
title : {
text : null
},
subtitle : {
text : null
},
mapNavigation : {
enabled : false,
buttonOptions : {
verticalAlign : 'bottom'
}
},
legend : {
align : 'left',
layout : 'vertical',
verticalAlign : 'middle',
y : 10,
floating : true,
borderWidth : 0,
backgroundColor : 'white',
},
colorAxis : {
min : 0,
minColor : '#cccc00',
maxColor : '#666600'
},
navigation : {
menuItemStyle : {
fontSize : '10px'
},
buttonOptions : {
enabled : false
}
},
credits : {
enabled : false
},
series : [ {
data : regions,
mapData : Highcharts.maps['countries/in/custom/in-all-disputed'],
joinBy : 'hc-key',
name : 'State',
states : {
hover : {
color : '#BADA55'
}
},
dataLabels : {
enabled : true,
formatter : function() {
if(!(this.point.options["show"]))
return;
return this.point.value+ "%";
}
}
} ]
});
setTimeout(function() {
getRegionChart();
}, 5*60 *1000);
}
},error : function(data) {
setTimeout(function() {
getRegionChart();
},2*60 * 1000);
}
});
}