AnsweredAssumed Answered

Modifying Javascript To Plot in a Web Viewer

Question asked by laguna92651 on May 19, 2017
Latest reply on May 23, 2017 by laguna92651

I am in the process of learning to do charting with the d3 library, however I'm not developing for a web page but to chart in a Filemaker database.

I have the following code from a d3 charting tutorial, which plots a bar chart. (Only showing the first part of the code, don't believe the rest is relevant?)

I am using a FileMaker web viewer and Execute SQL to grab and format the data from Filemaker to put into an array that matches the hard coded data shown in the example code, I have the d3.min.js library on the layout.

 

The code works fine in Filemaker with the hard coded data, shown here, commented out on line 66, var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];.

When I replaced the hard coded data with the lines below, the Execute SQL generated array is placed in the global variable merge field <<$$D3.DATA.SORT2>>. The Execute SQL array looks like the hard coded data array.

 

Line 63

    var sort2 = [<<$$D3.DATA.SORT2>>];

    var dataset = d3.entries(sort2);

 

I do not get the chart. Removing the css section doesn't seem to make a difference, hard coded data works and SQL generated data still does not work with the css portion removed.

Is there something I have to remove or add to the code?  Is there a way to see the data that I'm bringing in from Excute SQL in javascript?

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3: Ascending and descending sorts</title>
    <script type="text/javascript" src="d3.js"></script>
    <style type="text/css">

//The <head></head>is the css code

        body {
            background-color: gray;
        }
        /* New rules for styling buttons */
        #buttonContainer {
            margin-bottom: 10px;
        }
        button {
            padding: 15px;
        }
        svg {
            background-color: white;
        }
        g.bar text {
            font-family: sans-serif;
            font-size: 11px;
            fill: white;
            font-style: bold;
            text-anchor: middle;
            opacity: 0;
        }
        g.bar.highlight text {
            opacity: 1;
        }
        g.bar.highlight rect {
            fill: Maroon;
        }
        .axis path,
        .axis line {
            fill: none;
            stroke: black;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: sans-serif;
            font-size: 11px;
        }
    </style>
</head>
<body>
    <!-- New buttons to trigger sorting! -->
    <div id="buttonContainer">
        <button id="sortAscending">Sort Ascending</button>
        <button id="sortDescending">Sort Descending</button>
    </div>
    <script type="text/javascript">
        //Width, height, padding
        var w = 600;
        var h = 250;
        var padding = 25;

        //Array of data values
                  var sort2 = [<<$$D3.DATA.SORT2>>];
                  var dataset = d3.entries(sort2);

        /*var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                        11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];*/

        //Configure x and y scale functions
        var xScale = d3.scale.ordinal()
                        .domain(d3.range(dataset.length))
                        .rangeRoundBands([ padding, w - padding ], 0.05);
        var yScale = d3.scale.linear()
                        .domain([ 0, d3.max(dataset) ])
                        .rangeRound([ h - padding, padding ]);
        //Configure y axis generator
        var yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left")
                        .ticks(5);
        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        var xScale = d3.scale.ordinal()
                        .domain(d3.range(dataset.length))
                        .rangeRoundBands([ padding, w - padding ], 0.05);
        var yScale = d3.scale.linear()
                        .domain([ 0, d3.max(dataset) ])
                        .rangeRound([ h - padding, padding ]);
        //Configure y axis generator
        var yAxis = d3.svg.axis()
                        .scale(yScale)
                        .orient("left")
                        .ticks(5);
        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

Outcomes