Combo Graph

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

<?php
echo 'Hello, world!';

		    <div class="skt-combo-bg">
		        <div class="skt-combo-card">
		            <div id="combochart_1" class="skt-combo-chart"></div>
		        </div>
		    </div>

		    <script>
		    (function(){
		        window.sktComboCharts = window.sktComboCharts || [];

		        google.charts.load("current", {packages:["corechart"]});
		        google.charts.setOnLoadCallback(function(){

		            var el = document.getElementById("combochart_1");
		            if(!el){ return; }

		            var data  = google.visualization.arrayToDataTable([["Month","Bolivia","Ecuador","Madagascar","Papua New Guinea","Rwanda","Average"],["2004\/05",165,938,522,998,450,614.6000000000000227373675443232059478759765625],["2005\/06",135,1120,599,1268,288,682],["2006\/07",157,1167,587,807,397,623],["2007\/08",139,1110,615,968,215,609.3999999999999772626324556767940521240234375],["2008\/09",136,691,629,1026,366,569.6000000000000227373675443232059478759765625]]);
		            var chart = new google.visualization.ComboChart(el);
		            var first = true;

		            function draw(){
		                var w = el.clientWidth || el.offsetWidth || 600;
		                var h = Math.round(Math.max(320, Math.min(500, w * 0.55)));
		                var small = w < 520;

		                var options = {
		                    height: h,
		                    title: "Monthly Coffee Production by Country",
		                    titleTextStyle: { color: "#ff0040", fontSize: small ? 14 : 18 },
		                    backgroundColor: { fill: "transparent" },
		                    legend: { position: "top", textStyle: { color: "#ff0040", fontSize: small ? 11 : 13 } },
		                    seriesType: "bars",
		                    series: { 5: { type: "line" } },
		                    hAxis: {
		                        title: "Month",
		                        titleTextStyle: { color: "#ff0040" },
		                        textStyle: { color: "#ff0040", fontSize: small ? 10 : 12 },
		                        slantedText: small, slantedTextAngle: 45
		                    },
		                    vAxis: {
		                        title: "Cups",
		                        titleTextStyle: { color: "#ff0040" },
		                        textStyle: { color: "#ff0040", fontSize: small ? 10 : 12 },
		                        gridlines: { color: "rgba(255,255,255,0.15)" },
		                        minorGridlines: { color: "rgba(255,255,255,0.05)" }
		                    },
		                    chartArea: { width: small ? "78%" : "85%", height: small ? "60%" : "70%", backgroundColor: "transparent" }
		                };

		                if(first){ options.animation = { startup: true, duration: 1000, easing: "out" }; first = false; }
		                chart.draw(data, options);
		            }

		            draw();
		            window.sktComboCharts.push(draw);

		            if(!window.sktComboResizeBound){
		                window.sktComboResizeBound = true;
		                var t;
		                window.addEventListener("resize", function(){
		                    clearTimeout(t);
		                    t = setTimeout(function(){ window.sktComboCharts.forEach(function(fn){ fn(); }); }, 200);
		                });
		            }
		        });
		    })();
		    </script>

[skill title="2004/05" values="165|938|522|998|450|614.6"]

[skill title="2005/06" values="135|1120|599|1268|288|682"]

[skill title="2006/07" values="157|1167|587|807|397|623"]

[skill title="2007/08" values="139|1110|615|968|215|609.4"]

[skill title="2008/09" values="136|691|629|1026|366|569.6"]

[/skillwrapper]