Home/ Questions/Q 9228205
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T05:15:57+00:00

i sucessfully rendered d3js area chart in a html page here is the code

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0