mathjs/examples/browser/plot.html at develop · Eternal-Rise/mathjs · GitHub

History

78 lines (66 loc) · 1.53 KB

Raw

<!DOCTYPE html>

<head>

<style>

input[type=text] {

width: 300px;

}

input {

padding: 6px;

}

body, html, input {

font-family: sans-serif;

font-size: 11pt;

}

form {

margin: 20px 0;

}

</style>

</head>

<body>

<label for="eq">Enter an equation:</label>

</form>

<p>

Used plot library: <a href="https://plot.ly/javascript/">Plotly</a>

</p>

function draw() {

try {

// compile the expression once

const expression = document.getElementById('eq').value

const expr = math.compile(expression)

// evaluate the expression repeatedly for different values of x

const xValues = math.range(-10, 10, 0.5).toArray()

const yValues = xValues.map(function (x) {

return expr.evaluate({x: x})

})

// render the plot using plotly

const trace1 = {

x: xValues,

y: yValues,

type: 'scatter'

}

const data = [trace1]

Plotly.newPlot('plot', data)

}

catch (err) {

console.error(err)

alert(err)

}

document.getElementById('form').onsubmit = function (event) {

event.preventDefault()

draw()

}

draw()

</script>

</body>

</html>

mathjs/examples/browser/plot.html at develop · Eternal-Rise/mathjs · GitHub

Expand file tree

Breadcrumbs

plot.html

Latest commit

History

Breadcrumbs

plot.html

File metadata and controls