0

I have finally managed to create an array of a user's input which match conditions, now I want to make that array into an array that converts all of the user's input into a new array(which is to be grapher later) which consists of the frequency of occurence of all of the users input, it took alot of trouble just finding out how to get an array of the user's input!

Here is the current algorithm which I wanted to change:

function getGraph() {
var i = 0;
var results;
var dicePoss = [1,2,3,4,5,6]
var finished = false;
var newArr ="";

results = document.getElementById('texts').value;
// gets input e.g 623653246325435432156545352516
var resultsArr = results.split("");
//supposed to split input into an array e.g 6,2,3,6,5,3,2,4,6,3,2,5 note commas are invisible and just to show they are an array
document.getElementById('x-axis').innerHTML = dicePoss;
//irrelevant to current algorithm but to be used with x-axis on graph later

while (!finished && i <  resultsArr.length) { //while the function is not finished AND the iteration is done 30 times

    if (resultsArr[i] <= 6 && resultsArr[i] > 0) { //resultsArr[i] defines the character  e.g input 2 currently being iterated in the array                                             
        
        newArr +=  resultsArr[i] + ","; //adds an element to the new array which is checked to meet the IF statement
        i++; //iterates continuously
        document.getElementById('y-axis').innerHTML = newArr;        
    }
    
    else {
        finished = true;  
    }

    if (finished == true){
        resultsArr = [];
        dicePoss = [];
        document.getElementById('reject').innerHTML = "Please enter a valid input between 1-6!"; 
    }

}
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />
        <title>6 Sided Die Simulator</title>
        
        
        <script type="text/JavaScript">
        
        function drawOne(a, n) {
            // draws the rectangle for one of the values
            // a is a counter for the column
            // n is the value being graphed
            con.fillStyle = 'red';
            con.fillRect(500 + 60 * a, 400, 40, -n);
            // write the value below the column
            con.strokeText(n, 500 + 40 * a, 440);
        
        }
        </script>
        </head>

<h1>Six Sided Die Simulator</h1>
<canvas id="myCanvas" width="1200" height="500"style="border:1px solid #FF0000;">Canvas is not supported
</canvas>

<body>

<p id="y-axis">Frequency of die rolls(results)</p>
<p id="x-axis">Dice Possible Rolls between 1-6</p>
<p id="reject"></p>

<input type="text" value="Enter diceroll" id="texts" style="width: 150px;" />
<br />
<input type="button" value="Display Column Graph" onclick="getGraph();">


</body>
</html>
Troydon Luicien
  • 11
  • 1
  • 5

2 Answers2

0

I don't understand the question either but I guess this question can help you. counting-the-occurrences-frequency-of-array-elements

pride
  • 85
  • 1
  • 11
0

I have finally managed to solve the problem, wondering if anyone can help use the output to draw a column graph with canvas? this is what I can do so far

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="Six Revisions is a blog that shares useful information about web development and design, dedicated to people who build websites." />
        <title>6 Sided Die Simulator</title>
        
        
        <script type="text/JavaScript">
        
        function drawOne(a, n) {
            // draws the rectangle for one of the values
            // a is a counter for the column
            // n is the value being graphed
            con.fillStyle = 'blue';
            con.fillRect(500 + 60 * a, 400, 40, -n);
            // write the value below the column
            con.strokeText(n, 500 + 40 * a, 440);
        }
        </script>
        </head>

<h1>Six Sided Die Simulator</h1>
<canvas id="myCanvas" width="1200" height="500"style="border:1px solid #FF0000;">Canvas is not supported
</canvas>

<body>

<p id="y-axis">Frequency of die rolls(results)</p>
<p id="x-axis">Dice Possible Rolls between 1-6</p>

<input type="text" value="Enter diceroll" id="texts" style="width: 150px;" />
<br />
<input type="button" value="Display Column Graph" onclick="getGraph();">

<script>

function getGraph() {
var i = 0;
var results;
var dicePoss = [0,1,2,3,4,5,6]
var finished = false;



results = document.getElementById('texts').value;
// gets input e.g 623653246325435432156545352516
var resultsArr = results.split("");
resultsArr.sort();
//supposed to split input into an array e.g 6,2,3,6,5,3,2,4,6,3,2,5 note commas are invisible and just to show they are an array
document.getElementById('x-axis').innerHTML = dicePoss;
//irrelevant to current algorithm but to be used with x-axis on graph later
freq =[0,0,0,0,0,0,0];
var canvas = document.getElementById("myCanvas");

while (!finished && i <  resultsArr.length) { //while the function is not finished AND the iteration is done 30 times

    if (resultsArr[i] > 0 && resultsArr[i] < 7 )  {//resultsArr[i] defines the character  e.g input 2 currently being iterated in the array                                             
        freq[resultsArr[i]]++; //adds an element to the new array which is checked to meet the IF statement
        i++; //iterates continuously
    
  //commence drawing graph on IF in the while loop
  var con = c.getContext("2d");
        con.strokeStyle = 'black';
  drawOne(dicePoss[i], freq[i])
  con.stroke();
  
        document.getElementById('y-axis').innerHTML = freq;  //prints on ID the value of function results
        
    }
    else {
        finished = true;  
    }
    if (finished == true){
  //reject message to display in the middle of the graph
        var ctx = canvas.getContext("2d");
        ctx.font = "30px Comic Sans MS";
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.fillText("Please enter a valid input between 1 - 6!", canvas.width/2, canvas.height/2);; 
    }
}
}
//Begin Drawing Graph
var c = document.getElementById("myCanvas");

var con = c.getContext("2d");
con.strokeStyle = 'black';
// move to the bottom left
for(var d=0; d < freq.length; d++)
{
drawOne( dicePoss[d], freq[d])
}
con.stroke();


</script>



</body>
</html>
Troydon Luicien
  • 11
  • 1
  • 5