Geo Graph

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

		    <div class="skt-geochart-wrap" style="position:relative;width:100%;max-width:1000px;margin:0 auto;">
		    	<div style="color:#333333">Country Popularity</div>
		        <div id="geochart_1" style="width:100%;"></div>
		    </div>

		    <script>
		    (function(){
		        window.sktGeoCharts = window.sktGeoCharts || [];
		        google.charts.load("current", {
		            packages:["geochart"]
		        });

		        google.charts.setOnLoadCallback(function(){
		            var el = document.getElementById("geochart_1");

		            if(!el){
		                return;
		            }
		            var data = google.visualization.arrayToDataTable(
		                [["Country","Popularity"],["Germany",200],["United States",300],["Brazil",400],["Canada",500],["France",600],["Russia",700],["India",400]]
		            );
		            var chart = new google.visualization.GeoChart(el);
		            function draw(){
		                var w = el.clientWidth || el.offsetWidth || 800;
		                var h = Math.round(
		                    Math.max(
		                        300,
		                        Math.min(600, w * 0.60)
		                    )
		                );

		                chart.draw(data, {
		                    height: h,
		                    backgroundColor: {
		                        fill: "transparent"
		                    },

		                    datalessRegionColor: "#f5f5f5",
		                    defaultColor: "#e5e5e5",

		                    colorAxis: {
		                        colors: [
		                            "#e7711c",
		                            "#4374e0"
		                        ]
		                    },

		                    legend: {
		                        textStyle: {
		                            color: "#333333"
		                        }
		                    },

		                    tooltip: {
		                        textStyle: {
		                            color: "#000000"
		                        }
		                    }
		                });
		            }
		            draw();

		            window.sktGeoCharts.push(draw);
		            if(!window.sktGeoResizeBound){
		                window.sktGeoResizeBound = true;
		                var resizeTimer;
		                window.addEventListener("resize", function(){
		                    clearTimeout(resizeTimer);
		                    resizeTimer = setTimeout(function(){
		                        window.sktGeoCharts.forEach(function(fn){
		                            fn();
		                        });

		                    }, 200);
		                });
		            }
		        });

		    })();
		    </script>

[skillwrapper type="skt_geochart" chart_title="Country Popularity" text_color="#333333" start_range_color="#e7711c" end_range_color="#4374e0"]

[skill country="Germany" value="200"]

[skill country="United States" value="300"]

[skill country="Brazil" value="400"]

[skill country="Canada" value="500"]

[skill country="France" value="600"]

[skill country="Russia" value="700"]

[skill country="India" value="400"]

[/skillwrapper]

Country Popularity