NG Client and d3.js

Classic Servoy
1

Hi all,

I use d3.js, (see https://github.com/d3/d3/wiki/Gallery) to generate complicated graphics in the Servoy smart client.
To do this, I put a svyJFXWebView on a form, construct a web page containing the the d3.js javascript code to generate the graphic.
Loading the page into the svyJFXWebView executes the javascript code in the page to generate my SVG image.

What component do I use in the NG client to replace the svyJFXWebView?

I tried a HTML view, but it does not seem to do anything… maybe I’m not thinking the right way…

2

In NG client you don’t need a webview, yu just do everything in a component which basically is a

3

Great that sounds easy. The problem is I don’t know where to start.

Take this simple bar-chart example – the code is much shorter than what I use:

If is was a normal webpage, I would

  1. add a
    with some id.
<div id="bar-demo"></div>
  1. add link to the d3.js library in the header of the page to make it available.
<script src="https://d3js.org/d3.v4.min.js"></script>
  1. add the javascript to execute
<script type="text/javascript">
var data = [{year: 2006, books: 54},
            {year: 2007, books: 43},
            {year: 2008, books: 41},
            {year: 2009, books: 44},
            {year: 2010, books: 35}];

var barWidth = 40;
var width = (barWidth + 10) * data.length;
var height = 200;

var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
var y = d3.scale.linear().domain([0, d3.max(data, function(datum) { return datum.books; })]).
  rangeRound([0, height]);

// add the canvas to the DOM
var barDemo = d3.select("#bar-demo").
  append("svg:svg").
  attr("width", width).
  attr("height", height);

barDemo.selectAll("rect").
  data(data).
  enter().
  append("svg:rect").
  attr("x", function(datum, index) { return x(index); }).
  attr("y", function(datum) { return height - y(datum.books); }).
  attr("height", function(datum) { return y(datum.books); }).
  attr("width", barWidth).
  attr("fill", "#2d578b");
</code>

I’m in the Servoy form editor. How do I do these three things?

4

I have found this on who to do D3.js with Angular…

http://busypeoples.github.io/post/reusa … lar-d3-js/

5

You just make a new webcomponent. If you do that from the ide it will create the scaffolding for it. Including the div
It will also create a js file for you.

Read the docs here: https://wiki.servoy.com/display/DOCS/WebComponents

You can also check out https://github.com/Servoy/svyChartJS which is simial to what you are trying to do, but with a different lib for charts

6

Thanks you for this, I will try creating a component in the IDE and use the Chart component as a reference.