Menu
i sucessfully rendered d3js area chart in a html page here is the code which is rendering sucessfully in chrome or mozilla.The name of the file is say temp.html.Here is the code
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js graphs and charts libraries</title>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.js"></script>
<body>
<div id="dbar">
</div>
<script type="text/javascript">
var margin = {top:10, right: 20, bottom: 30,left: 40},
width = 960 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var svg = d3.select ("#dbar").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 parseDate = d3.time.format("%m-%Y").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 area = d3.svg.area().x(function(d) { return x(d.date); })
.y0(height)
.y1(function(d) { return y(d.count); });
d3.json("data/json.json", function(error, data) {
data.StoreVisitGraphCount.list.forEach(function(d) {
d.date = parseDate(d.date);
d.count = +d.count;
});
//console.log(data.StoreVisitGraphCount.list);
x.domain(d3.extent(data.StoreVisitGraphCount.list, function(d) {
return d.date; }));
y.domain([0, d3.max(data.StoreVisitGraphCount.list, function(d) {
return d.count; })]);
console.log(data.StoreVisitGraphCount.list);
svg.append("path")
.datum(data.StoreVisitGraphCount.list)
.attr("class", "area")
.attr("d", area);
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("Price ($)");
});
</script>
</body>
</html>
But when i am copy pasting this code to say "temp.jsp" page its not rendering and chart is not coming.I am running this page on tomcat server.
need suggestions
879
It is not because you saved it as jsp or html page. You need to add charset="UTF-8" to your script declaration as d3.js uses UTF characters.
eg.
<script src="http://d3js.org/d3.v3.js" charset="UTF-8"></script>
answered Dec 03 '25 05:12
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With