Forums de discussion
Prime Faces Portlet to show d3.js chart.
John Joseph Ryan, modifié il y a 10 années.
Prime Faces Portlet to show d3.js chart.
New Member Publications: 14 Date d'inscription: 22/09/08 Publications récentes
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
my data.json file
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
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.area.above {
fill: rgb(253, 174, 107);
}
.area.below {
fill: rgb(145,207,96);
}
.line {
fill: none;
stroke: #000;
stroke-width: 1.5px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
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("body").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("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>
my data.json file
{"data":[
{"date":"20111001","student":83.4,"average":82.7},
{"date":"20111002","student":78.1,"average":79.9},
{"date":"20111003","student":73.3,"average":79.1},
{"date":"20111004","student":75.7,"average":78.8},
{"date":"20111005","student":84.2,"average":78.7},
{"date":"20111006","student":78.8,"average":77},
{"date":"20111007","student":77.9,"average":76.7},
{"date":"20111008","student":81.8,"average":76.8},
{"date":"20111009","student":89.3,"average":76.7},
{"date":"20111010","student":91.2,"average":80.1},
{"date":"20111011","student":88.7,"average":81.1},
{"date":"20111012","student":81.8,"average":81.5},
{"date":"20111013","student":83.1,"average":84.3},
{"date":"20111014","student":86.9,"average":87.1},
{"date":"20111015","student":81.7,"average":84.6},
{"date":"20111016","student":81.8,"average":81.6},
{"date":"20111017","student":82.8,"average":81.1},
{"date":"20111018","student":80.8,"average":79.2},
{"date":"20111019","student":82.1,"average":78.9},
{"date":"20111020","student":85.1,"average":77.2},
{"date":"20111021","student":75.6,"average":76.4},
{"date":"20111022","student":74.4,"average":80.7},
{"date":"20111023","student":74.4,"average":85.1},
{"date":"20111024","student":74.8,"average":80.9},
{"date":"20111025","student":77.9,"average":76.1},
{"date":"20111026","student":74.6,"average":74.6},
{"date":"20111027","student":74.4,"average":76.1},
{"date":"20111028","student":62.5,"average":78.1},
{"date":"20111029","student":60.9,"average":77.5},
{"date":"20111030","student":58.6,"average":77.7},
{"date":"20111031","student":64.2,"average":75.1},
{"date":"20111101","student":69.6,"average":77.9},
{"date":"20111102","student":67.2,"average":84.6},
{"date":"20111103","student":70.1,"average":76.2},
{"date":"20111104","student":70.1,"average":70.5},
{"date":"20111105","student":63.5,"average":71.3},
{"date":"20111106","student":63.8,"average":72.6},
{"date":"20111107","student":68.9,"average":71.4},
{"date":"20111108","student":75.5,"average":70.6},
{"date":"20111109","student":73.7,"average":74.6},
{"date":"20111110","student":77.7,"average":75.6},
{"date":"20111111","student":68.5,"average":73.9},
{"date":"20111112","student":66.8,"average":74},
{"date":"20111113","student":71.1,"average":73.8},
{"date":"20111114","student":76.8,"average":73.5},
{"date":"20111115","student":79.7,"average":73.4},
{"date":"20111116","student":76.5,"average":72.2},
{"date":"20111117","student":69.6,"average":72.7},
{"date":"20111118","student":61.5,"average":73.1},
{"date":"20111119","student":64.3,"average":69},
{"date":"20111120","student":74.1,"average":70.4},
{"date":"20111121","student":74.1,"average":71.1},
{"date":"20111122","student":69.4,"average":72.3},
{"date":"20111123","student":70.1,"average":74.6},
{"date":"20111124","student":64.1,"average":75.1},
{"date":"20111125","student":70.3,"average":71.5},
{"date":"20111126","student":72.1,"average":73.6},
{"date":"20111127","student":69.6,"average":72.3},
{"date":"20111128","student":77.2,"average":71},
{"date":"20111129","student":79.1,"average":69.5},
{"date":"20111130","student":70.6,"average":69.8},
{"date":"20111201","student":64.3,"average":80.4},
{"date":"20111202","student":63.9,"average":82.2},
{"date":"20111203","student":62.1,"average":78.3},
{"date":"20111204","student":63.9,"average":72.7},
{"date":"20111205","student":70.2,"average":71.5},
{"date":"20111206","student":74.2,"average":69.9},
{"date":"20111207","student":74.6,"average":68.6},
{"date":"20111208","student":63.4,"average":66.4},
{"date":"20111209","student":62.2,"average":69.8},
{"date":"20111210","student":65.1,"average":72.1},
{"date":"20111211","student":53.8,"average":68.8},
{"date":"20111212","student":56.8,"average":67.4},
{"date":"20111213","student":58.6,"average":67.2},
{"date":"20111214","student":61.9,"average":66.1},
{"date":"20111215","student":69.6,"average":68.8},
{"date":"20111216","student":70.2,"average":67.9},
{"date":"20111217","student":60.6,"average":69.8},
{"date":"20111218","student":49.1,"average":69.1},
{"date":"20111219","student":53.7,"average":68.3},
{"date":"20111220","student":65.8,"average":69.3},
{"date":"20111221","student":67.4,"average":68.4},
{"date":"20111222","student":74.4,"average":73.3},
{"date":"20111223","student":67.8,"average":67.5},
{"date":"20111224","student":54.9,"average":67.9},
{"date":"20111225","student":55.9,"average":68.9},
{"date":"20111226","student":63.6,"average":65.9},
{"date":"20111227","student":62.9,"average":67.2},
{"date":"20111228","student":66.2,"average":68.9},
{"date":"20111229","student":50.8,"average":70.9},
{"date":"20111230","student":60.8,"average":72.9},
{"date":"20111231","student":69.8,"average":70.1},
{"date":"20120101","student":66.3,"average":73.9},
{"date":"20120102","student":63.2,"average":73.1},
{"date":"20120103","student":50.3,"average":69.7},
{"date":"20120104","student":39.2,"average":72.7},
{"date":"20120105","student":52.1,"average":72.6},
{"date":"20120106","student":61.2,"average":69},
{"date":"20120107","student":67.1,"average":71},
{"date":"20120108","student":66.1,"average":76.8},
{"date":"20120109","student":54.7,"average":72.3},
{"date":"20120110","student":59.4,"average":71.6},
{"date":"20120111","student":60.4,"average":69.8},
{"date":"20120112","student":65.4,"average":71.9},
{"date":"20120113","student":60.7,"average":73.7},
{"date":"20120114","student":50.4,"average":72.9},
{"date":"20120115","student":43.9,"average":69.7},
{"date":"20120116","student":42.6,"average":65.3},
{"date":"20120117","student":59.8,"average":63.6},
{"date":"20120118","student":63.2,"average":65},
{"date":"20120119","student":46.3,"average":67.3},
{"date":"20120120","student":52.8,"average":71.4},
{"date":"20120121","student":47.4,"average":73.7},
{"date":"20120122","student":45.1,"average":68.3},
{"date":"20120123","student":59.4,"average":72.9},
{"date":"20120124","student":68.7,"average":69.1},
{"date":"20120125","student":63.1,"average":72.1},
{"date":"20120126","student":57.1,"average":73.6},
{"date":"20120127","student":68.2,"average":70.4},
{"date":"20120128","student":63.7,"average":70.3},
{"date":"20120129","student":60.1,"average":73.8},
{"date":"20120130","student":58.0,"average":71.9},
{"date":"20120131","student":63.5,"average":70},
{"date":"20120201","student":70.4,"average":70},
{"date":"20120202","student":65.8,"average":71.3},
{"date":"20120203","student":57.5,"average":71.5},
{"date":"20120204","student":60.8,"average":72},
{"date":"20120205","student":56.5,"average":73.8},
{"date":"20120206","student":59.1,"average":74.6},
{"date":"20120207","student":63.2,"average":74.3},
{"date":"20120208","student":56.5,"average":71.9},
{"date":"20120209","student":56.5,"average":73.8},
{"date":"20120210","student":58.3,"average":73.9},
{"date":"20120211","student":56.9,"average":72.3},
{"date":"20120212","student":49.7,"average":70.1},
{"date":"20120213","student":53.1,"average":69.5},
{"date":"20120214","student":59.6,"average":68.6},
{"date":"20120215","student":62.3,"average":69.9},
{"date":"20120216","student":59.7,"average":72.4},
{"date":"20120217","student":66.0,"average":69.9},
{"date":"20120218","student":61.2,"average":71.6},
{"date":"20120219","student":59.8,"average":67.8},
{"date":"20120220","student":58.1,"average":68.7},
{"date":"20120221","student":57.1,"average":69.7},
{"date":"20120222","student":65.5,"average":73.4},
{"date":"20120223","student":70.6,"average":74.1},
{"date":"20120224","student":62.7,"average":75.9},
{"date":"20120225","student":62.6,"average":71.7},
{"date":"20120226","student":56.9,"average":67.7},
{"date":"20120227","student":60.9,"average":65.4},
{"date":"20120228","student":65.9,"average":67},
{"date":"20120229","student":60.7,"average":69.8},
{"date":"20120301","student":61.3,"average":68.9},
{"date":"20120302","student":56.8,"average":68.1},
{"date":"20120303","student":67.6,"average":70.7},
{"date":"20120304","student":64.2,"average":75},
{"date":"20120305","student":58.5,"average":68.8},
{"date":"20120306","student":52.9,"average":68.4},
{"date":"20120307","student":63.3,"average":69.9},
{"date":"20120308","student":71.2,"average":69.2},
{"date":"20120309","student":67.8,"average":71.7},
{"date":"20120310","student":57.2,"average":69.3},
{"date":"20120311","student":62.9,"average":70},
{"date":"20120312","student":68.8,"average":68.6},
{"date":"20120313","student":72.6,"average":73.9},
{"date":"20120314","student":80.5,"average":75.2},
{"date":"20120315","student":67.2,"average":75.9},
{"date":"20120316","student":64.7,"average":74.6},
{"date":"20120317","student":68.2,"average":68.2},
{"date":"20120318","student":68.2,"average":67.1},
{"date":"20120319","student":73.1,"average":65.8},
{"date":"20120320","student":77.8,"average":69.7},
{"date":"20120321","student":77.5,"average":71.4},
{"date":"20120322","student":77.3,"average":71.4},
{"date":"20120323","student":81.7,"average":68.4},
{"date":"20120324","student":75.8,"average":69},
{"date":"20120325","student":68.4,"average":66.4},
{"date":"20120326","student":69.8,"average":69.7},
{"date":"20120327","student":59.6,"average":74.1},
{"date":"20120328","student":69.7,"average":74.6},
{"date":"20120329","student":76.8,"average":72.3},
{"date":"20120330","student":66.5,"average":74.5},
{"date":"20120331","student":62.2,"average":76.2},
{"date":"20120401","student":65.3,"average":71.1},
{"date":"20120402","student":68.1,"average":70.5},
{"date":"20120403","student":71.2,"average":72.2},
{"date":"20120404","student":81.0,"average":70.6},
{"date":"20120405","student":70.7,"average":67.9},
{"date":"20120406","student":68.0,"average":67.4},
{"date":"20120407","student":71.1,"average":69.4},
{"date":"20120408","student":75.7,"average":70},
{"date":"20120409","student":78.3,"average":71.3},
{"date":"20120410","student":75.0,"average":73.8},
{"date":"20120411","student":69.0,"average":72.9},
{"date":"20120412","student":71.7,"average":73.9},
{"date":"20120413","student":73.1,"average":70.2},
{"date":"20120414","student":75.2,"average":70.9},
{"date":"20120415","student":82.3,"average":71.5},
{"date":"20120416","student":82.9,"average":71.9},
{"date":"20120417","student":89.3,"average":73.2},
{"date":"20120418","student":79.0,"average":73},
{"date":"20120419","student":74.1,"average":75.1},
{"date":"20120420","student":76.5,"average":75.8},
{"date":"20120421","student":78.2,"average":78},
{"date":"20120422","student":72.4,"average":72.8},
{"date":"20120423","student":71.6,"average":75.1},
{"date":"20120424","student":69.3,"average":77.9},
{"date":"20120425","student":72.5,"average":77.5},
{"date":"20120426","student":70.5,"average":75.3},
{"date":"20120427","student":71.9,"average":73.5},
{"date":"20120428","student":67.4,"average":74.7},
{"date":"20120429","student":74.1,"average":74},
{"date":"20120430","student":71.9,"average":73.4},
{"date":"20120501","student":77.4,"average":72.7},
{"date":"20120502","student":73.7,"average":70.7},
{"date":"20120503","student":73.1,"average":72.6},
{"date":"20120504","student":77.2,"average":73.4},
{"date":"20120505","student":77.0,"average":73.1},
{"date":"20120506","student":76.6,"average":76.5},
{"date":"20120507","student":74.6,"average":75.3},
{"date":"20120508","student":77.9,"average":72},
{"date":"20120509","student":79.2,"average":72.4},
{"date":"20120510","student":81.1,"average":73.4},
{"date":"20120511","student":79.7,"average":73.1},
{"date":"20120512","student":84.1,"average":69.9},
{"date":"20120513","student":85.3,"average":72},
{"date":"20120514","student":84.2,"average":76},
{"date":"20120515","student":82.0,"average":73},
{"date":"20120516","student":83.8,"average":71},
{"date":"20120517","student":84.5,"average":71.4},
{"date":"20120518","student":81.0,"average":72.2},
{"date":"20120519","student":82.6,"average":72.4},
{"date":"20120520","student":86.2,"average":74.5},
{"date":"20120521","student":82.7,"average":72.8},
{"date":"20120522","student":83.7,"average":73.9},
{"date":"20120523","student":86.4,"average":76.5},
{"date":"20120524","student":84.5,"average":74.7},
{"date":"20120525","student":85.4,"average":72.5},
{"date":"20120526","student":89.4,"average":72.1},
{"date":"20120527","student":91.9,"average":72.2},
{"date":"20120528","student":94.4,"average":72.9},
{"date":"20120529","student":95.9,"average":72.1},
{"date":"20120530","student":92.9,"average":72.1},
{"date":"20120531","student":92.5,"average":73.3},
{"date":"20120601","student":87.2,"average":74.8},
{"date":"20120602","student":88.3,"average":74},
{"date":"20120603","student":87.7,"average":72.3},
{"date":"20120604","student":81.9,"average":75.3},
{"date":"20120605","student":78.3,"average":73.5},
{"date":"20120606","student":81.7,"average":74.1},
{"date":"20120607","student":86.7,"average":73.9},
{"date":"20120608","student":88.7,"average":74.4},
{"date":"20120609","student":92.2,"average":75},
{"date":"20120610","student":92.6,"average":80},
{"date":"20120611","student":89.2,"average":77.2},
{"date":"20120612","student":86.9,"average":75.1},
{"date":"20120613","student":86.7,"average":73.3},
{"date":"20120614","student":87.7,"average":73.4},
{"date":"20120615","student":88.5,"average":74.6},
{"date":"20120616","student":87.5,"average":77},
{"date":"20120617","student":84.2,"average":75.6},
{"date":"20120618","student":81.7,"average":72.5},
{"date":"20120619","student":86.4,"average":73.9},
{"date":"20120620","student":97.9,"average":75.3},
{"date":"20120621","student":108.0,"average":73.3},
{"date":"20120622","student":102.0,"average":74.1},
{"date":"20120623","student":97.0,"average":75.2},
{"date":"20120624","student":95.4,"average":75.8},
{"date":"20120625","student":90.9,"average":76.8},
{"date":"20120626","student":85.9,"average":77.5},
{"date":"20120627","student":93.5,"average":77.7},
{"date":"20120628","student":97.4,"average":76.6},
{"date":"20120629","student":99.6,"average":76.4},
{"date":"20120630","student":104.0,"average":78.4},
{"date":"20120701","student":101.0,"average":78.8},
{"date":"20120702","student":102.0,"average":76.4},
{"date":"20120703","student":100.0,"average":76.5},
{"date":"20120704","student":97.8,"average":75.8},
{"date":"20120705","student":106.0,"average":74.8},
{"date":"20120706","student":99.9,"average":74.9},
{"date":"20120707","student":103.0,"average":74.7},
{"date":"20120708","student":101.0,"average":72.8},
{"date":"20120709","student":97.8,"average":73.7},
{"date":"20120710","student":96.1,"average":73.1},
{"date":"20120711","student":96.3,"average":72.7},
{"date":"20120712","student":95.8,"average":72},
{"date":"20120713","student":97.2,"average":73.4},
{"date":"20120714","student":99.3,"average":74},
{"date":"20120715","student":98.9,"average":74},
{"date":"20120716","student":99.6,"average":74.5},
{"date":"20120717","student":103.0,"average":76.7},
{"date":"20120718","student":104.0,"average":77.5},
{"date":"20120719","student":95.1,"average":77.1},
{"date":"20120720","student":88.4,"average":78.1},
{"date":"20120721","student":88.4,"average":77.6},
{"date":"20120722","student":92.2,"average":76},
{"date":"20120723","student":95.6,"average":76.6},
{"date":"20120724","student":102.0,"average":77.8},
{"date":"20120725","student":98.4,"average":77.5},
{"date":"20120726","student":97.0,"average":76.4},
{"date":"20120727","student":99.4,"average":75.3},
{"date":"20120728","student":97.4,"average":75},
{"date":"20120729","student":92.5,"average":75.6},
{"date":"20120730","student":92.9,"average":75.6},
{"date":"20120731","student":93.6,"average":75.9},
{"date":"20120801","student":95.0,"average":75.4},
{"date":"20120802","student":97.7,"average":74.4},
{"date":"20120803","student":99.7,"average":73.7},
{"date":"20120804","student":99.6,"average":74.1},
{"date":"20120805","student":101.0,"average":77.8},
{"date":"20120806","student":100.0,"average":78.2},
{"date":"20120807","student":95.7,"average":78},
{"date":"20120808","student":97.8,"average":77},
{"date":"20120809","student":98.6,"average":75},
{"date":"20120810","student":97.8,"average":74.8},
{"date":"20120811","student":98.5,"average":73},
{"date":"20120812","student":98.8,"average":72.5},
{"date":"20120813","student":98.6,"average":73.3},
{"date":"20120814","student":96.8,"average":73.9},
{"date":"20120815","student":96.7,"average":76.2},
{"date":"20120816","student":95.9,"average":77.1},
{"date":"20120817","student":97.6,"average":75.3},
{"date":"20120818","student":92.6,"average":76.2},
{"date":"20120819","student":90.4,"average":74.3},
{"date":"20120820","student":91.8,"average":73.1},
{"date":"20120821","student":93.6,"average":73.4},
{"date":"20120822","student":94.7,"average":74.5},
{"date":"20120823","student":94.6,"average":75.7},
{"date":"20120824","student":96.0,"average":74.8},
{"date":"20120825","student":96.2,"average":73.8},
{"date":"20120826","student":93.4,"average":76.5},
{"date":"20120827","student":94.6,"average":78.3},
{"date":"20120828","student":99.4,"average":78.7},
{"date":"20120829","student":94.7,"average":77.5},
{"date":"20120830","student":93.5,"average":75.9},
{"date":"20120831","student":97.9,"average":75.4},
{"date":"20120901","student":100.0,"average":75.7},
{"date":"20120902","student":95.1,"average":73.1},
{"date":"20120903","student":93.5,"average":73.5},
{"date":"20120904","student":93.5,"average":72.5},
{"date":"20120905","student":97.7,"average":74.5},
{"date":"20120906","student":94.2,"average":76.3},
{"date":"20120907","student":96.0,"average":76.4},
{"date":"20120908","student":97.1,"average":76.5},
{"date":"20120909","student":89.7,"average":76.4},
{"date":"20120910","student":87.8,"average":75.4},
{"date":"20120911","student":84.0,"average":76.2},
{"date":"20120912","student":88.1,"average":75.7},
{"date":"20120913","student":89.3,"average":74.3},
{"date":"20120914","student":90.0,"average":75.2},
{"date":"20120915","student":89.3,"average":74.3},
{"date":"20120916","student":86.3,"average":72.9},
{"date":"20120917","student":87.0,"average":74.8},
{"date":"20120918","student":92.8,"average":74.8},
{"date":"20120919","student":87.2,"average":76.8},
{"date":"20120920","student":82.1,"average":75.4},
{"date":"20120921","student":84.0,"average":75.8},
{"date":"20120922","student":85.5,"average":75.9},
{"date":"20120923","student":85.7,"average":72.8},
{"date":"20120924","student":80.4,"average":74.5},
{"date":"20120925","student":83.2,"average":73.3},
{"date":"20120926","student":88.5,"average":73.6},
{"date":"20120927","student":89.2,"average":72.1},
{"date":"20120928","student":88.7,"average":72.6},
{"date":"20120929","student":82.5,"average":73.9},
{"date":"20120930","student":82.3,"average":75.1}]}
John Joseph Ryan, modifié il y a 10 années.
RE: Prime Faces Portlet to show d3.js chart.
New Member Publications: 14 Date d'inscription: 22/09/08 Publications récentes
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.
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.
<%@ 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">
<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("body").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>
Pièces jointes:
John Joseph Ryan, modifié il y a 10 années.
needed to reference div instead of body. (Réponse)
New Member Publications: 14 Date d'inscription: 22/09/08 Publications récentes
The solution was quite simple actually. new code below. Create a div and replace "body" with "#divName".
<%@ 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>