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?