javascript - Is there a trick to using d3 charts in jsf? -


i using prime faces in liferay, trick getting d3 examples show in jsf land prime faces on liferay. example trying make work in jsf one: how d3.js difference chart example work json data?

i figured out. trick reference div element instead of body. of examples have seen use "body".in portal container don't want use body put outside of port let. div required , must referenced in javascript. have included new code below

    <%@ page import="javax.portlet.windowstate" %>     <%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>     <%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>       <portlet:defineobjects />      <form action="<portlet:actionurl />" method="post" name="<portlet:namespace />fm">     <div id="svgcontainer" ></div>     <script type="text/javascript" >     var margin = {top: 20, right: 20, bottom: 30, left: 50},         width = 960 - margin.left - margin.right,         height = 500 - margin.top - margin.bottom;      var parsedate = d3.time.format("%y%m%d").parse;      var x = d3.time.scale()         .range([0, width]);      var y = d3.scale.linear()         .range([height, 0]);      var xaxis = d3.svg.axis()         .scale(x)         .orient("bottom");      var yaxis = d3.svg.axis()         .scale(y)         .orient("left");      var line = d3.svg.area()         .interpolate("basis")         .x(function(d) { return x(d.date); })         .y(function(d) { return y(d["student"]); });      var area = d3.svg.area()         .interpolate("basis")         .x(function(d) { return x(d.date); })         .y1(function(d) { return y(d["student"]); });      var svg = d3.select("#svgcontainer").append("svg")         .attr("width", width + margin.left + margin.right)         .attr("height", height + margin.top + margin.bottom)       .append("g")         .attr("transform", "translate(" + margin.left + "," + margin.top + ")");     var count =0;      d3.json("<%=request.getcontextpath()%>/data/data.json", function(error, data) {       if(error) return console.warn(error);           data.data.foreach(function(d) {             d.date = parsedate(d.date);             d["student"]= +d["student"];             d["average"] = +d["average"];             count++;            });        x.domain(d3.extent(data.data, function(d) { return d.date; }));        y.domain([         d3.min(data.data, function(d) { return math.min(d["student"], d["average"]); }),         d3.max(data.data, function(d) { return math.max(d["student"], d["average"]); })       ]);        svg.datum(data.data);        svg.append("clippath")           .attr("id", "clip-below")         .append("path")           .attr("d", area.y0(height));        svg.append("clippath")           .attr("id", "clip-above")         .append("path")           .attr("d", area.y0(0));        svg.append("path")           .attr("class", "area above")           .attr("clip-path", "url(#clip-above)")           .attr("d", area.y0(function(d) { return y(d["average"]); }));        svg.append("path")           .attr("class", "area below")           .attr("clip-path", "url(#clip-below)")           .attr("d", area);        svg.append("path")           .attr("class", "line")           .attr("d", line);        svg.append("g")           .attr("class", "x axis")           .attr("transform", "translate(0," + height + ")")           .call(xaxis);        svg.append("g")           .attr("class", "y axis")           .call(yaxis)         .append("text")           .attr("transform", "rotate(-90)")           .attr("y", 6)           .attr("dy", ".71em")           .style("text-anchor", "end")           .text("grades");     });        </script>     </form> 

Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -