Basic HTML5 Chart Example - CanvasJS

Basic HTML5 Chart Example

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
    
    <form name="getUserInput">
Input value: <input type="text" name="theValue">
</form>

<button type="button" onClick="funct()">test</button>
<p id="demo"></p>
<p id="demo2"></p>

JavaScript

<script type="text/javascript" src="canvasjs.min.js"></script>
     
    <script type="text/javascript">
        function funct(){

          var userInput=document.getUserInput.theValue.value; 

          var output="";
           var count=0;
           while (count <= 10){
               var cal=1000*(0.5/(userInput*0.6))* (Math.exp(-((0.693*50)/(userInput*0.6)*count)));
               output += "<br>"+count+" = "+cal;
               count=count+0.25;
          }


          document.getElementById("demo").innerHTML=output;
          document.getElementById("demo2").innerHTML=userInput;
        }
    window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer");

    chart.options.axisX = { text:"Concentration (ug/ml)" };
    chart.options.axisY = { text:"Plasma Concentration" };
    chart.options.title = { text: "Single Intravenous 500mg Dose" };

    var series1 = { //dataSeries - first quarter
        type: "line",
        name: "First Quarter",
        showInLegend: true
    };

    

    chart.options.data = [];
    chart.options.data.push(series1);
    
series1.dataPoints = [
            { label: "banana", y: 18 },
            { label: "orange", y: 29 },
            { label: "apple", y: 40 },
            { label: "mango", y: 34 },
            { label: "grape", y: 24 }
    ];

    

    chart.render();
};


</script>