JUMFlot plugin Spider

by tronne

HTML

<script src="http://www.flotcharts.org/flot/jquery.flot.js"></script>
<script src="http://jumjum123.github.io/JUMFlot/javascripts/JUMFlot.min.js"></script>
		<div id="filled">
			<div id="placeholderdf" style="width:800px;height:600px;float: left;border: 1px dashed gainsboro;"></div>
		</div>

JavaScript

var p1,pdf,p2,p3,data,datadf,data2,data3,options,options2,optionsdf,optionsedit;
	var df1 = [ [0,50], [1,40], [2,80], [3,80], [4,70] ];	
	var df2 = [ [0,30], [1,25], [2,60], [3,70], [4,60] ];
	var df3 = [ [0,10], [1,20], [2,50], [3,60], [4,30] ];
	var df4 = [ [0,30], [1,35], [2,65], [3,75], [4,50] ];


	optionsdf = {
		series:{
			spider:{
				active: true
				,highlight: {mode: "line"}
				,legs: { 
					data: [{label: "OEE"},{label: "MOE"},{label: "OER"},{label: "OEC"},{label: "Quality"}]
					,legScaleMax: 1
					,legScaleMin:0.8
				}
				,spiderSize: 0.9       
			}
		}
		,grid:{ hoverable: true,clickable: true,tickColor: "rgba(0,0,0,0.2)",mode: "radar"}
	};


	datadf = [
		{ label: "Pies", color:"green",data: df1, spider: {show: true, fill:true} }
		,{ label: "Apples",data: df2, spider: {show: true, fill:true} }
		,{ label: "Cherries",data: df3, spider: {show: true, fill:true} }
		,{ label: "Raspberries",data: df4, spider:{show:true, fill:false} }
	];


    pdf = $.plot($("#placeholderdf"),datadf,optionsdf);



$(document).ready(function(){ 
		var dt = [{header:"simple Data",data:data}
				 ,{header:"Filled",data:datadf}
				 ,{header:"User defined",data:data2}
				 ,{header:"Edit Mode",data:data3}];
		var op = [{header:"Simple",data:options}
		         ,{header:"Filled",data:optionsdf}
		         ,{header:"User defined",data:options2}
		         ,{header:"Edit Mode",data:optionsedit}];
		$.plot.JUMExample.init("spider",dt,op);
});
$("#sethovermode").click(function () {setHoverMode() });
function setHoverMode(){
	var mode;
	mode = $("#hovermode").val();
	options.series.spider.highlight.mode = mode;
	mode = $("#spidermode").val();
	options.grid.mode = mode;
	mode = $("#scalemode").val();
	options.series.spider.scaleMode = mode;
	if(mode == 'static'){
		options.series.spider.legMin = parseFloat($("#legMin").val());
		options.series.spider.legMax = parseFloat($("#legMax").val());
	}
	options.series.spider.legs.legStartAngle = $("#legStartAngle").val();
	p2 =...