NG Client and d3.js

Forum to discuss the new web client version of Servoy.

NG Client and d3.js

Postby swingman » Wed Oct 11, 2017 7:16 pm

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...
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1173
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: NG Client and d3.js

Postby rvanderburg » Wed Oct 11, 2017 10:24 pm

In NG client you don't need a webview, yu just do everything in a component which basically is a <div>
rvanderburg
Site Admin
 
Posts: 50
Joined: Wed May 04, 2011 10:28 am

Re: NG Client and d3.js

Postby swingman » Thu Oct 12, 2017 11:36 am

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 <div> with some id.
Code: Select all
<div id="bar-demo"></div>


2. add link to the d3.js library in the header of the page to make it available.
Code: Select all
<script src="https://d3js.org/d3.v4.min.js"></script>


3. add the javascript to execute
Code: Select all
<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?
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1173
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: NG Client and d3.js

Postby swingman » Thu Oct 12, 2017 4:20 pm

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

http://busypeoples.github.io/post/reusa ... lar-d3-js/
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1173
Joined: Wed Oct 01, 2003 10:20 am
Location: London

Re: NG Client and d3.js

Postby rvanderburg » Thu Oct 12, 2017 5:09 pm

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
rvanderburg
Site Admin
 
Posts: 50
Joined: Wed May 04, 2011 10:28 am

Re: NG Client and d3.js

Postby swingman » Thu Oct 12, 2017 8:39 pm

Thanks you for this, I will try creating a component in the IDE and use the Chart component as a reference.
Christian Batchelor
Certified Servoy Developer
Batchelor Associates Ltd, London, UK
http://www.batchelorassociates.co.uk

http://www.postgresql.org - The world's most advanced open source database.
User avatar
swingman
 
Posts: 1173
Joined: Wed Oct 01, 2003 10:20 am
Location: London


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 2 guests

cron