6 Replies Latest reply on Jan 3, 2017 7:22 AM by benettaleb

    use framework d3js in filemaker

    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>"

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