Pass javascript array in .js file to Plotly.plot in .html file

plotly.js
1

essentially, I have this boilerplate code in my html file, which works fine.

        <div id="finvel" style="width:600px;height:250px;">


            <script>
                FINVEL = document.getElementById('finvel');
                Plotly.plot( FINVEL, [{
                    x: [0,1,2,3,4,5,6],
                    y: [2,4,3,2,11,12,14]}], {
                    margin: { t: 0 } } );
            </script>

however, I want to pass values into x: and y: from my function in my .js file shown below.

function calculateFinalVelocity()
{
    var initialvelocity = document.getElementById("initialvelocity_final1").value;
    var acceleration = document.getElementById("acceleration_final1").value;
    var time = document.getElementById("time_final1").value;

    var finalvelocity = Number(initialvelocity) + (Number(acceleration) * Number(Math.abs(time)));

    document.getElementById("answer_final1").innerHTML = 'The Final Velocity is found to be: ' + finalvelocity + ' m/s';



    var i = 0;
    var num_velocity_array = [];

    var time_array = [];


    let number = i + 0.25;
    for (var i = initial_time; i <= time; number)
    {
        num_velocity = Number(initialvelocity) + (Number(acceleration) * Number(initial_time));
        time_array.push(initial_time);
        num_velocity_array.push(num_velocity);

    }

}

for x: I would like to pass the time_array variable, and for y: I would like to pass the num_velocity_array variable so I assumed the following would work:

<script>
                    FINVEL = document.getElementById('finvel');
                    Plotly.plot( FINVEL, [{
                        x: time_array,
                        y: num_velocity_array}], {
                        margin: { t: 0 } } );
                </script>

but this does not work…

I’ve been working on this for days… any help would be appreciated!

Evan

2

I ended up getting it to work like this.

Here is the JavaScript code that lives in the .js file that is called to the .html file in ‘head’

    function calculateFinalVelocity()
    {

    // These 3 lines pull the data from the html file and assigns it to the variables
    var initialvelocity = document.getElementById("initialvelocity_final1").value;
    var acceleration = document.getElementById("acceleration_final1").value;
    var time = document.getElementById("time_final1").value;


    // This line performs the basic algebraic calculation, for the basic physics equation
    var finalvelocity = Number(initialvelocity) + (Number(acceleration) * Number(Math.abs(time)));


    // These are two arrays initialized
    var velocity_array = [];

    var time_array = [];

    for (var i = 0; i<=time; i = i + 0.25)
    {

    let num_velocity = Number(initialvelocity) + (Number(acceleration) * Number(i));
    time_array.push(i);
    velocity_array.push(num_velocity);


    }

    var trace1 =
    {
        x: time_array,
        y: velocity_array,
        type: 'scatter'

    };
    var layout = {
    title: {
        text:'Velocity vs Time',
        font: {
            family: 'Gravitas One, monospace',
            size: 18,
            color: '#ea6f09'
        },
        xref: 'paper',
        x: 0.05,
    },
    xaxis: {
        title: {
            text: 'time (s)',
            font: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#ea6f09'
            }
        },
    },
    yaxis: {
        title: {
            text: 'velocity (m/s) ',
            font: {
                family: 'Courier New, monospace',
                size: 18,
                color: '#ea6f09'
            }
        }
    },
     plot_bgcolor: '#d0d3d8',
    // paper_bgcolor: '#d4e3fc'
    };



    var data = [trace1];

    document.getElementById("finalVelocityOne").innerHTML = Plotly.newPlot("finalVelocityOne", data, layout);
    Plotly.newPlot("finalVelocityOne", data, layout);

    // alerts used to test if arrays were being updated
    // alert(time_array)
    // alert(velocity_array)

    document.getElementById("answer_final1").innerHTML = 'The Final Velocity is found to be: ' + finalvelocity + ' m/s';
    }

I also added some additional layout constraints(in the .js file code above) for visual purposes. To be clear the ‘var layout={…}’ section was not required to make the loop and array pass work but this entire code is what I am using and it works in this form.

Here is the .html file code

<div id="finalVelocityOne" style="width:500px;height:500px;"></div>