CCS tags inside a Google map chart

Resolved

(@s1s2)

I have the following Google map chart script inside a WordPress page.:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        'mapsApiKey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Companies'],

          ['Sweden', 1],
          ['China', 2],
          ['Switzerland', 2],
          ['Finland', 2],
          ['Germany', 3],
          ['Canada', 4],
          ['France', 2],
          ['Portugal', 1],
          ['Ukraine', 1],
          ['United Kingdom', 3],
          ['United States', 41]

        ]);

        var options = {
colorAxis: {colors:['#d9534f','#d9534f']},
legend: 'none',
};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  
<div id="regions_div" class="worldmap"></div>

I need to generate the list of countries and the numbers associated with them in a programmatic way. To do so, the following CCS produces exactly the right syntax as required by the script:

[loop type=country]
 [set countryslug][field slug][/set]
 [pass vars]
  [if var=total_{COUNTRYSLUG} empty]
  ['[field title]', [get total_{COUNTRYSLUG}]],<br />
  [/if]
[/pass]
[/loop]

The problem is that if I place these CCS tags inside the script, no output gets generated. I assume the loop is not executed.

Any idea if it’s possible to do what I want to do and how?

Thank you

Viewing 4 replies - 1 through 4 (of 4 total)

polarracing

(@polarracing)

4 years, 11 months ago

Two things you can try:
1. Try to pass the procedure into your code
2. Pass your code into a javascript var you create before you run the maps code. Then call this var in your maps code as normal javascript var.

I use the second one with other scripts f.e. to set languages for labels.

This reply was modified 4 years, 11 months ago by polarracing.

Thread Starter

s1s2

(@s1s2)

4 years, 11 months ago

Your #1 solution worked!

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

    <script type="text/javascript">
      google.charts.load('current', {
        'packages':['geochart'],
        'mapsApiKey': 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
      });
      google.charts.setOnLoadCallback(drawRegionsMap);

      function drawRegionsMap() {
        var data = google.visualization.arrayToDataTable([
          ['Country', 'Industry Players'],

          [pass]
          [loop type=country]
           [set countryslug][field slug][/set]
           [-pass vars]
           [if var=total_{-COUNTRYSLUG} empty]
             ['[field title]', [get total_{-COUNTRYSLUG}]],
           [/if]
           [/-pass]
          [/loop]
          [/pass]

        ]);

        var options = {
colorAxis: {colors:['#d9534f','#d9534f']},
legend: 'none',
};

        var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));

        chart.draw(data, options);
      }
    </script>
  
<div id="regions_div" class="worldmap"></div>

For particular reasons too long to explain, I would have preferred to save the output of the loop inside a variable and only recall that variable. But if I try to do the following, it doesn’t work:

[set maplist]
 [loop type=country]
  ...
 [/loop]
[/set]

If the output of a loop cannot be put inside a variable, then at least I’d love to append the output of the ['[field title]', [get total_{-COUNTRYSLUG}]],. But I don’t think that there’s any way to append strings with CCS.

polarracing

(@polarracing)

4 years, 11 months ago

Try:

 [loop type=country]
  [if var=myloop]
[set my_loop][get my_loop], ['[field title]', [get total_{-COUNTRYSLUG}]] [/set
[else]
[set my_loop] ['[field title]', [get total_{-COUNTRYSLUG}]] [/set
 [/loop]

This reply was modified 4 years, 11 months ago by polarracing.

Thread Starter

s1s2

(@s1s2)

4 years, 11 months ago

It works perfectly. Thank you!

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘CCS tags inside a Google map chart’ is closed to new replies.