Untitled

<script type="text/javascript">
// Calculate the step size
function updateGauge() {
    const CoinPrice<?php echo "$CoinSymbol"; ?> = parseFloat(document.getElementById("CoinPrice-<?php echo "$CoinSymbol"; ?>").getAttribute("data-Price"));
    console.log("Last CoinPrice : " + CoinPrice<?php echo "$CoinSymbol"; ?>);
    const WinTriggerPrice<?php echo "$CoinSymbol"; ?> = parseFloat(document.getElementById("WinTriggerPrice-<?php echo "$CoinSymbol"; ?>").value);
    const LossTriggerPrice<?php echo "$CoinSymbol"; ?> = parseFloat(document.getElementById("LossTriggerPrice-<?php echo "$CoinSymbol"; ?>").value);
    const PanicPrice<?php echo "$CoinSymbol"; ?> = parseFloat(document.getElementById("PanicPrice-<?php echo "$CoinSymbol"; ?>").value);

    // Calculate the step based on the number of decimal places in CoinPrice
    let decimalCount = (CoinPrice<?php echo "$CoinSymbol"; ?>.toString().split('.')[1] || []).length;
    let step<?php echo "$CoinSymbol"; ?>;

    if (decimalCount === 0) {
        step<?php echo "$CoinSymbol"; ?> = 1; // No decimal places, step is 1
    } else {
        step<?php echo "$CoinSymbol"; ?> = 1 / Math.pow(10, decimalCount); // Step is dynamically calculated
    }

    // Calculate the values array based on the step
    let values<?php echo "$CoinSymbol"; ?> = [];
    for (let i = 0; i <= 11; i++) {
        values<?php echo "$CoinSymbol"; ?>.push(PanicPrice<?php echo "$CoinSymbol"; ?> + i * step<?php echo "$CoinSymbol"; ?>);
    }

    const myChart<?php echo "$CoinSymbol"; ?> = document.getElementById("myChart-<?php echo "$CoinSymbol"; ?>");

    var myConfig<?php echo "$CoinSymbol"; ?> = {
        type: "gauge",
        backgroundColor: false,
        globals: {
            color: 'white',
            fontSize: 15
        },
        plotarea: {
            marginTop: 20,
            width: 350,
            marginLeft: '12%'
        },
        plot: {
            size: '100%',
            valueBox: {
                placement: 'center',
                text: '%v',
                fontSize: 35,
                rules: [
                    {
                        rule: '%v >= ' + LossTriggerPrice<?php echo "$CoinSymbol"; ?>,
                        text: '%v<br>Safe Zone',
                        backgroundColor: '#29B6F6',
                        fontSize: 20
                    },
                    {
                        rule: '%v < ' + LossTriggerPrice<?php echo "$CoinSymbol"; ?>,
                        text: '%v<br>Loss Triggered',
                        backgroundColor: '#E53935',
                        fontSize: 20
                    }
                ]
            }
        },
        tooltip: {
            borderRadius: 5
        },
        scaleR: {
            step: step<?php echo "$CoinSymbol"; ?>,
            aperture: 180,
            minValue: PanicPrice<?php echo "$CoinSymbol"; ?>,
            maxValue: WinTriggerPrice<?php echo "$CoinSymbol"; ?>,
            center: {
                visible: true
            },
            tick: {
                visible: true
            },
            item: {
                offsetR: 0,
                rules: [
                    {
                        rule: '%i == 11',
                        offsetX: 15
                    }
                ]
            },
            labels: values<?php echo "$CoinSymbol"; ?>,
            ring: {
                size: 50,
                rules: [
                    {
                        rule: '%v <= ' + LossTriggerPrice<?php echo "$CoinSymbol"; ?>,
                        backgroundColor: '#E53935'
                    },
                    {
                        rule: '%v >= ' + LossTriggerPrice<?php echo "$CoinSymbol"; ?>,
                        backgroundColor: '#29B6F6'
                    }
                ]
            }
        },
        refresh: {
            type: "feed",
            transport: "js",
            url: "feed<?php echo "$CoinSymbol"; ?>()",
            interval: 2000,
            resetTimeout: 1000
        },
        series: [
            {
                values: [CoinPrice<?php echo "$CoinSymbol"; ?>],
                backgroundColor: 'black',
                indicator: [10, 1, 1, 1, 0.75],
                animation: {
                    effect: 0,
                    method: 1,
                    sequence: 1,
                    speed: 9000
                },
            }
        ]
    };

    zingchart.render({
        id: myChart<?php echo "$CoinSymbol"; ?>.id,
        data: myConfig<?php echo "$CoinSymbol"; ?>,
        height: 400,
        marginLeft: 180,
        color: 'white',
        width: '100%'
    });
}

// Continuously poll the input value every 4 seconds
setInterval(updateGauge, 4000);
</script>