Line Interval Graph

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

<?php
echo 'Hello, world!';

		    <div class="skt-lineinterval-wrap" style="position:relative;width:100%;max-width:900px;margin:0 auto;">
		        <div id="lineinterval_1" style="width:100%;"></div>
		    </div>

		    <script>
		    (function(){

		        window.sktLineIntervalCharts = window.sktLineIntervalCharts || [];

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

		        google.charts.setOnLoadCallback(function(){

		            var el = document.getElementById("lineinterval_1");

		            if(!el){
		                return;
		            }

		            var ROWS = [[1,100,85,90,96,104,110,120],[2,120,90,95,113,124,130,140],[3,130,100,105,117,133,139,140],[4,90,85,85,88,92,95,95]];
		            var INTERVAL_COUNT = 6;

		            function draw(){

		                var data = new google.visualization.DataTable();

		                data.addColumn("number", "X");
		                data.addColumn("number", "Values");

		                for(var i = 0; i < INTERVAL_COUNT; i++){

		                    data.addColumn({
		                        id: "i" + i,
		                        type: "number",
		                        role: "interval"
		                    });

		                }

		                ROWS.forEach(function(row){

		                    var r = row.slice();

		                    while(r.length < (2 + INTERVAL_COUNT)){
		                        r.push(null);
		                    }

		                    data.addRow(r);

		                });

		                var w = el.clientWidth || 600;
		                var h = Math.max(300, Math.min(500, w * 0.6));

		                var chart = new google.visualization.LineChart(el);

		                chart.draw(data, {

		                    title: "Line Intervals",

		                    curveType: "function",

		                    lineWidth: 4,

		                    intervals: {
		                        style: "line"
		                    },

		                    legend: "none",

		                    height: h,

		                    chartArea: {
		                        width: "85%",
		                        height: "75%"
		                    }
		                });

		            }

		            draw();

		            window.sktLineIntervalCharts.push(draw);

		            if(!window.sktLineIntervalResizeBound){

		                window.sktLineIntervalResizeBound = true;

		                var timer;

		                window.addEventListener("resize", function(){

		                    clearTimeout(timer);

		                    timer = setTimeout(function(){

		                        window.sktLineIntervalCharts.forEach(function(fn){
		                            fn();
		                        });

		                    }, 200);

		                });

		            }

		        });

		    })();
		    </script>

[skillwrapper type="skt_lineinterval" chart_title="Line Intervals"]

[skill x="1" value="100" interval1="90" interval2="110" interval3="85" interval4="96" interval5="104" interval6="120"]

[skill x="2" value="120" interval1="95" interval2="130" interval3="90" interval4="113" interval5="124" interval6="140"]

[skill x="3" value="130" interval1="105" interval2="140" interval3="100" interval4="117" interval5="133" interval6="139"]

[skill x="4" value="90" interval1="85" interval2="95" interval3="85" interval4="88" interval5="92" interval6="95"]

[/skillwrapper]