function (tag) {
	////////////// vf-pplot //////////////
	$(tag).each(function (index, element) {
		if (($(element).attr('rendered') == undefined || $(element).attr('rendered') == false)) {
			$(element).html('');
			function renderPlot(outputs, element) {
				var predata = outputs;
				var configID = [];
				var metricIC = [];
				
				for (var i in predata.Configurations.Configuration) //Config ID
				{
					configID.push(predata.Configurations.Configuration[i].ID);
				}
				
				for (var i in predata.Configurations.Configuration[0].ConfigMetric) //Metric ID
				{
					metricIC.push(predata.Configurations.Configuration[0].ConfigMetric[i].Name);
				}
				
				var m = [120, 100, 10, 30], //top, right, bottom, left
				w = $(element).parent().width() - m[1] - m[3],
				h = ($(element).parent().width() * .37) - m[0] - m[2];
				
				var x = d3.scale.ordinal().domain(metricIC).rangePoints([0, w]),
				y = {};
				
				var line = d3.svg.line(),
				axis = d3.svg.axis().orient("left"),
				foreground;
				
				var svg = d3.select('#' + $(element).attr('id')).append("svg:svg")
					.attr("width", w + m[1] + m[3])
					.attr("height", h + m[0] + m[2])
					.append("svg:g")
					.attr("transform", "translate(" + m[3] + "," + m[0] + ")");
				
				//-------------------------Begin code here-------------------------
				var formattedData = {};
				var formattedGroupData = [];
				
				//Format the data as required
				for (var i in predata.Configurations.Configuration) {
					for (var j in predata.Configurations.Configuration[i].ConfigMetric) {
						formattedData[predata.Configurations.Configuration[i].ConfigMetric[j].Name] = predata.Configurations.Configuration[i].ConfigMetric[j].Value;
					}
					formattedData["ID"] = configID[i];
					
					formattedGroupData.push(formattedData);
					formattedData = {};
				}
				
				var data = formattedGroupData;
				
				// Create a scale and brush for each trait.
				metricIC.forEach(function (d) {
					y[d] = d3.scale.linear()
						.domain(d3.extent(
								data, function (p) {
								return +p[d];
							}))
						.range([h, 0]);
					
					y[d].brush = d3.svg.brush()
						.y(y[d])
						.on("brush", brush);
				});
				
				/* // Add a legend.
				var legend = svg.selectAll("g.legend")
				.data(configID)
				.enter().append("svg:g")
				.attr("class", "legend")
				.attr("transform", function(d, i) { return "translate(0," + (i * 20 + 584) + ")"; });
				
				legend.append("svg:line")
				.attr("class", String)
				.attr("stroke", d3.scale.category20()) //D3 COLOR SCALE
				.attr("x2", 8);
				
				legend.append("svg:text")
				.attr("x", 12)
				.attr("dy", ".31em")
				.text(function(d) { return d; }); */
				
				// Add foreground lines. background brush
				foreground = svg.append("svg:g")
					.attr("class", "foreground")
					.selectAll("path")
					.data(data)
					.enter().append("svg:path")
					.attr("d", path)
					.attr("stroke", d3.scale.category20()) //D3 COLOR SCALE
					.attr("class", function (d) {
						return d.ID;
					});
				
				// Add a group element for each trait.
				var g = svg.selectAll(".trait")
					.data(metricIC)
					.enter().append("svg:g")
					.attr("class", "trait")
					//.attr("stroke", "white")
					.attr("transform", function (d) {
						return "translate(" + x(d) + ")";
					})
					.call(d3.behavior.drag()
						.origin(function (d) {
							return {
								x : x(d)
							};
						})
						.on("dragstart", dragstart)
						.on("drag", drag)
						.on("dragend", dragend));
				
				// Add an axis and title.
				g.append("svg:g")
				.attr("class", "axis")
				.each(function (d) {
					d3.select(this).call(axis.scale(y[d]));
				})
				.append("svg:text")
				//.attr("fill", "white")
				.attr("text-anchor", "left")
				.attr("fill", "white")
				.attr("y", -9)
				//.attr("transform", "translate(0 100)")
				.attr("transform", "rotate(-45 0 0)") //y x
				//.attr("x", -10)
				.text(String);
				
				// Add a brush for each axis.
				g.append("svg:g")
				.attr("class", "brush")
				.attr("fill", "white")
				.each(function (d) {
					d3.select(this).call(y[d].brush);
				})
				.selectAll("rect")
				.attr("x", -8)
				.attr("fill", "white")
				.attr("width", 16);
				
				function dragstart(d) {
					i = metricIC.indexOf(d);
				}
				
				function drag(d) {
					x.range()[i] = d3.event.x;
					metricIC.sort(function (a, b) {
						return x(a) - x(b);
					});
					g.attr("transform", function (d) {
						return "translate(" + x(d) + ")";
					});
					foreground.attr("d", path);
				}
				
				function dragend(d) {
					x.domain(metricIC).rangePoints([0, w]);
					var t = d3.transition().duration(500);
					t.selectAll(".trait").attr("transform", function (d) {
						return "translate(" + x(d) + ")";
					});
					t.selectAll(".foreground path").attr("d", path);
				}
				
				// Returns the path for a given data point.
				function path(d) {
					return line(metricIC.map(function (p) {
							return [x(p), y[p](d[p])];
						}));
				}
				
				// Handles a brush event, toggling the display of foreground lines.
				function brush() {
					var actives = metricIC.filter(function (p) {
							return !y[p].brush.empty();
						}),
					extents = actives.map(function (p) {
							return y[p].brush.extent();
						});
					foreground.classed("fade", function (d) {
						return !actives.every(function (p, i) {
							return extents[i][0] <= d[p] && d[p] <= extents[i][1];
						});
					});
				}
				
			}
		}
		d3.json($(element).attr('data'), function (data) {
			renderPlot(data, element);
		});
		$(element).attr('rendered', 'true');
	});
}