JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<span>Number of coin tosses</span>

<input id="numTrials" type="text" placeholder="Enter a number"> <span>Heads Probability</span>

<input id="headsProb" type="text" placeholder="Percent">
<div>
    <button id="run" type="button">Run</button>
</div>
<div class="span9">
     <h2>Results</h2>

    <div class="container-fluid">
        <div id="colChartContainer" style="height: 300px; width: 100%;"></div>
    </div>
</div>

JavaScript

function makeChart() {
    var p = document.getElementById("headsProb").value;
    var numTrials = document.getElementById("numTrials").value;
    //alert(p);
    //var dieResults = coinToss(p, numTrials);
    var dieResults = [numTrials * p / 100, numTrials * (1 - p / 100)]
    var heads = dieResults[0];
    var tails = dieResults[1];

    var chart = new CanvasJS.Chart("colChartContainer", {
        theme: "theme2",
        title: {
            text: "Coin Toss Results"
        },
        data: [{
            type: "column",
            dataPoints: [{
                label: "Heads",
                y: heads
            }, {
                label: "Tails",
                y: tails
            }]
        }]
    });

    chart.render();
}


var runButton = document.getElementById("run");
runButton.addEventListener("click", makeChart);