title: Magic Square for Even Metric
body: <p>Anyone can help me to create a logic for even magic square metric. In given example, I have created a code for generate Magic Square for odd numbers like 3x3, 5x5, 7x7 metric but unable to found a proper solution for create even value magic square metric like 2x2, 4x4, 6x6, 8x8, 10x10 etc.</p>
  
  <p>In current implementation anyone can enter a number (n) in input and click on Generate button, it will create a nxn magic square metric. But not working fine with even numbers.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      var n;
      var main = $('#main');
  
      $("#generate").click(function(){
        $("#main").text("");
        var val = $("#number").val();
        if(val){
          n = val;
          generateMetric(val); // Generate n x n metric
        }
      });
  
      function generateMetric(n){
        var magicSquare = [];
  
        // Set all metric values to 0
        for (var i = 0; i &lt; n; i++) {
          magicSquare[i] = [];
  
          for (var j = 0; j &lt; n; j++) {
            magicSquare[i].push(0);
            main.append('&lt;input type="text" class="values" id="'+ i +'-'+ j +'" readonly /&gt;');
          }
          main.append('&lt;div class="clear"&gt;&lt;/div&gt;');
        }
  
  
        // Initialize position for 1 
  
        var i = parseInt(n/2);
        var j = n - 1;
  
        // Put all values in metric
        for(var k = 1; k &lt;= n*n;){
          if(i == -1 &amp;&amp; j == n){
            j = n - 2;
            i = 0;
          }else{
            // if value of j is going to higher than n
            if(j == n){
              j = 0;
            }
  
            // if value of i is going in minus
            if(i &lt; 0){
              i = n - 1;
            }
          }
  
          if(magicSquare[i][j]){
            j -= 2; 
            i++;
            continue; 
          } else{  
            // set the value in metric
            magicSquare[i][j] = k++;
          }
  
          j++; i--; 
        }
  
        // Append values to all metric inputs
        for (var i = 0; i &lt; n; i++){ 
          for (var j = 0; j &lt; n; j++) {
            $("#"+i +"-"+ j).val(magicSquare[i][j]);
          }
        }
      }
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> body {
      margin: 30px;
    }
    .values {
      width: 30px;
      float: left;
      margin-right:1px;
    }
    .clear {
      clear: both;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="http://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
  &lt;input type="text" id="number" /&gt;
  &lt;input type="button" id="generate" value="Generate" /&gt;
  &lt;div id="main"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>