Stock Market Game


// Enqueue necessary scripts and styles
function enqueue_bar_chart_scripts() {
    wp_enqueue_style('bar-chart-styles', plugin_dir_url(__FILE__) . 'bar-chart-styles.css');
}
add_action('wp_enqueue_scripts', 'enqueue_bar_chart_scripts');

// Generate dynamic bar chart shortcode
function generate_bar_chart_shortcode() {
    ob_start();
    ?>
    <style>
        .bar-chart-container {
            width: 100%;
            overflow-x: auto;
            margin-bottom: 20px;
        }

        #bar-chart {
            background-color: #1f1f1f; /* Dark background color */
            border: 1px solid #444; /* Dark border color */
        }

        #bar-chart::-webkit-scrollbar {
            width: 8px;
        }

        #bar-chart::-webkit-scrollbar-thumb {
            background-color: #444; /* Dark scrollbar color */
        }

        #bar-chart::-webkit-scrollbar-thumb:hover {
            background-color: #666; /* Dark scrollbar hover color */
        }
    </style>
    <div class="bar-chart-container">
        <canvas id="bar-chart" width="800" height="400"></canvas>
    </div>
    <script>
        (function($) {
            $(document).ready(function() {
                var canvas = document.getElementById('bar-chart');
                var ctx = canvas.getContext('2d');
                var data = Array(20).fill(0); // Initialize data array with 20 elements initialized to 0
                var interval = setInterval(updateChart, 1000);

                function updateChart() {
                    $.ajax({
                        url: '<?php echo admin_url('admin-ajax.php'); ?>',
                        type: 'POST',
                        data: {
                            action: 'get_random_bar_data'
                        },
                        success: function(response) {
                            if (response.success) {
                                data.shift(); // Remove the first element
                                data.push(response.data); // Add the new data point at the end
                                drawChart();
                            } else {
                                console.error('Error fetching bar data:', response.data.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            console.error('Error fetching bar data:', status, error);
                        }
                    });
                }

                function drawChart() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.beginPath();
                    ctx.moveTo(50, 50);
                    ctx.lineTo(50, canvas.height - 50);
                    ctx.lineTo(canvas.width - 50, canvas.height - 50);
                    ctx.strokeStyle = '#555'; /* Dark chart line color */
                    ctx.stroke();
                    ctx.textAlign = "right";
                    ctx.textBaseline = "middle";
                    ctx.fillStyle = "#aaa"; /* Light text color */
                    var yStep = (canvas.height - 100) / 10;
                    for (var i = 1; i <= 10; i++) {
                        var yLabel = i * 10;
                        var y = canvas.height - 50 - i * yStep;
                        ctx.fillText(yLabel.toString() + "%", 40, y);
                        ctx.beginPath();
                        ctx.moveTo(50, y);
                        ctx.lineTo(canvas.width - 50, y);
                        ctx.strokeStyle = '#666'; /* Dark grid line color */
                        ctx.stroke();
                    }
                    var barWidth = (canvas.width - 100) / 20;
                    var maxValue = Math.max(...data.map(Math.abs));
                    data.forEach(function(value, index) {
                        var x = canvas.width - (index * barWidth) - 50;
                        if (x < 50) return;
                        var barHeight = (Math.abs(value) / maxValue) * (canvas.height - 100);
                        var y = canvas.height - 50 - barHeight;
                        var color = value >= 0 ? '#4CAF50' : '#F44336';
                        ctx.fillStyle = color;
                        ctx.fillRect(x - (barWidth / 2), y, barWidth, barHeight);
                        ctx.fillStyle = '#aaa'; /* Light text color */
                        ctx.textAlign = 'center';
                        ctx.fillText(value.toString(), x, y - 10);
                    });
                }
            });
        })(jQuery);
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('bar_chart', 'generate_bar_chart_shortcode');

// Handle AJAX request for random bar data
function get_random_bar_data_callback() {
    $data = rand(-100, 100);
    wp_send_json_success($data);
}
add_action('wp_ajax_get_random_bar_data', 'get_random_bar_data_callback');

Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart
🏠 Home 🛍️ Category 🧑🏻‍⚕️ Account 💝 0 Wishlist 🏦 Wallet
Custom Icon
0
0.00
Scroll to Top