d3.js chart is not displayed

General
1

Hi,

Now, I’m trying to make a diagram with d3.js(JavaScript Charts Library)
With below codes, I can see the result correctly on the browser, but I can’t see anything through HTMLViewer(webkit).
Of course, I have tested other example and see the correct one.
Can you try below one and let me know what is wrong?

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

.name {
  font-weight: bold;
}

.about {
  fill: #777;
  font-size: smaller;
}

.link {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 0, right: 320, bottom: 0, left: 0},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var tree = d3.layout.tree()
    .separation(function(a, b) { return a.parent === b.parent ? 1 : .5; })
    .children(function(d) { return d.parents; })
    .size([height, width]);

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 + ")");
	
	
d3.json("tree.json", function(error, json) {
  if (error) throw error;

  var nodes = tree.nodes(json);

  alert("Inside json");	 
  
  var link = svg.selectAll(".link")
      .data(tree.links(nodes))
    .enter().append("path")
      .attr("class", "link")
      .attr("d", elbow);

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })

  node.append("text")
      .attr("class", "HOST")
      .attr("x", 8)
      .attr("y", -6)
      .text(function(d) { return d.HOST; });

  node.append("text")
      .attr("x", 8)
      .attr("y", 8)
      .attr("dy", ".71em")
      .attr("class", "about lifespan")
      .text(function(d) { return d.PORT + "–" + d.IP; });

  node.append("text")
      .attr("x", 8)
      .attr("y", 8)
      .attr("dy", "1.86em")
      .attr("class", "about VERSION")
      .text(function(d) { return d.VERSION; });
});



function elbow(d, i) {
  return "M" + d.source.y + "," + d.source.x
       + "H" + d.target.y + "V" + d.target.x
       + (d.target.children ? "" : "h" + margin.right);
}

</script>

I used below code in Open event of HTMLViewer.

[code]
  Dim Page As FolderItem
  Page = GetFolderItem("C:\\work\\index.html", FolderItem.PathTypeAbsolute)
  Me.LoadPage Page
[/code]

[code]
tree.json....

{
  "H": "s",
  "P": "1522",
  "IP": "192.168.3.3",
  "V": "25",
  "parents": [
   
  ]
}
[/code]
2

Nothing but a white page here on Chrome Windows…

What you posted does not seem to be the entire page code. Something may be missing. Could you post the file instead ?

3

Oh. Sorry.

link text

4

I am sorry, but Diagram.html does not work in Chrome on PC or now in Mac,. It will not work better in the HTMLViewer.

I believe the file is incomplete. there should me more after if you open it in a text editor.

You may want to download it again from where you got it in the first place.

5

With Firefox, it works well though.
Probably, below ones should be added at that bottom of diagram.html.

6

[quote=204028:@changwon lee]With Firefox, it works well though.
Probably, below ones should be added at that bottom of diagram.html.

[/quote]

I did. That is not enough.

Never assume what works in Firefox will in Internet Explorer, Edge, Chrome and Opera. I always test my apps in these, as well as Safari on Mac.

BTW I just dragged the file over FireFox and it does not work here either.

HTMLViewer on Windows uses the Internet Explorer engine as native rendered, or Webkit, which is also used in a more modern version by Chrome. So if a page does not work in either of these browsers, it will probably not in Xojo.

I vaguely remember you mentioning a site where you got that chart JS. Could you not try downloading it again ?

7

OK. I know what you mean. Let me try that with other browsers first.

8

Yes, you’re right.
I think the html I posted before is something wrong.
With the new one below, I see the correct on in my HTMLViewer.

link text

Thanks for your help.

9

[quote=204086:@changwon lee]Yes, you’re right.
I think the html I posted before is something wrong.
With the new one below, I see the correct on in my HTMLViewer.

link text

Thanks for your help.[/quote]

Glad it works now :slight_smile:

10

Good to see you got it working Changwon.

11

Hi Changwon,

could you upload an example where the example is shown, please? I would like also to do something like that.

Sergio

12

Sergio, you can find an example on D3.js charts here…

https://forum.xojo.com/11937-d3-js-charts-with-xojo-desktop-app

13

Oh, yes, that’s true. Thanks Alwyn, I forgot this example

Sergio

14

I found out the problem I got before.

I tried to use below code to refresh the latest data, however it didn’t work in Chrome, just worked in Firefox/Safari.
d3.json(“treeData.json”, function(error, treeData) {
root = treeData[0];
update(root);
});

According to other ds.js forum, it says:
//d3.json is meant to load data through HTTP. You can set up a local server to serve the data over HTTP.
//For development like this I use firefox, it seems to be more permissive when it comes to local cross origin requests than chrome.

Eventually without http server, we coudln’t use ds.json in HTMLViewer.
My workaround is to just enclose the while JS code with below one.

function updateData(data) {

}

It works.

15

Hi Changwon,

I am trying to learn about D3.js, could you upload an example of your D3.js chart with Xojo, please?

Thank you very much.
Sergio