Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer1" style="height: 500px; width: 50%;"></div>

        <form>
            <p>BW(Kg): <input type="number" id="bw"></p>
            <p>Vd/BW (L/Kg) :<input type="number" id="vd_bw" value="0.6"></p>
            <p>Clearance(L/Hr) : <input type="number" id="clearance" value ="50"></p>
            <p>Dose(g) : <input type="number" id="dose" value="0.5"></p>
            
        </form>

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1", {
        title: {
          text: "Single Intravenous 500mg Dose"
        },
        zoomEnabled: true,
      panEnabled: true,
        
                axisX:{
          title: "Concentration (ug/ml)",
          titleFontSize: "30"
         },
         axisY:{
          title: "Plasma Concentration",
          titleFontSize: "30"
         },
        data: [{
            showInLegend: false,
            type: "line",
            dataPoints: [{
                x: 0,
                y: 5.555555556

            }, {
                x: 0.25,
                y: 5.045760714

            }, {
                x: 0.5,
                y: 4.582746212

            }, {
                x: 0.75,
                y: 4.162219344
            }, {
                x: 1,
                y: 3.780281312

            }, {
                x: 1.25,
                y: 3.433391088

            }, {
                x: 1.5,
                y: 3.118332576

            }, {
                x: 1.75,
                y: 2.8321848

            }, {
                x: 2,
                y: 2.572294824

            }, {
                x: 2.25,
                y: 2.33625315

            }, {
                x: 2.5,
                y: 2.121871385

            }, {
                x: 2.75,
                y: 1.927161949

            }, {
                x: 3,
                y: 1.750319649

            }, {
                x: 3.25,
                y: 1.589704942

            }, {
                x: 3.5,
                y: 1.443828734

            }, {
                x: 3.75,
                y: 1.311338574

            }, {
                x: 4,
                y: 1.191006119

            }, {
                x: 4.25,
                y: 1.081715739

            }, {
                x: 4.5,
                y: 0.982454181

            }, {
                x: 4.75,
                y: 0.892301167

            }, {
                x: 5,
                y:...