charting with cicuitpython

Skip to first unread message

Devansh Mahajan

May 10, 2022, 5:20:10 PMMay 10
to Smoothie Charts
I have a question too.
I am working with circuitpython have this code:
for the website:
def web_page():
    """Content for the web page."""
    content = f"""
    <!DOCTYPE html>
    <html lang='en'>
        <meta charset='utf-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <script type="text/javascript" src="smoothie.js"></script>
        <title>Daten Logger FP2017</title>
        <!-- CSS could also be loaded from local storage or be embedded. --->
        <link rel='stylesheet' href=''>
        <h1>Daten Logger FP2017</h1>
        <p>Übersicht für die Powersupply FP2017</p>
        <!-- All details are shown in a table --->
        <div id="details"></div>    
        <!-- If you include Javascript then keep an eye on the escaping, here it's a Python f-string. --->

        <form action="/logging_start" method="get">
        Start Data Logging:
        <button name="subject" type="submit" value="log_start">START</button>
        <form action="/logging_stop" method="get">
        Stop Data Logging:
        <button name="subject" type="submit" value="log_stop">STOP</button>
        <form action="/logging_file" method="get">
        Logged Data:
        <button name="subject_file" type="submit_file" value="csv_download">Download_CSV_File</button>
        <canvas id="mycanvas" width="400" height="100"></canvas>
        window.addEventListener('load', () => {{
            // The dict can not be used directly
            data = JSON.parse('{json.dumps(details)}');

            var table = document.createElement('table'), row, cell1, cell2, cell3, cell4;
            for (let key in data) {{
              row = table.insertRow();
              cell1 = row.insertCell();
              cell2 = row.insertCell();
              cell3 = row.insertCell();
              cell4 = row.insertCell();
              cell1.innerHTML = key;
              cell2.innerHTML = data[key];
            var smoothie = new SmoothieChart();
            // Data
            var line1 = new TimeSeries();
            var line2 = new TimeSeries();
            // Add a random value to each line every second
            setInterval(function() {{
              line1.append({time.time()}, {time.monotonic()});
              line2.append({time.time()}, {time.monotonic()});
            }}, 1000);
            // Add to SmoothieChart
    return content

   Somehow I am not getting any charts

Reply all
Reply to author
0 new messages