{"id":1368,"date":"2024-09-24T17:34:34","date_gmt":"2024-09-24T21:34:34","guid":{"rendered":"https:\/\/www.bestbuddies.org\/stateshowdown\/?page_id=1368"},"modified":"2025-10-28T08:20:46","modified_gmt":"2025-10-28T12:20:46","slug":"leaderboard","status":"publish","type":"page","link":"https:\/\/www.bestbuddies.org\/stateshowdown\/leaderboard\/","title":{"rendered":"leaderboard"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1368\" class=\"elementor elementor-1368\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-69e66e1 e-flex e-con-boxed e-con e-parent\" data-id=\"69e66e1\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;gradient&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7a6a736 elementor-widget elementor-widget-heading\" data-id=\"7a6a736\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Leaderboard<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-72307ac elementor-widget elementor-widget-html\" data-id=\"72307ac\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script type=\"text\/javascript\" id=\"topindividuals\">\r\n  benTopFundraisers (5289, \"topindividuals\", 51, {ShowAmountRaised: true, AlphaOrder: false});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7cfccdd elementor-widget elementor-widget-html\" data-id=\"7cfccdd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\r\n<div class=\"wrapper\">\r\n<!-- Custom Title with Blue Box -->\r\n<div id=\"chart-title\" style=\"display: flex; align-items: center; margin-bottom: 10px;\">\r\n    <div style=\"width: 20px; height: 20px; background-color: rgba(91, 194, 231, 0.7); margin-right: 10px; border: 1px solid rgba(91, 194, 231, 1);\"><\/div>\r\n    <span style=\"font-size: 20px; font-family: Arial; font-weight: bold; color: #000000;\">Leading State<\/span>\r\n<\/div>\r\n\r\n<canvas id=\"leaderboardChart\" width=\"400\" height=\"100\" class=\"wrapper\"><\/canvas>\r\n\r\n<script>\r\njQuery(document).ready(function() {\r\n    function setCanvasHeight() {\r\n        var chartCanvas = document.getElementById('leaderboardChart');\r\n        if (window.matchMedia('(max-width: 1020px)').matches) {\r\n            chartCanvas.height = 950; \/\/ Set height to 300 for screens 1020px and below\r\n        } else {\r\n            chartCanvas.height = 400; \/\/ Default height for larger screens\r\n        }\r\n    }\r\n\r\n    \/\/ Create the chart after setting the canvas height\r\n    function createChart() {\r\n        setCanvasHeight(); \/\/ Adjust the canvas height before creating the chart\r\n\r\n        var labels = [];\r\n        var data = [];\r\n\r\n        \/\/ Adjust the selector to match the elements containing each state's information\r\n        jQuery('div').each(function() {\r\n            var stateElement = jQuery(this).find('.bentopfundraisersname').first(); \r\n            var valueElement = jQuery(this).find('.topfundraisersamount').first(); \r\n\r\n            var state = stateElement.text().trim();\r\n            var value = valueElement.text().trim();\r\n\r\n            if (state && value) {\r\n                if (!labels.includes(state)) {\r\n                    labels.push(state);\r\n\r\n                    \/\/ Clean up value string before parsing (remove $, commas, etc.)\r\n                    var cleanValue = value.replace(\/[^0-9.-]+\/g, '');\r\n                    data.push(parseFloat(cleanValue));\r\n                }\r\n            }\r\n        });\r\n\r\n        \/\/ Create the chart\r\n        var ctx = document.getElementById('leaderboardChart').getContext('2d');\r\n        var leaderboardChart = new Chart(ctx, {\r\n            type: 'bar',\r\n            data: {\r\n                labels: labels,\r\n                datasets: [{\r\n                    label: 'Dollars Raised',\r\n                    data: data,\r\n                    backgroundColor: 'rgba(91, 194, 231, 0.7)',\r\n                    borderColor: 'rgba(91, 194, 231, 1)',\r\n                    borderWidth: 1,\r\n                    barThickness: 10, \/\/ Set a minimum bar thickness for visibility\r\n                    categoryPercentage: 1.9, \/\/ Adjust space between bars (lower = less space)\r\n                    barPercentage: 2.0 \/\/ Make bars fill more of the available space\r\n                }]\r\n            },\r\n            options: {\r\n                indexAxis: 'y',\r\n                scales: {\r\n                    x: {\r\n                        beginAtZero: true,\r\n                        suggestedMax: 50,\r\n                        stepSize: 5,\r\n                        grid: {\r\n                            display: true, \/\/ Display the vertical grid lines\r\n                        },\r\n                        title: {\r\n                            display: true,\r\n                            text: '',\r\n                            font: {\r\n                                size: 16,\r\n                                family: 'Arial',\r\n                                style: 'normal'\r\n                            },\r\n                            color: '#000000' \/\/ Change the text color of the x-axis title\r\n                        },\r\n                        ticks: {\r\n                            color: '#000000', \/\/ Change the tick font color\r\n                            font: {\r\n                                size: 14 \/\/ Adjust tick font size\r\n                            }\r\n                        }\r\n                    },\r\n                    y: {\r\n                        grid: {\r\n                            display: false\r\n                        },\r\n                        title: {\r\n                            display: false,\r\n                            text: 'States',\r\n                            font: {\r\n                                size: 16,\r\n                                family: 'Arial',\r\n                                style: 'normal',\r\n                                weight: 'bold'\r\n                            },\r\n                            color: '#000000'\r\n                        },\r\n                        ticks: {\r\n                            color: '#000000', \/\/ Change the tick font color\r\n                            font: {\r\n                                size: 14 \/\/ Adjust tick font size\r\n                            },\r\n                            autoSkip: false, \/\/ Prevents skipping labels\r\n                            maxRotation: 0, \/\/ Ensures the labels are horizontal (if rotated)\r\n                            minRotation: 0, \/\/ Ensures no rotation\r\n                            padding: 0 \/\/ Adjust padding between the labels and bars\r\n                        }\r\n                    }\r\n                },\r\n                plugins: {\r\n                    legend: {\r\n                        display: true,\r\n                        position: 'bottom',\r\n                        labels: {\r\n                            color: '#000000', \/\/ Change legend text color\r\n                            font: {\r\n                                size: 16 \/\/ Change legend font size\r\n                            }\r\n                        }\r\n                    },\r\n                    tooltip: {\r\n                        enabled: true,\r\n                        mode: 'nearest',\r\n                        intersect: false,\r\n                        callbacks: {\r\n                            label: function(context) {\r\n                                return ' Donation: $' + context.raw.toFixed(2);\r\n                            }\r\n                        },\r\n                        titleFont: {\r\n                            size: 14,\r\n                            family: 'Arial'\r\n                        },\r\n                        bodyFont: {\r\n                            size: 12\r\n                        },\r\n                        backgroundColor: 'rgba(255, 255, 255,1.0)',\r\n                        borderColor: '#EBEBEB', \/\/ Border color\r\n                        borderWidth: 1, \/\/ Border width to simulate stroke\r\n                        titleColor: '#000000',\r\n                        bodyColor: '#000000'\r\n                    }\r\n                }\r\n            }\r\n        });\r\n    }\r\n\r\n    \/\/ Wait for some time to ensure dynamic content is loaded and then create the chart\r\n    setTimeout(createChart, 1000);\r\n\r\n   \r\n});\r\n\r\n    \r\n<\/script>\r\n\r\n\r\n<style>\r\n    \r\n  \r\n<\/style>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Leaderboard Leading State<\/p>\n","protected":false},"author":16,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1368","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/pages\/1368","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/comments?post=1368"}],"version-history":[{"count":10,"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/pages\/1368\/revisions"}],"predecessor-version":[{"id":3095,"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/pages\/1368\/revisions\/3095"}],"wp:attachment":[{"href":"https:\/\/www.bestbuddies.org\/stateshowdown\/wp-json\/wp\/v2\/media?parent=1368"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}