Pass JS variables to Graphina charts

Dear support,

I hope this this request has already resolved but I gotta ask.

I am creating some metrics and stuff using HTML CSS and JS and I want to depict them with graphina charts. Is there a way to pass my JS variables to the charts?

I will paste bellow what I did with pure code and google.charts that I want to use graphina instead of them.

<style>

/* Styling the form container */

#crypto-metrics-form {

width: 100%;

max-width: 1000px;

margin: 0 auto;

padding: 20px;

border-radius: 10px;

background-color: #1a1a1a;

box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);

}

/* Styling the form labels and input fields side by side */

.form-group {

display: flex;

align-items: center;

margin-bottom: 15px;

}

.form-group label {

font-size: 16px;

color: #ffffff;

flex: 1;

}

.form-group input[type="number"] {

width: 150px;

padding: 8px;

border: 1px solid #444;

border-radius: 8px;

font-size: 14px;

background-color: #333;

color: #ffffff;

}

/* Styling the submit button */

#crypto-metrics-form button {

background-color: #e67e22;

color: white;

border: none;

padding: 12px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

border-radius: 8px;

cursor: pointer;

width: 100%;

margin-top: 10px;

}

/* Button hover effect */

#crypto-metrics-form button:hover {

background-color: #d35400;

}

/* Styling the container for the result */

#results {

margin-top: 20px;

font-size: 18px;

color: #ffffff;

}

/* Styling for tier inputs in a compact way */

.tier-container {

display: grid;

grid-template-columns: repeat(2, 1fr);

gap: 10px;

margin-bottom: 15px;

color: #ffffff;

}

.tier-container input {

width: 100px;

padding: 8px;

border: 1px solid #444;

border-radius: 8px;

font-size: 14px;

background-color: #333;

color: #ffffff;

}

/* Styling for the gauge chart container */

#gauge_chart_div {

width: 400px;

height: 200px;

margin-top: 20px;

background: rgba(0, 0, 0, 0.5);

border-radius: 10px;

padding: 20px;

}

#gauge_chart_title {

text-align: center;

color: #ffffff;

font-size: 18px;

margin-bottom: 10px;

}

</style>

<form id="crypto-metrics-form">

<div class="form-group">

<label for="n">Συντελεστη? (n):</label>

<input type="number" id="n" name="n" value="2" required>

</div>

<div class="form-group">

<label for="pb">Αποδοση ΒΤC (PB):</label>

<input type="number" id="pb" name="pb" value="5" required>

</div>

<div class="form-group">

<label for="tc">Συνολικ? Κεφ?λαιο Αποταμιε?σεων (Total Capital - TC):</label>

<input type="number" id="tc" name="tc" required>

</div>

<div class="form-group">

<label for="ams">Μ?σο? ?ρο? Μηνια?α? Αποταμ?ευση? (Average Monthly Savings - AMS):</label>

<input type="number" id="ams" name="ams" required>

</div>

<div class="form-group">

<label for="cic">Τρ?χον Επενδυτικ? Κεφ?λαιο (Current Investment Capital - CIC):</label>

<input type="number" id="cic" name="cic" required>

</div>

<div class="form-group">

<label for="acc">Συνολικ? Κεφ?λαιο σε Κρυπτονομ?σματα (Allocated Crypto Capital - ACC):</label>

<input type="number" id="acc" name="acc" required>

</div>

<label style="color: #ffffff;">Κατανομ? Κεφαλα?ου αν? Tier (Tier Allocated Capital - TAC):</label>

<div class="tier-container">

<input type="number" id="tac1" name="tac1" placeholder="Tier 1" required>

<input type="number" id="tac2" name="tac2" placeholder="Tier 2" required>

<input type="number" id="tac3" name="tac3" placeholder="Tier 3" required>

<input type="number" id="tac4" name="tac4" placeholder="Tier 4" required>

</div>

<div class="form-group">

<label for="icc">?δη Επενδεδυμ?νο Κεφ?λαιο σε Κρυπτονομ?σματα (Invested Crypto Capital - ICC):</label>

<input type="number" id="icc" name="icc" required>

</div>

<div class="form-group">

<label for="acic">Διαθ?σιμο Κεφ?λαιο προ? Επ?νδυση (Available CIC - ACIC):</label>

<input type="number" id="acic" name="acic" required>

</div>

<div class="form-group">

<label for="ps">Συνολικ?? Αριθμ?? Επιλεγμ?νων Crypto Project (Project Selected - PS):</label>

<input type="number" id="ps" name="ps" required>

</div>

<div class="form-group">

<label for="tp">Συνολικη αποδοση χαρτοφυλακιου (Total Profit - TP):</label>

<input type="number" id="tp" name="tp" required>

</div>

<div class="form-group">

<label for="ai">Ετησιο συνολικο εισοδημα (Annual Income - AI):</label>

<input type="number" id="ai" name="ai" required>

</div>

<button type="submit">Υποβολ?</button>

</form>

<div id="results"></div>

<div id="gauge_chart_div">

<div id="gauge_chart_title">Δε?κτη? Διασπορ?? αν? Προτζεκτ</div>

<div id="gauge_chart_inner"></div>

</div>

<script>

google.charts.load('current', {'packages':['gauge']});

google.charts.setOnLoadCallback(drawGaugeChart);

function drawGaugeChart(value = 0, ticks = [0], colors = {}) {

var data = google.visualization.arrayToDataTable([

['Label', 'Value'],

['PS', value]

]);

var options = {

width: 400,

height: 200,

max: ticks[ticks.length - 1],

min: ticks[0],

majorTicks: ticks,

minorTicks: Math.max(1, Math.floor((ticks[ticks.length - 1] - ticks[0]) / ((ticks.length - 1) * 2))),

redFrom: colors.redFrom || 0,

redTo: colors.redTo || 0,

yellowFrom: colors.orangeFrom || 0,

yellowTo: colors.orangeTo || 0,

greenFrom: colors.greenFrom || 0,

greenTo: colors.greenTo || 0,

blueFrom: colors.blueFrom || 0,

blueTo: colors.blueTo || 0,

purpleFrom: colors.purpleFrom || 0,

purpleTo: colors.purpleTo || 0,

backgroundColor: 'transparent',

chartArea: {

backgroundColor: {

fill: 'transparent'

}

},

fontName: 'Arial',

fontColor: '#ffffff',

gauge: {

borderColor: '#ffffff'

}

};

var chart = new google.visualization.Gauge(document.getElementById('gauge_chart_inner'));

chart.draw(data, options);

}

document.getElementById('crypto-metrics-form').addEventListener('submit', function(event) {

event.preventDefault();

// Get input values

const cic = parseInt(document.getElementById('cic').value);

const ps = parseInt(document.getElementById('ps').value);

let colorCategory = '';

let ticks = [];

let colors = {};

// Determine the color, ticks, and ranges based on conditions

if (cic < 1000) {

ticks = [0, 1, 2, 3, 4, 5, 6, 7]; // 9 ticks

colors = { greenFrom: 0, greenTo: 3.5, orangeFrom: 3.5, orangeTo: 6.5, redFrom: 6.5, redTo: 7 };

if (ps <= 3) {

colorCategory = 'Green';

} else if (ps <= 6) {

colorCategory = 'Orange';

} else {

colorCategory = 'Red';

}

} else if (cic >= 1000 && cic < 5000) {

ticks = [0, 3, 6, 9, 12]; // 5 ticks

colors = { orangeFrom: 0, orangeTo: 3.5, greenFrom: 3.5, greenTo: 7.5, blueFrom: 7.5, blueTo: 12.5 };

if (ps <= 3) {

colorCategory = 'Orange';

} else if (ps <= 7) {

colorCategory = 'Green';

} else if (ps <= 12) {

colorCategory = 'Blue';

} else {

colorCategory = 'Purple';

}

} else if (cic >= 5000 && cic <= 10000) {

ticks = [0, 3, 6, 9, 12, 15]; // 6 ticks

colors = { redFrom: 0, redTo: 2.5, orangeFrom: 2.5, orangeTo: 5.5, greenFrom: 5.5, greenTo: 10.5, blueFrom: 10.5, blueTo: 15 };

if (ps <= 2) {

colorCategory = 'Red';

} else if (ps <= 5) {

colorCategory = 'Orange';

} else if (ps <= 10) {

colorCategory = 'Green';

} else {

colorCategory = 'Blue';

}

} else if (cic > 10000 && cic <= 20000) {

ticks = [0, 5, 10, 15, 20]; // 5 ticks

colors = { redFrom: 0, redTo: 5.5, orangeFrom: 5.5, orangeTo: 9.5, greenFrom: 9.5, greenTo: 15.5, blueFrom: 15.5, blueTo: 20 };

if (ps <= 5) {

colorCategory = 'Red';

} else if (ps <= 9) {

colorCategory = 'Orange';

} else if (ps <= 15) {

colorCategory = 'Green';

} else {

colorCategory = 'Blue';

}

} else if (cic > 20000 && cic <= 50000) {

ticks = [0, 5, 10, 15, 20, 25]; // 6 ticks

colors = { redFrom: 0, redTo: 8.5, orangeFrom: 8.5, orangeTo: 15.5, greenFrom: 15.5, greenTo: 20.5, blueFrom: 20.5, blueTo: 25 };

if (ps <= 8) {

colorCategory = 'Red';

} else if (ps <= 15) {

colorCategory = 'Orange';

} else if (ps <= 20) {

colorCategory = 'Green';

} else {

colorCategory = 'Blue';

}

} else if (cic > 50000) {

ticks = [0, 10, 20, 30, 40, 50, 60]; // 7 ticks

colors = { redFrom: 0, redTo: 10.5, orangeFrom: 10.5, orangeTo: 20.5, greenFrom: 20.5, greenTo: 40.5, blueFrom: 40.5, blueTo: 50.5, purpleFrom: 50.5, purpleTo: 60 };

if (ps <= 10) {

colorCategory = 'Red';

} else if (ps <= 20) {

colorCategory = 'Orange';

} else if (ps <= 40) {

colorCategory = 'Green';

} else if (ps <= 50) {

colorCategory = 'Blue';

} else {

colorCategory = 'Purple';

}

}

// Update the gauge chart with the calculated value, appropriate ticks, and colors

drawGaugeChart(ps, ticks, colors);

// Optionally update the UI

const resultElement = document.getElementById('results');

resultElement.innerHTML = Δε?κτη? Διασπορ?? αν? Προτζεκτ: <span style="color: ${colorCategory.toLowerCase()}">${colorCategory}</span>;

});

</script>