No city data available."; return; } var table = document.createElement("table"); table.className = "historical_data_table table table-striped"; var thead = document.createElement("thead"); var headerRow1 = document.createElement("tr"); var headerCell = document.createElement("th"); headerCell.colSpan = 2; headerCell.style.textAlign = "center"; headerCell.innerHTML = "Other Cities in " + meta.countryName; headerRow1.appendChild(headerCell); var headerRow2 = document.createElement("tr"); var cityHeader = document.createElement("th"); cityHeader.style.textAlign = "center"; cityHeader.innerHTML = "City Name"; var popHeader = document.createElement("th"); popHeader.style.textAlign = "center"; popHeader.innerHTML = "Population"; headerRow2.appendChild(cityHeader); headerRow2.appendChild(popHeader); thead.appendChild(headerRow1); thead.appendChild(headerRow2); table.appendChild(thead); var tbody = document.createElement("tbody"); for (var i = 0; i < data.length; i++) { var row = data[i]; var isHighlight = row.table_city_name === meta.currentCity; var slug = row.table_city_name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, ""); var url = "/global-metrics/cities/" + row.table_city_code + "/" + slug + "/" + meta.metricName; var value = Number(row.table_value).toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0 }); var tr = document.createElement("tr"); var tdCity = document.createElement("td"); tdCity.style.textAlign = "left"; if (isHighlight) tdCity.style.cssText += "font-size:20px; font-weight:bold;"; var cityLink = document.createElement("a"); cityLink.href = url; cityLink.innerHTML = row.table_city_name; tdCity.appendChild(cityLink); var tdValue = document.createElement("td"); tdValue.style.textAlign = "center"; if (isHighlight) tdValue.style.cssText += "font-size:20px; font-weight:bold;"; tdValue.innerHTML = meta.left + value + meta.right; tr.appendChild(tdCity); tr.appendChild(tdValue); tbody.appendChild(tr); } table.appendChild(tbody); container.appendChild(table); } document.addEventListener("DOMContentLoaded", renderCityRankingTable); //Make the right sidebar sticky on scroll document.addEventListener('DOMContentLoaded', function () { // Only run on desktops (>=768px) if (window.innerWidth < 768) return; var stickyElem = document.querySelector('.stickyContainer'); if (!stickyElem) return; var offset = 0; // desired top offset when sticky var stickyTop = stickyElem.getBoundingClientRect().top + window.pageYOffset; window.addEventListener('scroll', function () { if (window.pageYOffset > stickyTop - offset) { stickyElem.style.position = 'fixed'; stickyElem.style.marginRight = '-20px'; stickyElem.style.top = offset + 'px'; } else { stickyElem.style.position = 'relative'; stickyElem.style.top = 'initial'; } }); }); function toggleContent() { var contentWrapper = document.getElementById('description-wrapper'); var toggleButton = document.getElementById('toggle-button'); if (contentWrapper.classList.contains('expanded')) { contentWrapper.classList.remove('expanded'); toggleButton.textContent = 'View More'; } else { contentWrapper.classList.add('expanded'); toggleButton.textContent = 'View Less'; } } var frequencies = {"chart_list":{"Total Population":"chart1","Annual % Change":"chart2"}}; var parentContainer = document.getElementById("chart-list-mobile"); Object.entries(frequencies.chart_list).forEach(function([key, value], index) { // Create and append the parent chart div var chartPanel = document.createElement("div"); chartPanel.id = "chartPanel" + (index + 1); // Append counter to make it unique chartPanel.className = "chart_panel"; parentContainer.appendChild(chartPanel); // Create and append the panel header element var panelHeaderContainer = document.createElement("div"); panelHeaderContainer.className = "chart_panel_header"; chartPanel.appendChild(panelHeaderContainer); // Create and append the h3 element for the title var titleH2 = document.createElement("h2"); titleH2.className = "chart_title"; titleH2.textContent = key; // Concatenate chart_title, "|", and key panelHeaderContainer.appendChild(titleH2); // Create and append the tabs element var tabsContainer = document.createElement("div"); tabsContainer.className = "chart_tabs"; panelHeaderContainer.appendChild(tabsContainer); // Create and append the tabs subelement var tab1 = document.createElement("div"); tab1.classList.add('tab', 'tab1', 'active-tab'); tab1.setAttribute('data-target1', 'chartContainer' + (index + 1)); tab1.setAttribute('data-target2', 'tableContainer' + (index + 1)); tabsContainer.appendChild(tab1); // Add chart image to Tab 1 var tab1Img = document.createElement('img'); tab1Img.src = '/production/global_metrics/images/bar-chart-fill.svg'; tab1Img.width = 15; // Set the width (in pixels) tab1Img.height = 15; // Set the height (in pixels) tab1Img.alt = 'Click on chart icon to view chart'; tab1Img.className = 'tab_images'; // Example: Adding a CSS class tab1.appendChild(tab1Img); // Create and append the tabs subelement var tab2 = document.createElement("div"); tab2.classList.add('tab', 'tab2'); tab2.setAttribute('data-target1', 'tableContainer' + (index + 1)); tab2.setAttribute('data-target2', 'chartContainer' + (index + 1)); tabsContainer.appendChild(tab2); // Add table image to Tab 2 var tab2Img = document.createElement('img'); tab2Img.src = '/production/global_metrics/images/table.svg'; tab2Img.width = 15; // Set the width (in pixels) tab2Img.height = 15; // Set the height (in pixels) tab2Img.alt = 'Click on table icon to view table'; tab2Img.className = 'tab_images'; // Example: Adding a CSS class tab2.appendChild(tab2Img); // Create and append the chart div var chartDiv = document.createElement("div"); chartDiv.classList.add('lazyload', 'chart_block', 'tab_content'); chartDiv.id = "chartContainer" + (index + 1); // Append counter to make it unique chartDiv.setAttribute("data-type", "chart"); chartDiv.setAttribute("data-tableid", "tableContainer" + (index + 1)); chartDiv.setAttribute("data-frequency", value); // Use value for data-frequency chartPanel.appendChild(chartDiv); // Create and append the table div var tableDiv = document.createElement("div"); tableDiv.classList.add('lazyload', 'table_block', 'tab_content'); tableDiv.id = "tableContainer" + (index + 1); // Append counter to make it unique tableDiv.setAttribute("data-type", "table"); tableDiv.setAttribute("data-frequency", value); // Put frequency in as an attribute tableDiv.setAttribute("data-title", key); // Put title in as an attribute chartPanel.appendChild(tableDiv); // Create and set content for advertiserDiv based on device type // var advertiserDiv = document.createElement("div"); // advertiserDiv.className = "lazyload ad_block_ic"; // advertiserDiv.id = "IC_d_300x250_" + (index + 1); // advertiserDiv.setAttribute("data-type", "investing_channel"); // parentContainer.appendChild(advertiserDiv); //Display different Dianomi unit based on position if(index == 0) { var dianomiUnit = "4000"; var DianomiClassName = "lazyload ad_block_dianomi"; } else if (index == 1){ var dianomiUnit = "4001"; var DianomiClassName = "lazyload ad_block_dianomi"; } else if (index == 2){ var dianomiUnit = "4002"; var DianomiClassName = "lazyload ad_block_dianomi"; } else if (index == 3){ var dianomiUnit = "4003"; var DianomiClassName = "lazyload ad_block_dianomi"; } // Create and set content for advertiserDiv based on device type var advertiserDiv = document.createElement("div"); advertiserDiv.className = DianomiClassName; advertiserDiv.id = "dianomi_300x300_" + (index + 1); advertiserDiv.setAttribute("data-type", "dianomi"); advertiserDiv.setAttribute("data-advertiser", dianomiUnit); parentContainer.appendChild(advertiserDiv); })