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)",
          
         },
         axisY:{
          title: "Plasma Concentration",
          
         },
        data: [{
            showInLegend: false,
            type: "line",
            dataPoints: [
                { x: 0, y: 1000*(0.5/(50*0.6))* (Math.exp(-((6)/(50*0.6)*0))) },
                { x: 0.25, y: 1000*(0.5/(50*0.6))* (Math.exp(-((6)/(50*0.6)*0.25))) },
                { x: 0.5, y: 1000*(0.5/(50*0.6))* (Math.exp(-((6)/(50*0.6)*0.5))) },
                { x: 0.75, y: 1000*(0.5/(50*0.6))* (Math.exp(-((6)/(50*0.6)*0.75))) },
                { x: 1, y: 1000*(0.5/(50*0.6))* (Math.exp(-((6)/(50*0.6)*1))) },
                
                
                
            ]
       

        }]
    });


    chart1.render();