title: How to use JQV map in Django?
body: <p>I want to create a JQV country map for my dashboard. I have a Customer model and this model has a country field. This field is connected with a foreign key and I can get country codes and JQV map is accepting country codes.</p>
  <p>I created an array in my views and when I print it works. But when I put in the data field of the map chart, does not show anything.</p>
  <p>How can I fix it?</p>
  <p><strong>models.py</strong></p>
  <pre><code>class Customer(models.Model):
  ...
      country = models.ForeignKey(Country, on_delete=models.CASCADE, null=True, unique=False)
  
  
  class Country(models.Model):
  ...
      country_code = models.CharField(max_length=5)
  </code></pre>
  <p><strong>views.py</strong></p>
  <pre><code>def approval_context_processor(request):
  
     ...
          countries_iso = Customer.objects.values_list('country__country_code', flat=True).distinct()
  ...
          for cn in countries_iso:
              arr.append(cn)
          print(arr) // it works truely.
  
      else:
          pend_list = 0
          submit_list = 0
  
      context = {
          ...
          'arr': arr
      }
  
      return context
  </code></pre>
  <p><strong>dashboard.html</strong></p>
  <pre><code>...
  &lt;div class=&quot;mapcontainer&quot;&gt;
     &lt;div id=&quot;map-example&quot; class=&quot;vmap&quot; style=&quot;height: 400px&quot;&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      var country_list = []
  
      {% for country in arr %}
          country_list.push( '{{ country }}' )
      {% endfor %}
  
      window.alert(country_list) //It works truely
  
          $('#map-example').vectorMap(
          {
              map: 'world_en',
              backgroundColor: 'transparent',
              borderColor: '#fff',
              borderWidth: 2,
              color: '#e4e4e4',
              enableZoom: true,
              hoverColor: '#35cd3a',
              hoverOpacity: null,
              normalizeFunction: 'linear',
              scaleColors: ['#b6d6ff', '#005ace'],
              selectedColor: '#35cd3a',
              selectedRegions: country_list,
              showTooltip: true,
              onRegionClick: function(element, code, region)
              {
                  return false;
              },
              onResize: function (element, width, height) {
                  console.log('Map Size: ' +  width + 'x' +  height);
              },
          });
      &lt;/script&gt;
  </code></pre>
  <p>This is how it looks:
  <a href="https://i.stack.imgur.com/1FJKQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1FJKQ.png" alt="map" /></a></p>