Modify Pie Chart code to use with array of objects

Question

I am in the process of learning charting with the d3 library, I'm not developing for a web page but am using a web viewer within a Filemaker database. I have the following code, which plots a pie chart with d3.min.js library. The pie chart plots fine using the data array shown, however I am trying to plot the pie chart using the array of objects also shown. I can't seem to get things formatted correctly for an array of objects dataset. What would I need to change to format correctly?

Secondly where would I add the onclick attribute,

 .attr("onclick", function(d, i){
                    return "location.href='" + script + "&param=" + d.value[0]  + "'";
        });

so I can run a Filemaker script when I click on a pie slice? Is this the correct location and syntax to grab the x object value, currently I have it under var arcs?

<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Pie layout, pie chart</title>
<script type="text/javascript" src="d3.js"></script>

<style type="text/css">

    body {
        background-color: white;         //color of chart background
    }

    svg {
        background-color: white;       //color of smaller rectangle behind pit
    }

    text {
        font-family: sans-serif;
        font-size: 12px;
        fill: white;
    }

</style>
</head>
<body>
<script type="text/javascript">

    var script = encodeURI('fmp://$/{{FileName}}?script=BarClick');

    var w = 300;
    var h = 300;
    var dataset = [ {x: 1,y: 5}, {x: 2,y: 10}, {x: 3,y: 20}, {x: 4,y: 45}, {x: 5,y: 6}, {x: 6,y: 25} ];      
    //var dataset = [ 5, 10, 20, 45, 6, 25 ];
    var outerRadius = w / 2;
    var innerRadius = 0;
    var arc = d3.svg.arc()
                    .innerRadius(innerRadius)
                    .outerRadius(outerRadius);

    var pie = d3.layout.pie();

    var color = d3.scale.category20();

    var svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    var arcs = svg.selectAll("g.arc")
                  .data(pie(dataset))
                  .enter()
                  .append("g")
                  .attr("class", "arc")
                  .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
              .attr("onclick", function(d, i){
                    return "location.href='" + script + "&param=" + d.value[0]  + "'";
        });   

    arcs.append("path")
        .attr("fill", function(d, i) {
            return color(i);
        })
        .attr("d", arc);

    arcs.append("text")
        .attr("transform", function(d) {
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function(d) {
            return d.value;
        });

</script>
</body>
</html>

Gerardo Furtado · Accepted Answer · 2017-05-25 00:12:08Z

4

Since you have an array of objects, you need to specify the value you want to use in each object on your pie generator. In your case, using y:

var pie = d3.layout.pie()
    .value(function(d) { return d.y; });

Here is your updated code:

    var w = 300;
    var h = 300;
    var dataset = [{
      x: 1,
      y: 5
    }, {
      x: 2,
      y: 10
    }, {
      x: 3,
      y: 20
    }, {
      x: 4,
      y: 45
    }, {
      x: 5,
      y: 6
    }, {
      x: 6,
      y: 25
    }];
    var outerRadius = w / 2;
    var innerRadius = 0;
    var arc = d3.svg.arc()
      .innerRadius(innerRadius)
      .outerRadius(outerRadius);

    var pie = d3.layout.pie()
      .value(function(d) {
        return d.y;
      });

    var color = d3.scale.category20();

    var svg = d3.select("body")
      .append("svg")
      .attr("width", w)
      .attr("height", h);

    var arcs = svg.selectAll("g.arc")
      .data(pie(dataset))
      .enter()
      .append("g")
      .attr("class", "arc")
      .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");

    arcs.append("path")
      .attr("fill", function(d, i) {
        return color(i);
      })
      .attr("d", arc);

    arcs.append("text")
      .attr("transform", function(d) {
        return "translate(" + arc.centroid(d) + ")";
      })
      .attr("text-anchor", "middle")
      .text(function(d) {
        return d.value;
      });

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

answered May 25, 2017 at 0:12

Gerardo Furtado

102k9 gold badges128 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user8038235 Over a year ago

I tired the code as is and with the tags I had in the code originally, but it would not render. I actually had tried .value(function(d) { return d.y; }); prior to posting with no luck, that is the only change you make right? Any suggestions on what I might be missing?

Gerardo Furtado Over a year ago

What do you mean by not render? Just click "run snippet", it's clearly working.

user8038235 Over a year ago

Yes, it is drawing the chart here, but when I copy it to the web viewer in Filemaker I do not get the chart. So I am missing doing something correctly when I copy it to the Filemaker web viewer, any ideas?

Gerardo Furtado Over a year ago

In that case you have a different problem. Since I see you are new at SO, let me advise you to please ask just 1 problem per question. The specific problem in this question (dealing with an array of objects), as you can see, was solved. You can ask a new question regarding this filemaker problem. Also, accepting the answer shows to future users that the proposed solution works.

Collectives™ on Stack Overflow

Modify Pie Chart code to use with array of objects

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related