d3.js code in not working on JPS

Question

I am new in d3.js and i am trying to make a d3.js program in JSP. I have a two files 1) HTML 2) javascript

now when i linked javascript in HTML file then it shows pie chart.

Problem: when i am trying to run this code in jsp and its not working? I dont understand that just by changing the extension from html to jsp, why the program was stop showing pie chart?

your suggestions would be helpful...

this is the code-

This is the JSP file

<html>
<head>
<link rel="stylesheet" type="text/css" href="background.css" />
<script type="text/javascript" src="libss/d3.js" charset="UTF-8"></script>
<script type="text/javascript" src="libss/d3.min.js" charset="UTF-8"></script>
<script src="http://d3js.org/d3.v3.js" charset="UTF-8"></script>
</style>
</head>
<body>
<script type="text/javascript" src=" E:\javaa\data_vis\data-vis-new\libss\temp.js">        
 </script>  
<script>     
dataset = [ 7, 66, 20, 45, 6, 25 ];
</script>
 </body>
</html>

and this is temp.js file-

//Width and height
var w = 300;
var h = 300;
var outerRadius = w / 2;
var innerRadius = 0;
var arc = d3.svg.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
var pie = d3.layout.pie();
//Easy colors accessible via a 10-step ordinal scale
var color = d3.scale.category10();
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);

//Set up groups
var arcs = svg.selectAll("g.arc")
.data(pie(dataset))
.enter()
.append("g")
.attr("class", "arc")
.attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

//Draw arc paths
arcs.append("path")
.attr("fill", function(d, i) {
    return color(i);
})
.attr("d", arc);

//Labels
arcs.append("text")
.attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d) {
    return d.value;
});

What **exactly** isn't working? Where are you getting errors? — mkobit, Dec 01 '14 at 04:39
Are you getting the HTML file on the browser? If you open up the developer console on Chrome/Firefox/IE and look at the network tab, does the `lib/pie.js` download file get a `200` Status Code when downloaded? If you open up the `console` are there JavaScript errors? — mkobit, Dec 01 '14 at 05:56
@MikeKobit the problem is that its working on simple html pae but if i transfer the coe to jsp then its not showing the pie chart. — Rohitz -zust stay here, Dec 01 '14 at 12:25
src=" E:\javaa\data_vis\data-vis-new\libss\temp.js" ? why you path like this? — huan feng, Dec 02 '14 at 03:51
@huanfeng can you explain me, what is the problem in this way? — Rohitz -zust stay here, Dec 03 '14 at 00:10
Usually we refer to script by relative path to webRootPath. http://stackoverflow.com/questions/6395367/absolute-file-path-for-java-script — huan feng, Dec 03 '14 at 07:35
@huanfeng see, If i use .html file in place if .jsp file then same code run successfully but if i use .JSP file in .html file then its not working. I beleive code is perfect, may be in java, there ia a another way to use it — Rohitz -zust stay here, Dec 03 '14 at 22:03
@huanfeng plz dont say this. I have developed half application and can't go back. please try to help me. — Rohitz -zust stay here, Dec 04 '14 at 02:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/66174/discussion-between-rohitz-zust-stay-here-and-huan-feng). — Rohitz -zust stay here, Dec 04 '14 at 04:47

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

This is because you didn't put the script tag in the right place.

Solution #1

Simply try move your scripts lib into bottom of body:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>

  </head>

  <body> 

    ...
    // try import it here
    <script type="text/javascript" src="lib/pie.js"></script>

  </body>

</html>

plnkr

Solution #2

If you insists putting the lib into head, try adding a defer attribute in script element:

<head>
    <meta charset="utf-8">
    <title>D3: Pie layout</title>
    <script type="text/javascript" src="http://d3js.org/d3.v3.min.js" defer></script>
    <script type="text/javascript" src="lib/pie.js" defer></script>
    <script>
      dataset = [1,2,3,4,5];
     </script>
</head>

For reasons why your code can not work, see this thread:

Where is the best place to put tags in HTML markup

edited May 23 '17 at 11:56

Community

1
1

answered Dec 01 '14 at 05:53

huan feng

7,307
2
32
56

sorry, i wrote the wrong code. The actual code is exact the same as you suggested. My real problem is that these code is not working on jsp. – Rohitz -zust stay here Dec 01 '14 at 12:27
could you update the code you pasted? so i can see if there is another place incorrect. – huan feng Dec 02 '14 at 02:40
i have updated the real code. Now here temp.js file must create pie chart on jsp page but its not creating. i dont know why? – Rohitz -zust stay here Dec 02 '14 at 03:29

score 1 · Accepted Answer · answered Dec 04 '14 at 04:30

I get the answer. I did not get the logic my program start working without any problem.

Here is the solution-

just placed your own .js file below the dataset variable like this...

<body>
<script>     
dataset = [ 7, 66, 20, 45, 6, 25 ];
</script>
<script type="text/javascript" src=" E:\javaa\data_vis\data-vis-new\libss\temp.js">        
 </script>  
</body>

if u dont get it just comment above with @ and my name and will tell you later...

d3.js code in not working on JPS

2 Answers2