Untitled

<script type="text/javascript">
// Calculate the step size
const CoinPrice<?php echo "$CoinSymbol"; ?> = parseFloat(document.getElementById("CoinPrice-<?php echo "$CoinSymbol"; ?>").getAttribute("data-Price"));
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);

let step<?php echo "$CoinSymbol"; ?> = (WinTriggerPrice<?php echo "$CoinSymbol"; ?> - PanicPrice<?php echo "$CoinSymbol"; ?>) / 11;
let z<?php echo "$CoinSymbol"; ?> = step<?php echo "$CoinSymbol"; ?>.toFixed(4);

const values<?php echo "$CoinSymbol"; ?> = Array.from({ length: 12 }, (_, i) => PanicPrice<?php echo "$CoinSymbol"; ?> + i * z<?php echo "$CoinSymbol"; ?>);

window.feed<?php echo "$CoinSymbol"; ?> = function (callback) {
    var tick = {};
    tick.plot0 = values<?php echo "$CoinSymbol"; ?>[Math.floor(Math.random() * values<?php echo "$CoinSymbol"; ?>.length)];
    callback(JSON.stringify(tick));
};

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: {
        aperture: 180,
        minValue: PanicPrice<?php echo "$CoinSymbol"; ?>,
        maxValue: WinTriggerPrice<?php echo "$CoinSymbol"; ?>,
        step: 0.1,
        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: 2,
                method: 1,
                sequence: 4,
                speed: 9000
            },
        }
    ]
};

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