Added a line chart displaying the average cost and best cost.

geneticAlgorithm/geneticAlgo.html

@@ -114,11 +114,13 @@
         const naturalSelection = function(population, keepNumber, fitnessFunction)
         {
             let fitnessArray = [];
+            let total = 0;
             for(let i = 0; i < population.length; i++)
             {
                 const fitness = fitnessFunction(population[i]);
                 console.log(fitness);
                 fitnessArray.push({fit:fitness, chrom: population[i]});
+                total+= fitness;
             }
 
             fitnessArray.sort(predicateBy("fit"));
@@ -130,7 +132,7 @@
             {
                 survivors.push(fitnessArray[i].chrom);
             }
-            return {survivors: survivors, bestFit: bestFitness, bestChrom: bestChromosome};
+            return {average: total/population.length, survivors: survivors, bestFit: bestFitness, bestChrom: bestChromosome};
         };
 
         const blendGene = function(gene1, gene2, blendCoef)
@@ -254,12 +256,10 @@
                         bestCostG = Number.MAX_VALUE, bestChromosomeG = genericChromosomeG;
         const runGeneticOptimizationforGraph = function()
         {
-
-
-
-
             let generationResult = naturalSelection(populationG, keepNumberG, costFunctionG);
 
+            stats.push([generationG, generationResult.bestFit, generationResult.average]);
+
             if(bestCostG > generationResult.bestFit)
             {
                 bestChromosomeG = generationResult.bestChrom;
@@ -269,7 +269,6 @@
 
             generationG++;
 
-
             console.log("Generation " + generationG + " Best Cost: " + bestCostG);
 
             console.log(generationResult);
@@ -279,12 +278,13 @@
             mutatePopulation(populationG, mutationRateG);
 
             createGraph();
-
         };
 
+
+        let stats = [];
         const createGraph = function()
         {
-                        var dataPoints = [];
+            var dataPoints = [];
 
             console.log(dataPoints);
 
@@ -307,6 +307,29 @@
             var chart = new google.visualization.ScatterChart(document.getElementById('chart_div'));
 
             chart.draw(data, options);
+
+            //line chart stuff
+              var line_data = new google.visualization.DataTable();
+            line_data.addColumn('number', 'Generation');
+              line_data.addColumn('number', 'Best');
+              line_data.addColumn('number', 'Average');
+
+                  line_data.addRows(stats);
+
+              console.log(stats);
+
+              var lineChartOptions = {
+                hAxis: {
+                  title: 'Generation'
+                },
+                vAxis: {
+                  title: 'Cost'
+                },
+                colors: ['#AB0D06', '#007329']
+              };
+
+              var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
+              chart.draw(line_data, lineChartOptions);
         };
 
 
@@ -328,31 +351,63 @@
         generationG = 0;
 
 
-        function resetPopulation()
+        function verifyForm()
         {
+            if(Number($("#populationSize").val()) <= 1)
+            {
+                alert("Population size must be greater than one.");
+                return false;
+            }
+
+            if(Number($("#mutationRate").val()) > 1 ||
+                Number($("#mutationRate").val()) < 0)
+            {
+                alert("Mutation rate must be between zero and one.");
+                return false;
+            }
 
-            autoRunning = false;
-            $("#runAutoOptimizer").val("Auto Run");
+            if(Number($("#survivalSize").val()) < 0)
+            {
+                alert("Survival size can't be less than one.");
+                return false;
+            }
+
+            if(Number($("#newBlood").val()) < 0)
+            {
+                alert("New organisms can't be a negative number.");
+                return false;
+            }
+            return true;
+        }
 
-            populationSizeG = $("#populationSize").val();
-            mutationRateG = $("#mutationRate").val();
-            keepNumberG = $("#survivalSize").val();
-            newBloodNumberG = $("#newBlood").val();
-            generationG = 0;
+        function resetPopulation()
+        {
+            if(verifyForm())
+            {
+                stats = [];
+                autoRunning = false;
+                $("#runAutoOptimizer").val("Auto Run");
 
-            populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
-            createGraph();
+                populationSizeG = $("#populationSize").val();
+                mutationRateG = $("#mutationRate").val();
+                keepNumberG = $("#survivalSize").val();
+                newBloodNumberG = $("#newBlood").val();
+                generationG = 0;
+
+                populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
+                createGraph();
+            }
         }
 
         populationG = createRandomPopulation(genericChromosomeG, populationSizeG);
 
 
-        window.onload = function () {
+        window.onload = function (){
+            google.charts.load('current', {packages: ['corechart', 'line']});
             google.charts.load('current', {'packages':['corechart']}).then(function()
             {
                 createGraph();
             })
-
         };
 
 
@@ -382,8 +437,6 @@
             runAutoOptimizer();
         }
 
-
-
         //runGeneticOptimization(exampleOrganism, basicCostFunction, 100, 50, 0.01, 0.3, 20, 10);
 
     </script>
@@ -394,6 +447,8 @@
 <body>
     <div id="chart_div" style="width: 900px; height: 500px;"></div>
 
+    <div id="line_chart"></div>
+
     <input class='btn btn-primary' id="runOptimizer" onclick='runGeneticOptimizationforGraph()' type="button" value="Next Generation">
     <input class='btn btn-primary' id="runAutoOptimizer" onclick='startStopAutoRun()' type="button" value="Auto Run">
 
@@ -401,32 +456,31 @@
         <div class="card-header">
             <h2>Population Variables</h2>
         </div>
-        <div class="card-body">
+        <form class="card-body">
             <div class="row p-2">
                 <div class="col">
                     <label for="populationSize">Population Size</label>
-                    <input type="text" class="form-control" id="populationSize" placeholder="Population Size" required>
+                    <input type="text" class="form-control" value="100" id="populationSize" placeholder="Population Size" required>
                 </div>
                 <div class="col">
                     <label for="populationSize">Survival Size</label>
-                    <input type="text" class="form-control" id="survivalSize" placeholder="Survival Size" required>
+                    <input type="text" class="form-control" value="20" id="survivalSize" placeholder="Survival Size" required>
                 </div>
             </div>
             <div class="row p-2">
                 <div class="col">
                     <label for="populationSize">Mutation Rate</label>
-                    <input type="text" class="form-control" id="mutationRate" placeholder="Mutation Rate" required>
+                    <input type="text" class="form-control" value="0.03" id="mutationRate" placeholder="Mutation Rate" required>
                 </div>
                 <div class="col">
                     <label for="populationSize">New Organisms Per Generation</label>
-                    <input type="text" class="form-control" id="newBlood" placeholder="New Organisms" required>
+                    <input type="text" class="form-control" value="5" id="newBlood" placeholder="New Organisms" required>
                 </div>
             </div>
             <br>
             <input class='btn btn-primary' id="reset" onclick='resetPopulation()' type="button" value="Reset Population">
-        </div>
+        </form>
     </div>
-
 </body>