Как я могу создать диаграмму / график в JavaScript только с одним рассчитанным числом?

Question

Мне было интересно, как я могу включить график или диаграмму в JavaScript для построения ОДНОГО числа.Это что-то вроде развлекательной части, которую я делаю.В конце концов я хочу, чтобы это был «стресс-тест» с числом, которое рассчитывается по моему уравнению.Есть идеи, как это сделать?

Вот мой jsfiddle:

https://jsfiddle.net/avanhout13/em5vq8Ld/

HTML:

    Calculate Stress

<FORM name="stress">
<A NAME="stress"></A>

Calculate Stress<br>

Enter Value<br>

Force: <INPUT TYPE="text" SIZE="7"  maxlength="15" NAME="force">

            <SELECT NAME="forceunits">
    <OPTION VALUE="1" selected>Newtons</OPTION>
    <OPTION VALUE="0.00001">Dyne</OPTION>
    <OPTION VALUE="0.00980665 ">Gram Force</OPTION>
    <OPTION VALUE="1">Kgs-Meter/sec^2</OPTION>
    <OPTION VALUE="9.80665 ">Kilograms Force</OPTION>
    <OPTION VALUE="4448.22161526">Kip</OPTION>   
    <OPTION VALUE=" 4.44822162 ">Pound Force</OPTION>    
    <OPTION VALUE=" 0.138254954376 ">Poundal</OPTION>    
    </SELECT>
<br>

Area:     <INPUT TYPE="text" SIZE="7"  maxlength="15" NAME="area">

            <SELECT NAME="areaunits">
    <OPTION VALUE="1" selected>Metre^2</OPTION>
    <OPTION VALUE="100">Are</OPTION>
    <OPTION VALUE="1e-28">Barn</OPTION>
    <OPTION VALUE="0.0001">Centimetre^2</OPTION>
    <OPTION VALUE="0.09290304">Foot^2</OPTION>
    <OPTION VALUE="10000">Hectare</OPTION>
    <OPTION VALUE="0.00064516">Inch^2</OPTION>
    <OPTION VALUE="2589988.11034">Mile^2</OPTION>
    <OPTION VALUE="1000000">Kilometre^2</OPTION>    
    <OPTION VALUE=" 0.83612736">Yard^2</OPTION>

    </SELECT>
    <br>


<INPUT TYPE="button" VALUE=" Calculate " 
       onClick="calcstress(this.form)" >
<input type="reset" value="Clear" style="margin-left:.5cm">

    <br><br>


Result:<br><br>

Stress:
<INPUT TYPE="text" SIZE="12" maxlength="15" VALUE="" NAME="result"> Newton / Meter<sup>2</sup>

    JAVASCRIPT:

    function calcstress(){
            var form = document.stress;
            var i = form.forceunits.selectedIndex;
            var forceunitsvalue = form.forceunits.options[i].value; 
            var j = form.areaunits.selectedIndex;
            var areaunitsvalue = form.areaunits.options[j].value;


            var f = form.force.value;

            var a = form.area.value;



            var result = (f * forceunitsvalue) / (a * areaunitsvalue);


            form.result.value = roundoff(result,7);

         return true;
        }



        function roundoff(x,y){             
          x = parseFloat(x);
          y = parseFloat(y);
          x = Math.round(x * Math.pow(10,y))/Math.pow(10,y);
          return x;
        }



        function calcforce(){
            var form = document.force;
            var i = form.stressunits.selectedIndex;
            var stressunitsvalue = form.stressunits.options[i].value; 
            var j = form.areaunits.selectedIndex;
            var areaunitsvalue = form.areaunits.options[j].value;


            var s = form.stress.value;

            var a = form.area.value;



            var result = (s * stressunitsvalue) * (a * areaunitsvalue);


            form.result.value =result;

         return true;
        }



        function roundoff(x,y){             
          x = parseFloat(x);
          y = parseFloat(y);
          x = Math.round(x * Math.pow(10,y))/Math.pow(10,y);
          return x;
        }




        function calcarea(){
            var form = document.area;
            var i = form.forceunits.selectedIndex;
            var forceunitsvalue = form.forceunits.options[i].value; 
            var j = form.stressunits.selectedIndex;
            var stressunitsvalue = form.stressunits.options[j].value;


            var f = form.force.value;

            var s = form.stress.value;



             var result = (f * forceunitsvalue) / (s * stressunitsvalue);


            form.result.value = result;

         return true;
        }



        function roundoff(x,y){             
          x = parseFloat(x);
          y = parseFloat(y);
          x = Math.round(x * Math.pow(10,y))/Math.pow(10,y);
          return x;
        }

Answer 1

Вы можете легко создавать диаграммы, используя диаграммы Google: просто добавьте следующий CDN в ваш HTML-файл:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Затем сделайте ваши данные соответствующими данным диаграмм.как:

 var data = google.visualization.arrayToDataTable([
        ['City', '2010 Population', '2000 Population'],
        ['New York City, NY', 8175000, 8008000],
        ['Los Angeles, CA', 3792000, 3694000],
        ['Chicago, IL', 2695000, 2896000],
        ['Houston, TX', 2099000, 1953000],
        ['Philadelphia, PA', 1526000, 1517000]

Вот это Jsfiddle