Plotting JSON data to a flot line chart

See more:

Javascript

JSON

I am working on populating a Flot-Plot. I have a JSON recordset which has the line data for the plot. I think I have managed to get the JSON records bound to the respective arrays which produce the data for the chart's lines. I think the data is assigned as a float but I still do not see the lines materialize in the chart.

Have two errors in the Development Console:

elem.css(...) is undefined at Line 32 in jQuery.js
Argument 4 of CanvasRenderingContext2D.createLinearGradient is not finite floating-point value at line 3090 in Jquery.js

The odd thing is that both of these errors where present when I had the Flot graph showing Sin, Cosine values.

Other then this errors I do not get any others.

What I have tried:

Plotting Function:

function plot() {
    	//	Data arrays for plot lines
    	var min = [],
			max = [],
			median = [],
			Average = [],
			Q1 = [],
			Q3 = [],
			LCL = [],
			LCL2 = [],
			UCL = [],
			UCL2 = [],
			Midpoint = [],
			LCL2A = [],
            UCL2A = [];
            
    	$.ajax({
   			type: 'GET',
   			url: 'http://192.168.1.103/Web%20Service/Service.asmx/GetFirstSample',
   			dataType: 'json',
   			contentType: 'application/json;charset=utf-8',
   			success: function(product) {
    			var products = JSON.parse(product.d);
    			var len = Object.keys(products.RunSet).length;    			
	    			for (var i = 0; i < len; i++) {
 	    					alert('Index: ' + i + '  Min: ' + products.RunSet[i].Minimum);
		    				min.push([i,products.RunSet[i].Minimum]);
				            max.push([i,products.RunSet[i].Maximum]);
							median.push([i,products.RunSet[i].Median]);
							Average.push([i,products.RunSet[i].Average]);
							Q1.push([i,products.RunSet[i].Q1]);
				            Q3.push([i,products.RunSet[i].Q3]);
							LCL.push([i,products.RunSet[i].LCL]);
							LCL2.push([i,products.RunSet[i].LCL2]);
				            UCL.push([i,products.RunSet[i].UCL]);
							UCL2.push([i,products.RunSet[i].UCL2]);
							Midpoint.push([i,products.RunSet[i].Midpoint]);
				            LCL2A.push([i,products.RunSet[i].LCL2A]);
							UCL2A.push([i,products.RunSet[i].UCL2A]);

					}
         	},
   			failure: function(error) {
   				 alert(error.d); 
   			}
   			});
        

        var options = {
            series: {
                lines: {
                    show: true
                },
                points: {
                    show: true
                }
            },
            grid: {
                hoverable: true //IMPORTANT! this is needed for tooltip to work
            },
            yaxis: {
                min: 0,
                max: 50
            },
            xaxis: {
                min: 0,
                max: 50
            },
            tooltip: true,
            tooltipOpts: {
                content: "'%s' of %x.1 is %y.4",
                shifts: {
                    x: -60,
                    y: 25
                }
            }
        };

        var plotObj = $.plot($("#flot-line-chart"), [{
                data: min,
                label: "Min"
            }, {
                data: max,
                label: "Max"
			}, {
                data: median,
                label: "Median"
            }, {
            	data: Average,
                label: "Average"
            }, {
            	data: Q1,
                label: "Q1"
            }, {
            	data: Q3,
                label: "Q3"
            }, {
            	data: LCL,
                label: "LCL"
            }, {
            	data: LCL2,
                label: "LCL2"
            }, {
            	data: UCL,
                label: "UCL"
            }, {
            	data: Midpoint,
                label: "Midpoint"
            }, {
            	data: LCL2A,
                label: "LCL2A"
            }, {
            	data: UCL2A,
                label: "UCL2A"
            }],
            options);
    }
   
					
           
});