title: Data Visualization with jVectorMap/JQVMap
body: <p>I'am trying to make a Jquery Vector Map (for this i tryied out jVectorMap and now i'am "playing" around with JQVMap but i simply can't make any data visualization.
  I simply want to include my "accountbalanceData" and visualize the data like -20(%) = "red", -10(%) = "lightred", 0(%) = "blue" etc.
  But what i get is an "empty map" (hover and onclick work).</p>
  
  <p><strong>Head</strong></p>
  
  <pre><code>&lt;!-- jQuery --&gt;
      &lt;script type="text/javascript" src="/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
  
  &lt;!-- JQVMap --&gt;
      &lt;script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.min.js"&gt;&lt;/script&gt;
      &lt;!--&lt;script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.js"&gt;&lt;/script&gt;--&gt;
      &lt;script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.world.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.sampledata.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="/newsite/js/jvectormap/gdp-data.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div id="vmap" style="width: 600px; height: 400px;"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Data</strong></p>
  
  <p>I took this data from <a href="http://www.imf.org" rel="nofollow">http://www.imf.org</a> where i queried for "current account balance" in "percent of GDP" an for all 184 Countries. But it wont work with accountbalanceData (i guess because of the minus).</p>
  
  <pre><code>      var accountbalanceData = {
        "AF": -1.086,
        "AL": -13.237,
        "DZ": 9.984,
        "AO": 9.717,
        "AG": -13.686,
        "AR": -0.701,
        "AM": -11.043,
        "AU": -4.614,
        "AT": 1.374,
        "AZ": 21.789,
          ...};
  
        var gdpData = {
         "OM": 53.78,
         "PK": 174.79,
         "PA": 27.2,
         "PG": 8.81,
         "PY": 17.17,
         "PE": 153.55,
         "PH": 189.06,
         "PL": 438.88,
         "PT": 223.7,
          ...};
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    .jqvmap-label
      {
          position: absolute;
          display: none;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          background: #292929;
          color: white;
          font-family: sans-serif, Verdana;
          font-size: smaller;
          padding: 3px;
      }
  
      .jqvmap-zoomin, .jqvmap-zoomout
      {
          position: absolute;
          left: 10px;
          -webkit-border-radius: 3px;
          -moz-border-radius: 3px;
          border-radius: 3px;
          background: #000000;
          padding: 3px;
          color: white;
          width: 10px;
          height: 10px;
          cursor: pointer;
          line-height: 10px;
          text-align: center;
      }
  
      .jqvmap-zoomin
      {
          top: 10px;
      }
  
      .jqvmap-zoomout
      {
          top: 30px;
      }
  
      .jqvmap-region
      {
        cursor: pointer;
      }
  
      .jqvmap-ajax_response
      {
        width: 100%;
        height: 500px;
      }
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>    &lt;script&gt;
      $(function(){
          var max = 0,
              min = Number.MAX_VALUE,
              cc,
              startColor = [200, 238, 255],
              endColor = [0, 100, 145],
              mycolors = {},
              hex;
  
              //find maximum and minimum values
              for (cc in sample_data)
              {
                  if (parseFloat(sample_data[cc]) &gt; max)
                  {
                      max = parseFloat(sample_data[cc]);
                  }
                  if (parseFloat(sample_data[cc]) &lt; min)
                  {
                      min = parseFloat(sample_data[cc]);
                  }
              };
  
              //set colors according to values of GDP
              for (cc in sample_data)
              {
                  if (sample_data[cc] &gt; 0)
                  {
                      mycolors[cc] = '#';
                      for (var i = 0; i&lt;3; i++)
                      {
                          hex = Math.round(startColor[i]
                              + (endColor[i]
                              - startColor[i])
                              * (gdpData[cc] / (max - min))).toString(16);
  
                          if (hex.length == 1)
                          {
                              hex = '0'+hex;
                          }
  
                          mycolors[cc] += (hex.length == 1 ? '0' : '') + hex;
                      }
                  }
              };
  </code></pre>
  
  <blockquote>
    <p>//Map initializing</p>
  </blockquote>
  
  <pre><code>            jQuery('#vmap').vectorMap({
                  map: 'world_en',
                  //backgroundColor: '#a5bfdd', //Color of the background ("Ocean's")
                  borderColor: '#818181', //Color of the country borders
                  borderOpacity: 0.15, //Border thickness
                  borderWidth: 1,
                  //color: 'white', //Country color
                  series: {
                      regions: [{
                          values: sample_data,
                          scale: ['#C8EEFF', '#0071A4'],
                          normalizeFunction: 'polynomial',
                      }]
                  },
                  colors: mycolors,
                  hoverOpacity: 0.7,
                  hoverColor: false,
                  //scaleColors: ['#b6d6ff', '#005ace'],
                  onRegionClick: function(element, code, region)
                  {
                  var message = 'You clicked "'
                      + region
                      + '" which has the code: '
                      + code.toUpperCase();
  
                  alert(message);
                  }
              });
      });
      &lt;/script&gt;
  </code></pre>