benettaleb

use framework d3js in filemaker

Discussion created by benettaleb on Jan 3, 2017
Latest reply on Jan 3, 2017 by benettaleb

i went to use d3js in my project to show chart

i create version for test i put code like that in web viewer

and is never work ??

--------------------------------------------------------------------------------

"data:text/html,<!DOCTYPE html>

<html>

<body>

        <script src=\"https://d3js.org/d3.v3.min.js\"></script>

        <script src=\"https://d3js.org/d3.v4.min.js\"></script>

  <script>

        var dataArray = [20, 40, 50, 60];

       

        var width = 500;

        var height = 500;

       

        var linearScale = d3.scaleLinear()

                                    .domain([0, 60])

                                    .range([0, width]);

       

        var color = d3.scaleLinear()

                        .domain([0, 60])

                        .range([\"red\", \"green\"]);

       

        var axis = d3.axisBottom(linearScale)

                        .ticks(10);

       

        var canvas = d3.select(\"body\")

                        .append(\"svg\")

                        .attr(\"width\", width)

                        .attr(\"height\", height)

                        .append(\"g\")

                        .attr(\"transform\", \"translate(20, 0)\")

       

        var bars = canvas.selectAll(\"rect\")

                            .data(dataArray)

                            .enter()

                                .append(\"rect\")

                                .attr(\"width\", function(d) { return linearScale(d); })

                                .attr(\"height\", 50)

                                .attr(\"fill\", function(d) { return color(d); })

                                .attr(\"y\", function(d, i) { return i * 100 });

       

        canvas.append(\"g\")

            .attr(\"transform\", \"translate(0, 400)\")

            .call(axis);

        /* var circle = canvas.append(\"circle\")

                            .attr(\"cx\", 250)

                            .attr(\"cy\", 250)

                            .attr(\"r\", 50)

                            .attr(\"fill\", \"red\");

        var rect = canvas.append(\"rect\")

                            .attr(\"width\", 100)

                            .attr(\"height\", 50);

        var line = canvas.append(\"line\")

                            .attr(\"x1\", 0)

                            .attr(\"y1\", 1000)

                            .attr(\"x2\", 400)

                            .attr(\"y2\", 400)

                            .attr(\"stroke\", \"green\")

                            .attr(\"stroke-width\", 10); */

  </script>

</body>

</html>"

---------------------------------------------------------------------------------

Outcomes