<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>