Automated Chart with Morris JS Library - charts

Question

I´m using the Morris JS library to create an automated line chart.
The idea is as follows: a user selects a product from a dropdown and indicates the number of times he uses that product per day.
The result is reflected in the graph as follows: line 1 increases according to "a fixed price (fp) * number of times the product is consumed (nt) + total price of the product (tp)", while line 2 it is constant in all its values (repeats always the same regardless of user selection).
The increase in the values of line 1 will always be the "increase" variable added to the previous value obtained in n4. Also, when the value on line 1 exceeds the value on line 2, I want the chart to not generate any more data points.
A function with the If...else statement should give me the solution, but I don't know how to integrate it with Morris. Can you guide me to its correct operation? Javascript is not a language that I have mastered and I am experiencing problems in its development.
Any contribution or suggestion will be welcome. Thank you very much for your help.
HTML
<div class="col1">
<label>
<select class="product" name="product" onchange="if(document.images) document.images['new'].src='img/'+this.options[this.selectedIndex].id+'.png';">
<option value="">Selection product</option>
<option value="100 $" id="1">Product1</option>
<option value="200 $" id="2">Product2</option>
<option value="300 $" id="3">Product3</option>
<option value="400 $" id="4">Product4</option>
<option value="500 $" id="5">Product5</option>
</select>
</label>
<div class="result"></div>
<form name="use">
<td align=right>Number of times</td><td align=left><input type="text" name="use" id="iduse" maxlength="4"></td>
<img src="" name="new" alt="">
</form>
</div>
<div class="column2">
<div id="myfirstchart" style="height: 300px;"></div>
</div>
</div>
</div>
<script src="code.js" charset="utf-8"></script>
JAVASCRIPT
var n1= document.getElementById("iduse").value;
var n2=0.02*30;
var n3=n1*n2;
var n4=n3+result;
var increase=n4+x;
new Morris.Line({
element: 'myfirstchart',
data: [
{ period: '2022-07', line1: n4, line2: 12 },
{ period: '2022-08', line1: ?, line2: 24 },
{ period: '2022-09', line1:?, line2: 36 },
{ period: '2022-10', line1: ?, line2: 48 },
{ period: '2022-11', line1: ?, line2: 60 },
{ period: '2022-12', line1: ?, line2: 72 },
{ period: '2023-01', line1: ?, line2: 84 },
{ period: '2023-02', line1:?, line2: 96 },
{ period: '2023-03', line1: ?, line2: 108 },
{ period: '2023-04', line1: ?, line2: 120 },
{ period: '2023-05', line1: ?, line2: 132 },
{ period: '2023-06', line1: ?, line2: 144 },
{ period: '2023-07', line1: ?, line2: 156 }
],
xkey: 'period',
// A list of names of data record attributes that contain y-values.
ykeys: ['line1', 'line2'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value1', 'Value2'],
resize:true,
postUnits:[" $"],
});
const selectElement = document.querySelector('.product');
selectElement.addEventListener('change', (event) => {
const result = document.querySelector('.result');
result.textContent = `Price ${event.target.value}`;
});