Combination View Flat View Tree View
Threads [ Previous | Next ]
toggle
John Joseph Ryan
Prime Faces Portlet to show d3.js chart.
May 8, 2013 3:44 PM
Answer

John Joseph Ryan

Rank: New Member

Posts: 15

Join Date: September 21, 2008

Recent Posts

I am having a hard time getting a d3.js chart to show up in Prime Faces portlet. I do not know the approach to use to show the graph.
I was able to get the below HTML version to work I just need to get it to work in Prime Faces now and call a backing bean to load the json data. I am in need of the xhtml file that would be used.

My chart.html file
  1
  2<!DOCTYPE html>
  3<meta charset="utf-8">
  4<style>
  5
  6body {
  7  font: 10px sans-serif;
  8}
  9
 10.axis path,
 11.axis line {
 12  fill: none;
 13  stroke: #000;
 14  shape-rendering: crispEdges;
 15}
 16
 17.x.axis path {
 18  display: none;
 19}
 20
 21.area.above {
 22  fill: rgb(253, 174, 107);
 23}
 24
 25.area.below {
 26  fill: rgb(145,207,96);
 27}
 28
 29.line {
 30  fill: none;
 31  stroke: #000;
 32  stroke-width: 1.5px;
 33}
 34
 35</style>
 36<body>
 37<script src="http://d3js.org/d3.v3.min.js"></script>
 38<script>
 39
 40var margin = {top: 20, right: 20, bottom: 30, left: 50},
 41    width = 960 - margin.left - margin.right,
 42    height = 500 - margin.top - margin.bottom;
 43
 44var parseDate = d3.time.format("%Y%m%d").parse;
 45
 46var x = d3.time.scale()
 47    .range([0, width]);
 48
 49var y = d3.scale.linear()
 50    .range([height, 0]);
 51
 52var xAxis = d3.svg.axis()
 53    .scale(x)
 54    .orient("bottom");
 55
 56var yAxis = d3.svg.axis()
 57    .scale(y)
 58    .orient("left");
 59
 60var line = d3.svg.area()
 61    .interpolate("basis")
 62    .x(function(d) { return x(d.date); })
 63    .y(function(d) { return y(d["student"]); });
 64
 65var area = d3.svg.area()
 66    .interpolate("basis")
 67    .x(function(d) { return x(d.date); })
 68    .y1(function(d) { return y(d["student"]); });
 69
 70var svg = d3.select("body").append("svg")
 71    .attr("width", width + margin.left + margin.right)
 72    .attr("height", height + margin.top + margin.bottom)
 73  .append("g")
 74    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 75var count =0;
 76
 77d3.json("data.json", function(error, data) {
 78  if(error) return console.warn(error);
 79      data.data.forEach(function(d) {
 80        d.date = parseDate(d.date);
 81        d["student"]= +d["student"];
 82        d["average"] = +d["average"];
 83        count++;
 84       
 85      });
 86
 87  x.domain(d3.extent(data.data, function(d) { return d.date; }));
 88
 89  y.domain([
 90    d3.min(data.data, function(d) { return Math.min(d["student"], d["average"]); }),
 91    d3.max(data.data, function(d) { return Math.max(d["student"], d["average"]); })
 92  ]);
 93
 94  svg.datum(data.data);
 95
 96  svg.append("clipPath")
 97      .attr("id", "clip-below")
 98    .append("path")
 99      .attr("d", area.y0(height));
100
101  svg.append("clipPath")
102      .attr("id", "clip-above")
103    .append("path")
104      .attr("d", area.y0(0));
105
106  svg.append("path")
107      .attr("class", "area above")
108      .attr("clip-path", "url(#clip-above)")
109      .attr("d", area.y0(function(d) { return y(d["average"]); }));
110
111  svg.append("path")
112      .attr("class", "area below")
113      .attr("clip-path", "url(#clip-below)")
114      .attr("d", area);
115
116  svg.append("path")
117      .attr("class", "line")
118      .attr("d", line);
119
120  svg.append("g")
121      .attr("class", "x axis")
122      .attr("transform", "translate(0," + height + ")")
123      .call(xAxis);
124
125  svg.append("g")
126      .attr("class", "y axis")
127      .call(yAxis)
128    .append("text")
129      .attr("transform", "rotate(-90)")
130      .attr("y", 6)
131      .attr("dy", ".71em")
132      .style("text-anchor", "end")
133      .text("Grades");
134});
135
136</script>



my data.json file
  1
  2         {"data":[
  3         {"date":"20111001","student":83.4,"average":82.7},
  4         {"date":"20111002","student":78.1,"average":79.9},
  5         {"date":"20111003","student":73.3,"average":79.1},
  6         {"date":"20111004","student":75.7,"average":78.8},
  7         {"date":"20111005","student":84.2,"average":78.7},
  8         {"date":"20111006","student":78.8,"average":77},
  9         {"date":"20111007","student":77.9,"average":76.7},
 10         {"date":"20111008","student":81.8,"average":76.8},
 11         {"date":"20111009","student":89.3,"average":76.7},
 12         {"date":"20111010","student":91.2,"average":80.1},
 13         {"date":"20111011","student":88.7,"average":81.1},
 14         {"date":"20111012","student":81.8,"average":81.5},
 15         {"date":"20111013","student":83.1,"average":84.3},
 16         {"date":"20111014","student":86.9,"average":87.1},
 17         {"date":"20111015","student":81.7,"average":84.6},
 18         {"date":"20111016","student":81.8,"average":81.6},
 19         {"date":"20111017","student":82.8,"average":81.1},
 20         {"date":"20111018","student":80.8,"average":79.2},
 21         {"date":"20111019","student":82.1,"average":78.9},
 22         {"date":"20111020","student":85.1,"average":77.2},
 23         {"date":"20111021","student":75.6,"average":76.4},
 24         {"date":"20111022","student":74.4,"average":80.7},
 25         {"date":"20111023","student":74.4,"average":85.1},
 26         {"date":"20111024","student":74.8,"average":80.9},
 27         {"date":"20111025","student":77.9,"average":76.1},
 28         {"date":"20111026","student":74.6,"average":74.6},
 29         {"date":"20111027","student":74.4,"average":76.1},
 30         {"date":"20111028","student":62.5,"average":78.1},
 31         {"date":"20111029","student":60.9,"average":77.5},
 32         {"date":"20111030","student":58.6,"average":77.7},
 33         {"date":"20111031","student":64.2,"average":75.1},
 34         {"date":"20111101","student":69.6,"average":77.9},
 35         {"date":"20111102","student":67.2,"average":84.6},
 36         {"date":"20111103","student":70.1,"average":76.2},
 37         {"date":"20111104","student":70.1,"average":70.5},
 38         {"date":"20111105","student":63.5,"average":71.3},
 39         {"date":"20111106","student":63.8,"average":72.6},
 40         {"date":"20111107","student":68.9,"average":71.4},
 41         {"date":"20111108","student":75.5,"average":70.6},
 42         {"date":"20111109","student":73.7,"average":74.6},
 43         {"date":"20111110","student":77.7,"average":75.6},
 44         {"date":"20111111","student":68.5,"average":73.9},
 45         {"date":"20111112","student":66.8,"average":74},
 46         {"date":"20111113","student":71.1,"average":73.8},
 47         {"date":"20111114","student":76.8,"average":73.5},
 48         {"date":"20111115","student":79.7,"average":73.4},
 49         {"date":"20111116","student":76.5,"average":72.2},
 50         {"date":"20111117","student":69.6,"average":72.7},
 51         {"date":"20111118","student":61.5,"average":73.1},
 52         {"date":"20111119","student":64.3,"average":69},
 53         {"date":"20111120","student":74.1,"average":70.4},
 54         {"date":"20111121","student":74.1,"average":71.1},
 55         {"date":"20111122","student":69.4,"average":72.3},
 56         {"date":"20111123","student":70.1,"average":74.6},
 57         {"date":"20111124","student":64.1,"average":75.1},
 58         {"date":"20111125","student":70.3,"average":71.5},
 59         {"date":"20111126","student":72.1,"average":73.6},
 60         {"date":"20111127","student":69.6,"average":72.3},
 61         {"date":"20111128","student":77.2,"average":71},
 62         {"date":"20111129","student":79.1,"average":69.5},
 63         {"date":"20111130","student":70.6,"average":69.8},
 64         {"date":"20111201","student":64.3,"average":80.4},
 65         {"date":"20111202","student":63.9,"average":82.2},
 66         {"date":"20111203","student":62.1,"average":78.3},
 67         {"date":"20111204","student":63.9,"average":72.7},
 68         {"date":"20111205","student":70.2,"average":71.5},
 69         {"date":"20111206","student":74.2,"average":69.9},
 70         {"date":"20111207","student":74.6,"average":68.6},
 71         {"date":"20111208","student":63.4,"average":66.4},
 72         {"date":"20111209","student":62.2,"average":69.8},
 73         {"date":"20111210","student":65.1,"average":72.1},
 74         {"date":"20111211","student":53.8,"average":68.8},
 75         {"date":"20111212","student":56.8,"average":67.4},
 76         {"date":"20111213","student":58.6,"average":67.2},
 77         {"date":"20111214","student":61.9,"average":66.1},
 78         {"date":"20111215","student":69.6,"average":68.8},
 79         {"date":"20111216","student":70.2,"average":67.9},
 80         {"date":"20111217","student":60.6,"average":69.8},
 81         {"date":"20111218","student":49.1,"average":69.1},
 82         {"date":"20111219","student":53.7,"average":68.3},
 83         {"date":"20111220","student":65.8,"average":69.3},
 84         {"date":"20111221","student":67.4,"average":68.4},
 85         {"date":"20111222","student":74.4,"average":73.3},
 86         {"date":"20111223","student":67.8,"average":67.5},
 87         {"date":"20111224","student":54.9,"average":67.9},
 88         {"date":"20111225","student":55.9,"average":68.9},
 89         {"date":"20111226","student":63.6,"average":65.9},
 90         {"date":"20111227","student":62.9,"average":67.2},
 91         {"date":"20111228","student":66.2,"average":68.9},
 92         {"date":"20111229","student":50.8,"average":70.9},
 93         {"date":"20111230","student":60.8,"average":72.9},
 94         {"date":"20111231","student":69.8,"average":70.1},
 95         {"date":"20120101","student":66.3,"average":73.9},
 96         {"date":"20120102","student":63.2,"average":73.1},
 97         {"date":"20120103","student":50.3,"average":69.7},
 98         {"date":"20120104","student":39.2,"average":72.7},
 99         {"date":"20120105","student":52.1,"average":72.6},
100         {"date":"20120106","student":61.2,"average":69},
101         {"date":"20120107","student":67.1,"average":71},
102         {"date":"20120108","student":66.1,"average":76.8},
103         {"date":"20120109","student":54.7,"average":72.3},
104         {"date":"20120110","student":59.4,"average":71.6},
105         {"date":"20120111","student":60.4,"average":69.8},
106         {"date":"20120112","student":65.4,"average":71.9},
107         {"date":"20120113","student":60.7,"average":73.7},
108         {"date":"20120114","student":50.4,"average":72.9},
109         {"date":"20120115","student":43.9,"average":69.7},
110         {"date":"20120116","student":42.6,"average":65.3},
111         {"date":"20120117","student":59.8,"average":63.6},
112         {"date":"20120118","student":63.2,"average":65},
113         {"date":"20120119","student":46.3,"average":67.3},
114         {"date":"20120120","student":52.8,"average":71.4},
115         {"date":"20120121","student":47.4,"average":73.7},
116         {"date":"20120122","student":45.1,"average":68.3},
117         {"date":"20120123","student":59.4,"average":72.9},
118         {"date":"20120124","student":68.7,"average":69.1},
119         {"date":"20120125","student":63.1,"average":72.1},
120         {"date":"20120126","student":57.1,"average":73.6},
121         {"date":"20120127","student":68.2,"average":70.4},
122         {"date":"20120128","student":63.7,"average":70.3},
123         {"date":"20120129","student":60.1,"average":73.8},
124         {"date":"20120130","student":58.0,"average":71.9},
125         {"date":"20120131","student":63.5,"average":70},
126         {"date":"20120201","student":70.4,"average":70},
127         {"date":"20120202","student":65.8,"average":71.3},
128         {"date":"20120203","student":57.5,"average":71.5},
129         {"date":"20120204","student":60.8,"average":72},
130         {"date":"20120205","student":56.5,"average":73.8},
131         {"date":"20120206","student":59.1,"average":74.6},
132         {"date":"20120207","student":63.2,"average":74.3},
133         {"date":"20120208","student":56.5,"average":71.9},
134         {"date":"20120209","student":56.5,"average":73.8},
135         {"date":"20120210","student":58.3,"average":73.9},
136         {"date":"20120211","student":56.9,"average":72.3},
137         {"date":"20120212","student":49.7,"average":70.1},
138         {"date":"20120213","student":53.1,"average":69.5},
139         {"date":"20120214","student":59.6,"average":68.6},
140         {"date":"20120215","student":62.3,"average":69.9},
141         {"date":"20120216","student":59.7,"average":72.4},
142         {"date":"20120217","student":66.0,"average":69.9},
143         {"date":"20120218","student":61.2,"average":71.6},
144         {"date":"20120219","student":59.8,"average":67.8},
145         {"date":"20120220","student":58.1,"average":68.7},
146         {"date":"20120221","student":57.1,"average":69.7},
147         {"date":"20120222","student":65.5,"average":73.4},
148         {"date":"20120223","student":70.6,"average":74.1},
149         {"date":"20120224","student":62.7,"average":75.9},
150         {"date":"20120225","student":62.6,"average":71.7},
151         {"date":"20120226","student":56.9,"average":67.7},
152         {"date":"20120227","student":60.9,"average":65.4},
153         {"date":"20120228","student":65.9,"average":67},
154         {"date":"20120229","student":60.7,"average":69.8},
155         {"date":"20120301","student":61.3,"average":68.9},
156         {"date":"20120302","student":56.8,"average":68.1},
157         {"date":"20120303","student":67.6,"average":70.7},
158         {"date":"20120304","student":64.2,"average":75},
159         {"date":"20120305","student":58.5,"average":68.8},
160         {"date":"20120306","student":52.9,"average":68.4},
161         {"date":"20120307","student":63.3,"average":69.9},
162         {"date":"20120308","student":71.2,"average":69.2},
163         {"date":"20120309","student":67.8,"average":71.7},
164         {"date":"20120310","student":57.2,"average":69.3},
165         {"date":"20120311","student":62.9,"average":70},
166         {"date":"20120312","student":68.8,"average":68.6},
167         {"date":"20120313","student":72.6,"average":73.9},
168         {"date":"20120314","student":80.5,"average":75.2},
169         {"date":"20120315","student":67.2,"average":75.9},
170         {"date":"20120316","student":64.7,"average":74.6},
171         {"date":"20120317","student":68.2,"average":68.2},
172         {"date":"20120318","student":68.2,"average":67.1},
173         {"date":"20120319","student":73.1,"average":65.8},
174         {"date":"20120320","student":77.8,"average":69.7},
175         {"date":"20120321","student":77.5,"average":71.4},
176         {"date":"20120322","student":77.3,"average":71.4},
177         {"date":"20120323","student":81.7,"average":68.4},
178         {"date":"20120324","student":75.8,"average":69},
179         {"date":"20120325","student":68.4,"average":66.4},
180         {"date":"20120326","student":69.8,"average":69.7},
181         {"date":"20120327","student":59.6,"average":74.1},
182         {"date":"20120328","student":69.7,"average":74.6},
183         {"date":"20120329","student":76.8,"average":72.3},
184         {"date":"20120330","student":66.5,"average":74.5},
185         {"date":"20120331","student":62.2,"average":76.2},
186         {"date":"20120401","student":65.3,"average":71.1},
187         {"date":"20120402","student":68.1,"average":70.5},
188         {"date":"20120403","student":71.2,"average":72.2},
189         {"date":"20120404","student":81.0,"average":70.6},
190         {"date":"20120405","student":70.7,"average":67.9},
191         {"date":"20120406","student":68.0,"average":67.4},
192         {"date":"20120407","student":71.1,"average":69.4},
193         {"date":"20120408","student":75.7,"average":70},
194         {"date":"20120409","student":78.3,"average":71.3},
195         {"date":"20120410","student":75.0,"average":73.8},
196         {"date":"20120411","student":69.0,"average":72.9},
197         {"date":"20120412","student":71.7,"average":73.9},
198         {"date":"20120413","student":73.1,"average":70.2},
199         {"date":"20120414","student":75.2,"average":70.9},
200         {"date":"20120415","student":82.3,"average":71.5},
201         {"date":"20120416","student":82.9,"average":71.9},
202         {"date":"20120417","student":89.3,"average":73.2},
203         {"date":"20120418","student":79.0,"average":73},
204         {"date":"20120419","student":74.1,"average":75.1},
205         {"date":"20120420","student":76.5,"average":75.8},
206         {"date":"20120421","student":78.2,"average":78},
207         {"date":"20120422","student":72.4,"average":72.8},
208         {"date":"20120423","student":71.6,"average":75.1},
209         {"date":"20120424","student":69.3,"average":77.9},
210         {"date":"20120425","student":72.5,"average":77.5},
211         {"date":"20120426","student":70.5,"average":75.3},
212         {"date":"20120427","student":71.9,"average":73.5},
213         {"date":"20120428","student":67.4,"average":74.7},
214         {"date":"20120429","student":74.1,"average":74},
215         {"date":"20120430","student":71.9,"average":73.4},
216         {"date":"20120501","student":77.4,"average":72.7},
217         {"date":"20120502","student":73.7,"average":70.7},
218         {"date":"20120503","student":73.1,"average":72.6},
219         {"date":"20120504","student":77.2,"average":73.4},
220         {"date":"20120505","student":77.0,"average":73.1},
221         {"date":"20120506","student":76.6,"average":76.5},
222         {"date":"20120507","student":74.6,"average":75.3},
223         {"date":"20120508","student":77.9,"average":72},
224         {"date":"20120509","student":79.2,"average":72.4},
225         {"date":"20120510","student":81.1,"average":73.4},
226         {"date":"20120511","student":79.7,"average":73.1},
227         {"date":"20120512","student":84.1,"average":69.9},
228         {"date":"20120513","student":85.3,"average":72},
229         {"date":"20120514","student":84.2,"average":76},
230         {"date":"20120515","student":82.0,"average":73},
231         {"date":"20120516","student":83.8,"average":71},
232         {"date":"20120517","student":84.5,"average":71.4},
233         {"date":"20120518","student":81.0,"average":72.2},
234         {"date":"20120519","student":82.6,"average":72.4},
235         {"date":"20120520","student":86.2,"average":74.5},
236         {"date":"20120521","student":82.7,"average":72.8},
237         {"date":"20120522","student":83.7,"average":73.9},
238         {"date":"20120523","student":86.4,"average":76.5},
239         {"date":"20120524","student":84.5,"average":74.7},
240         {"date":"20120525","student":85.4,"average":72.5},
241         {"date":"20120526","student":89.4,"average":72.1},
242         {"date":"20120527","student":91.9,"average":72.2},
243         {"date":"20120528","student":94.4,"average":72.9},
244         {"date":"20120529","student":95.9,"average":72.1},
245         {"date":"20120530","student":92.9,"average":72.1},
246         {"date":"20120531","student":92.5,"average":73.3},
247         {"date":"20120601","student":87.2,"average":74.8},
248         {"date":"20120602","student":88.3,"average":74},
249         {"date":"20120603","student":87.7,"average":72.3},
250         {"date":"20120604","student":81.9,"average":75.3},
251         {"date":"20120605","student":78.3,"average":73.5},
252         {"date":"20120606","student":81.7,"average":74.1},
253         {"date":"20120607","student":86.7,"average":73.9},
254         {"date":"20120608","student":88.7,"average":74.4},
255         {"date":"20120609","student":92.2,"average":75},
256         {"date":"20120610","student":92.6,"average":80},
257         {"date":"20120611","student":89.2,"average":77.2},
258         {"date":"20120612","student":86.9,"average":75.1},
259         {"date":"20120613","student":86.7,"average":73.3},
260         {"date":"20120614","student":87.7,"average":73.4},
261         {"date":"20120615","student":88.5,"average":74.6},
262         {"date":"20120616","student":87.5,"average":77},
263         {"date":"20120617","student":84.2,"average":75.6},
264         {"date":"20120618","student":81.7,"average":72.5},
265         {"date":"20120619","student":86.4,"average":73.9},
266         {"date":"20120620","student":97.9,"average":75.3},
267         {"date":"20120621","student":108.0,"average":73.3},
268         {"date":"20120622","student":102.0,"average":74.1},
269         {"date":"20120623","student":97.0,"average":75.2},
270         {"date":"20120624","student":95.4,"average":75.8},
271         {"date":"20120625","student":90.9,"average":76.8},
272         {"date":"20120626","student":85.9,"average":77.5},
273         {"date":"20120627","student":93.5,"average":77.7},
274         {"date":"20120628","student":97.4,"average":76.6},
275         {"date":"20120629","student":99.6,"average":76.4},
276         {"date":"20120630","student":104.0,"average":78.4},
277         {"date":"20120701","student":101.0,"average":78.8},
278         {"date":"20120702","student":102.0,"average":76.4},
279         {"date":"20120703","student":100.0,"average":76.5},
280         {"date":"20120704","student":97.8,"average":75.8},
281         {"date":"20120705","student":106.0,"average":74.8},
282         {"date":"20120706","student":99.9,"average":74.9},
283         {"date":"20120707","student":103.0,"average":74.7},
284         {"date":"20120708","student":101.0,"average":72.8},
285         {"date":"20120709","student":97.8,"average":73.7},
286         {"date":"20120710","student":96.1,"average":73.1},
287         {"date":"20120711","student":96.3,"average":72.7},
288         {"date":"20120712","student":95.8,"average":72},
289         {"date":"20120713","student":97.2,"average":73.4},
290         {"date":"20120714","student":99.3,"average":74},
291         {"date":"20120715","student":98.9,"average":74},
292         {"date":"20120716","student":99.6,"average":74.5},
293         {"date":"20120717","student":103.0,"average":76.7},
294         {"date":"20120718","student":104.0,"average":77.5},
295         {"date":"20120719","student":95.1,"average":77.1},
296         {"date":"20120720","student":88.4,"average":78.1},
297         {"date":"20120721","student":88.4,"average":77.6},
298         {"date":"20120722","student":92.2,"average":76},
299         {"date":"20120723","student":95.6,"average":76.6},
300         {"date":"20120724","student":102.0,"average":77.8},
301         {"date":"20120725","student":98.4,"average":77.5},
302         {"date":"20120726","student":97.0,"average":76.4},
303         {"date":"20120727","student":99.4,"average":75.3},
304         {"date":"20120728","student":97.4,"average":75},
305         {"date":"20120729","student":92.5,"average":75.6},
306         {"date":"20120730","student":92.9,"average":75.6},
307         {"date":"20120731","student":93.6,"average":75.9},
308         {"date":"20120801","student":95.0,"average":75.4},
309         {"date":"20120802","student":97.7,"average":74.4},
310         {"date":"20120803","student":99.7,"average":73.7},
311         {"date":"20120804","student":99.6,"average":74.1},
312         {"date":"20120805","student":101.0,"average":77.8},
313         {"date":"20120806","student":100.0,"average":78.2},
314         {"date":"20120807","student":95.7,"average":78},
315         {"date":"20120808","student":97.8,"average":77},
316         {"date":"20120809","student":98.6,"average":75},
317         {"date":"20120810","student":97.8,"average":74.8},
318         {"date":"20120811","student":98.5,"average":73},
319         {"date":"20120812","student":98.8,"average":72.5},
320         {"date":"20120813","student":98.6,"average":73.3},
321         {"date":"20120814","student":96.8,"average":73.9},
322         {"date":"20120815","student":96.7,"average":76.2},
323         {"date":"20120816","student":95.9,"average":77.1},
324         {"date":"20120817","student":97.6,"average":75.3},
325         {"date":"20120818","student":92.6,"average":76.2},
326         {"date":"20120819","student":90.4,"average":74.3},
327         {"date":"20120820","student":91.8,"average":73.1},
328         {"date":"20120821","student":93.6,"average":73.4},
329         {"date":"20120822","student":94.7,"average":74.5},
330         {"date":"20120823","student":94.6,"average":75.7},
331         {"date":"20120824","student":96.0,"average":74.8},
332         {"date":"20120825","student":96.2,"average":73.8},
333         {"date":"20120826","student":93.4,"average":76.5},
334         {"date":"20120827","student":94.6,"average":78.3},
335         {"date":"20120828","student":99.4,"average":78.7},
336         {"date":"20120829","student":94.7,"average":77.5},
337         {"date":"20120830","student":93.5,"average":75.9},
338         {"date":"20120831","student":97.9,"average":75.4},
339         {"date":"20120901","student":100.0,"average":75.7},
340         {"date":"20120902","student":95.1,"average":73.1},
341         {"date":"20120903","student":93.5,"average":73.5},
342         {"date":"20120904","student":93.5,"average":72.5},
343         {"date":"20120905","student":97.7,"average":74.5},
344         {"date":"20120906","student":94.2,"average":76.3},
345         {"date":"20120907","student":96.0,"average":76.4},
346         {"date":"20120908","student":97.1,"average":76.5},
347         {"date":"20120909","student":89.7,"average":76.4},
348         {"date":"20120910","student":87.8,"average":75.4},
349         {"date":"20120911","student":84.0,"average":76.2},
350         {"date":"20120912","student":88.1,"average":75.7},
351         {"date":"20120913","student":89.3,"average":74.3},
352         {"date":"20120914","student":90.0,"average":75.2},
353         {"date":"20120915","student":89.3,"average":74.3},
354         {"date":"20120916","student":86.3,"average":72.9},
355         {"date":"20120917","student":87.0,"average":74.8},
356         {"date":"20120918","student":92.8,"average":74.8},
357         {"date":"20120919","student":87.2,"average":76.8},
358         {"date":"20120920","student":82.1,"average":75.4},
359         {"date":"20120921","student":84.0,"average":75.8},
360         {"date":"20120922","student":85.5,"average":75.9},
361         {"date":"20120923","student":85.7,"average":72.8},
362         {"date":"20120924","student":80.4,"average":74.5},
363         {"date":"20120925","student":83.2,"average":73.3},
364         {"date":"20120926","student":88.5,"average":73.6},
365         {"date":"20120927","student":89.2,"average":72.1},
366         {"date":"20120928","student":88.7,"average":72.6},
367         {"date":"20120929","student":82.5,"average":73.9},
368         {"date":"20120930","student":82.3,"average":75.1}]}
John Joseph Ryan
RE: Prime Faces Portlet to show d3.js chart.
May 8, 2013 8:16 PM
Answer

John Joseph Ryan

Rank: New Member

Posts: 15

Join Date: September 21, 2008

Recent Posts

I am able to get the graph to show up using a simple jsp but it isn't inside of a portlet. (see attached)
my view.jsp is as follows. I know I need a component to append to somewhere I just don't know exactly how to go about doing that.
  1
  2<%@ page import="javax.portlet.WindowState" %>
  3<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
  4<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
  5
  6
  7<portlet:defineObjects />
  8
  9<form action="<portlet:actionURL />" method="post" name="<portlet:namespace />fm">
 10<script type="text/javascript" >
 11var margin = {top: 20, right: 20, bottom: 30, left: 50},
 12    width = 960 - margin.left - margin.right,
 13    height = 500 - margin.top - margin.bottom;
 14
 15var parseDate = d3.time.format("%Y%m%d").parse;
 16
 17var x = d3.time.scale()
 18    .range([0, width]);
 19
 20var y = d3.scale.linear()
 21    .range([height, 0]);
 22
 23var xAxis = d3.svg.axis()
 24    .scale(x)
 25    .orient("bottom");
 26
 27var yAxis = d3.svg.axis()
 28    .scale(y)
 29    .orient("left");
 30
 31var line = d3.svg.area()
 32    .interpolate("basis")
 33    .x(function(d) { return x(d.date); })
 34    .y(function(d) { return y(d["student"]); });
 35
 36var area = d3.svg.area()
 37    .interpolate("basis")
 38    .x(function(d) { return x(d.date); })
 39    .y1(function(d) { return y(d["student"]); });
 40
 41var svg = d3.select("body").append("svg")
 42    .attr("width", width + margin.left + margin.right)
 43    .attr("height", height + margin.top + margin.bottom)
 44  .append("g")
 45    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 46var count =0;
 47
 48d3.json("<%=request.getContextPath()%>/data/data.json", function(error, data) {
 49  if(error) return console.warn(error);
 50      data.data.forEach(function(d) {
 51        d.date = parseDate(d.date);
 52        d["student"]= +d["student"];
 53        d["average"] = +d["average"];
 54        count++;
 55       
 56      });
 57
 58  x.domain(d3.extent(data.data, function(d) { return d.date; }));
 59
 60  y.domain([
 61    d3.min(data.data, function(d) { return Math.min(d["student"], d["average"]); }),
 62    d3.max(data.data, function(d) { return Math.max(d["student"], d["average"]); })
 63  ]);
 64
 65  svg.datum(data.data);
 66
 67  svg.append("clipPath")
 68      .attr("id", "clip-below")
 69    .append("path")
 70      .attr("d", area.y0(height));
 71
 72  svg.append("clipPath")
 73      .attr("id", "clip-above")
 74    .append("path")
 75      .attr("d", area.y0(0));
 76
 77  svg.append("path")
 78      .attr("class", "area above")
 79      .attr("clip-path", "url(#clip-above)")
 80      .attr("d", area.y0(function(d) { return y(d["average"]); }));
 81
 82  svg.append("path")
 83      .attr("class", "area below")
 84      .attr("clip-path", "url(#clip-below)")
 85      .attr("d", area);
 86
 87  svg.append("path")
 88      .attr("class", "line")
 89      .attr("d", line);
 90
 91  svg.append("g")
 92      .attr("class", "x axis")
 93      .attr("transform", "translate(0," + height + ")")
 94      .call(xAxis);
 95
 96  svg.append("g")
 97      .attr("class", "y axis")
 98      .call(yAxis)
 99    .append("text")
100      .attr("transform", "rotate(-90)")
101      .attr("y", 6)
102      .attr("dy", ".71em")
103      .style("text-anchor", "end")
104      .text("Grades");
105});
106
107
108
109</script>
110</form>
Attachment

Attachments: Screen Shot 2013-05-08 at 10.12.39 PM.png (78.4k)
John Joseph Ryan
needed to reference div instead of body.
May 9, 2013 7:49 AM
Answer

John Joseph Ryan

Rank: New Member

Posts: 15

Join Date: September 21, 2008

Recent Posts

The solution was quite simple actually. new code below. Create a div and replace "body" with "#divName".
  1
  2<%@ page import="javax.portlet.WindowState" %>
  3<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
  4<%@ taglib uri="http://alloy.liferay.com/tld/aui" prefix="aui" %>
  5
  6
  7<portlet:defineObjects />
  8
  9<form action="<portlet:actionURL />" method="post" name="<portlet:namespace />fm">
 10<div id="svgContainer" ></div>
 11<script type="text/javascript" >
 12var margin = {top: 20, right: 20, bottom: 30, left: 50},
 13    width = 960 - margin.left - margin.right,
 14    height = 500 - margin.top - margin.bottom;
 15
 16var parseDate = d3.time.format("%Y%m%d").parse;
 17
 18var x = d3.time.scale()
 19    .range([0, width]);
 20
 21var y = d3.scale.linear()
 22    .range([height, 0]);
 23
 24var xAxis = d3.svg.axis()
 25    .scale(x)
 26    .orient("bottom");
 27
 28var yAxis = d3.svg.axis()
 29    .scale(y)
 30    .orient("left");
 31
 32var line = d3.svg.area()
 33    .interpolate("basis")
 34    .x(function(d) { return x(d.date); })
 35    .y(function(d) { return y(d["student"]); });
 36
 37var area = d3.svg.area()
 38    .interpolate("basis")
 39    .x(function(d) { return x(d.date); })
 40    .y1(function(d) { return y(d["student"]); });
 41
 42var svg = d3.select("#svgContainer").append("svg")
 43    .attr("width", width + margin.left + margin.right)
 44    .attr("height", height + margin.top + margin.bottom)
 45  .append("g")
 46    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 47var count =0;
 48
 49d3.json("<%=request.getContextPath()%>/data/data.json", function(error, data) {
 50  if(error) return console.warn(error);
 51      data.data.forEach(function(d) {
 52        d.date = parseDate(d.date);
 53        d["student"]= +d["student"];
 54        d["average"] = +d["average"];
 55        count++;
 56       
 57      });
 58
 59  x.domain(d3.extent(data.data, function(d) { return d.date; }));
 60
 61  y.domain([
 62    d3.min(data.data, function(d) { return Math.min(d["student"], d["average"]); }),
 63    d3.max(data.data, function(d) { return Math.max(d["student"], d["average"]); })
 64  ]);
 65
 66  svg.datum(data.data);
 67
 68  svg.append("clipPath")
 69      .attr("id", "clip-below")
 70    .append("path")
 71      .attr("d", area.y0(height));
 72
 73  svg.append("clipPath")
 74      .attr("id", "clip-above")
 75    .append("path")
 76      .attr("d", area.y0(0));
 77
 78  svg.append("path")
 79      .attr("class", "area above")
 80      .attr("clip-path", "url(#clip-above)")
 81      .attr("d", area.y0(function(d) { return y(d["average"]); }));
 82
 83  svg.append("path")
 84      .attr("class", "area below")
 85      .attr("clip-path", "url(#clip-below)")
 86      .attr("d", area);
 87
 88  svg.append("path")
 89      .attr("class", "line")
 90      .attr("d", line);
 91
 92  svg.append("g")
 93      .attr("class", "x axis")
 94      .attr("transform", "translate(0," + height + ")")
 95      .call(xAxis);
 96
 97  svg.append("g")
 98      .attr("class", "y axis")
 99      .call(yAxis)
100    .append("text")
101      .attr("transform", "rotate(-90)")
102      .attr("y", 6)
103      .attr("dy", ".71em")
104      .style("text-anchor", "end")
105      .text("Grades");
106});
107
108
109
110</script>
111</form>