src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"> > type="text/javascript"> tpl_vars['_c']->value['hide_mrc'] != 'yes') {?> document.addEventListener("DOMContentLoaded", function() { var counts = JSON.parse('tpl_vars['monthlyRegistered']->value);?> '); var monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; var labels = []; var data = []; for (var i = 1; i <= 12; i++) { var month = counts.find(count => count.date === i); labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3)); data.push(month ? month.count : 0); } var ctx = document.getElementById('chart').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', data: { labels: labels, datasets: [{ label: 'Registered Members', data: data, backgroundColor: '#fc5130', borderColor: '#fc5130', borderWidth: 1 }] }, options: { responsive: true, scales: { x: { grid: { display: false } }, y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.1)' } } } } }); }); tpl_vars['_c']->value['hide_tmc'] != 'yes') {?> document.addEventListener("DOMContentLoaded", function() { var monthlySales = JSON.parse('tpl_vars['monthlySales']->value);?> '); var monthNames = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ]; var labels = []; var data = []; for (var i = 1; i <= 12; i++) { var month = findMonthData(monthlySales, i); labels.push(month ? monthNames[i - 1] : monthNames[i - 1].substring(0, 3)); data.push(month ? month.totalSales : 0); } var ctx = document.getElementById('salesChart').getContext('2d'); var chart = new Chart(ctx, { type: 'bar', //type: 'radialBar', data: { labels: labels, datasets: [{ label: 'Monthly Sales', data: data, backgroundColor: '#fc5130', // Customize the background color borderColor: '#fc5130', // Customize the border color borderWidth: 2 }] }, options: { responsive: true, scales: { x: { grid: { display: false } }, y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.1)' } } } } }); }); function findMonthData(monthlySales, month) { for (var i = 0; i < monthlySales.length; i++) { if (monthlySales[i].month === month) { return monthlySales[i]; } } return null; } tpl_vars['_c']->value['hide_aui'] != 'yes') {?> document.addEventListener("DOMContentLoaded", function() { // Get the data from PHP and assign it to JavaScript variables var u_act = 'tpl_vars['u_act']->value;?> '; var c_all = 'tpl_vars['c_all']->value;?> '; var u_all = 'tpl_vars['u_all']->value;?> '; //lets calculate the inactive users as reported var expired = u_all - u_act; var inactive = c_all - u_all; // Create the chart data var data = { labels: ['Active Users', 'Expired Users', 'Inactive Users'], datasets: [{ label: 'User Recharges', data: [parseInt(u_act), parseInt(expired), parseInt(inactive)], backgroundColor: ['rgba(4, 191, 13)', 'rgba(191, 35, 4)', 'rgba(0, 0, 255, 0.5'], borderColor: ['rgba(0, 255, 0, 1)', 'rgba(255, 99, 132, 1)', 'rgba(0, 0, 255, 0.7'], borderWidth: 1 }] }; // Create chart options var options = { responsive: true, aspectRatio: 1, plugins: { legend: { position: 'bottom', labels: { boxWidth: 15 } } } }; // Get the canvas element and create the chart var ctx = document.getElementById('userRechargesChart').getContext('2d'); var chart = new Chart(ctx, { type: 'pie', data: data, options: options }); }); > src="https://code.jquery.com/jquery-3.6.0.min.js"> > > $(document).ready(function() { $.ajax({ url: "tpl_vars['_url']->value;?> onlineusers/summary", // Adjust this URL to your actual endpoint type: 'GET', dataType: 'json', // Ensure the expected response is JSON success: function(data) { console.log('Data fetched successfully:', data); // Check if data is null or missing properties and set defaults to 0 $('#total-online-users').text(data.total_users || 0); $('#online-hotspot-users').text(data.hotspot_users || 0); $('#online-pppoe-users').text(data.ppp_users || 0); $('#total_data').text(data.total_bytes || 0); }, error: function(error) { console.log('Error fetching data:', error); // Set all values to 0 in case of an error $('#total-online-users').text(0); $('#online-hotspot-users').text(0); $('#online-pppoe-users').text(0); $('#total_data').text(0); } }); }); > _subTemplateRender("file:sections/footer.tpl", $_smarty_tpl->cache_id, $_smarty_tpl->compile_id, 0, $_smarty_tpl->cache_lifetime, array(), 0, false); } }