Problems with python var not displayed in html/java script

Python Help
1

I am trying to draw a graph into an HTML page with smoothie (http://smoothiecharts.org/)
The random number that’s created is not showing up in the graph or in the java message box.

I can’t upload the smoothie.js…

Does anyone have a solution?

import webbrowser 
import random as rd
from time import time, sleep

smoothie_var = 0
def random_number():
        rndList = []
        for i in range(0, 100000):
            sleep(1)
            global smoothie_var
            smoothie_var = rd.randrange(5, 95)
            
            rndList.append(smoothie_var)
            print(smoothie_var)
         

    
def smoothie(): 
    f = open('smoothie.html','w')
    smoothie =f"""<html>
    
            <head>Test page
            <script type="text/javascript" src="smoothie.js"></script>
                <script type="text/javascript">


                var series1 = new TimeSeries();
                var series2 = new TimeSeries();

                // Randomly add a data point every 500ms
                setInterval(function() {{
                    var now = Date.now();
                    //var val = Math.random() * 10000;
                    var val = {smoothie_var}
                    alert({smoothie_var});
                    series1.append(now, val);
                    series2.append(now, val);
                }}, 500);
            

                function createTimeline() {{
                    var chart1 = new SmoothieChart();
                    chart1.addTimeSeries(series1, {{ strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4 }});
                    chart1.streamTo(document.getElementById("chart"), 500);

                    var chart2 = new SmoothieChart({{ responsive: true }});
                    chart2.addTimeSeries(series2, {{ strokeStyle: 'rgba(0, 255, 0, 1)', fillStyle: 'rgba(0, 255, 0, 0.2)', lineWidth: 4}});
                    chart2.streamTo(document.getElementById("chart-responsive"), 500);
                }}
                </script>
                                <body onload="createTimeline()" style="background-color:#333333">

            
                <canvas id="chart" width="100" height="100"></canvas>

            
                <canvas id="chart-responsive" style="width:100%;height:100px"></canvas>
                            </head>
                    
                
                    </body>
                    
                    </html>"""
        
                
    f.write(smoothie)   
    webbrowser.open('smoothie.html')            
smoothie()
random_number()
2

Are you aware that your code will take nearly 28 hours to complete?

for i in range(0, 100000):
    sleep(1)

100000 seconds is almost 28 hours.

As for the rest of your question, isn’t that a Javascript question? You probably ask somewhere where there are Javascript programmers.

3

Yes , i know, just for testing. I asked the question here because i am not sure if the variable smootie_var reaches the java script, am i doing it the right way with the python code?

4

Without trying it, I would say the Python is correct, for getting the current value (0) into the JS text.

You can easily test your work by printing smoothie to the console.

You launch the web browser without closing the file. My guess is that the text hasn’t reached the disk. You could simply f.close() after you write smoothie, although in a case like this I always try to use with open(...) as f so it happens automatically.

You realise the file is only written once, I suppose? That it won’t change the value in the file when random_number is called, unless you write it again?

5

That is where it is going wrong. I thought that the javascript would fetch the smoothie_var through the setInterval(function() very 500 ms, but that’s not the case if I understand it correctly.
So i need to write the file with the new random number.

Thank you