Stepped Area Graph

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

<?php
echo 'Hello, world!';

		    <div class="skt-stepped-bg">
		        <div class="skt-stepped-card">
		            <div id="stepped_1" class="skt-stepped-chart"></div>
		        </div>
		    </div>

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

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

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

		            var data  = google.visualization.arrayToDataTable([["Label","Rotten Tomatoes","IMDB"],["Alfred Hitchcock (1935)",8.4000000000000003552713678800500929355621337890625,7.9000000000000003552713678800500929355621337890625],["Ralph Thomas (1959)",6.9000000000000003552713678800500929355621337890625,6.5],["Don Sharp (1978)",6.5,6.4000000000000003552713678800500929355621337890625],["James Hawes (2008)",4.4000000000000003552713678800500929355621337890625,6.20000000000000017763568394002504646778106689453125]]);
		            var chart = new google.visualization.SteppedAreaChart(el);
		            var first = true;

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

		                var options = {
		                    height: h,
		                    title: "Stepped Area Chart",
		                    isStacked: true,
		                    colors: ["#00ff40","#8000ff"],
		                    backgroundColor: { fill: "transparent" },
		                    titleTextStyle: { color: "#8000ff", fontSize: small ? 14 : 18 },
		                    legend: { position: "top", textStyle: { color: "#8000ff", fontSize: small ? 11 : 13 } },
		                    hAxis: {
		                        textStyle: { color: "#8000ff", fontSize: small ? 10 : 12 },
		                        slantedText: true,
		                        slantedTextAngle: small ? 60 : 30
		                    },
		                    vAxis: {
		                        title: "Accumulated Rating",
		                        titleTextStyle: { color: "#8000ff" },
		                        textStyle: { color: "#8000ff", 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 ? "58%" : "70%", backgroundColor: "transparent" }
		                };

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

		                chart.draw(data, options);
		            }

		            draw();
		            window.sktSteppedCharts.push(draw);

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

[skillwrapper type="skt_steppedarea" series1="Rotten Tomatoes" series2="IMDB" axis_title="Accumulated Rating" steppedchart_title="Stepped Area Chart" stepped_color="#00ff40|#8000ff" text_color="#8000ff"]

[skill title="Alfred Hitchcock (1935)" v1="8.4" v2="7.9"]

[skill title="Ralph Thomas (1959)" v1="6.9" v2="6.5"]

[skill title="Don Sharp (1978)" v1="6.5" v2="6.4"]

[skill title="James Hawes (2008)" v1="4.4" v2="6.2"]

[/skillwrapper]