1 2 3 Previous Next 32 Replies Latest reply on Jun 8, 2017 9:31 PM by laguna92651

    D3 Pie Chart Passing Parameter

    laguna92651

      I am implementing a D3 pie chart, I am having trouble getting the "onclick" event to work. If I try to pass a constant as the parameter, 50, things work fine.

      But if I try to pass d.amt as the parameter, the global field that I am storing it in says undefined. The data is in a array of objects.

      var dataset = [ {key: 1, amt: 5}, {key: 2, amt: 10}, {key: 3, amt: 20}, {key: 4, amt: 41}, {key: 5, amt: 6}, {key: 6, amt: 25} ];

       

      At the beginning of the code I have,

      var script = encodeURI('fmp://$/{{FileName}}?script=SliceClick'); that I am passing the parameter to, to execute the Filemaker script SliceClick.

       

      This will pass the parameter 50.

           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=" + 50  + "'";

              });

       

      This does not pass the parameter d.amt.

              ...

              .attr("onclick", function(d, i){

                  return "location.href='" + script + "&param=" + d.amt  + "'";

              });

       

      Any ideas what I'm missing?

        • 1. Re: D3 Pie Chart Passing Parameter
          jbrown

          I erased my original response.

          I wonder if the key needs to be in quotes.

           

          I see an example of the d3js pie chart's data:

          data = [{"label":"one", "value":20},
            {"label":"two", "value":50},
            {"label":"three", "value":30}];

          Maybe that's why it's not getting passed?

          • 2. Re: D3 Pie Chart Passing Parameter
            jbrown

            hmm. this may not work, since you're key is 'amt'. . . .

            • 3. Re: D3 Pie Chart Passing Parameter
              laguna92651

              I was just going to say that, your data is an array, my format is for an array of objects. I tried it and it didn't work. Any other thoughts, I'm just starting to learn D3 so struggling a bit.

              • 4. Re: D3 Pie Chart Passing Parameter
                jbrown

                See above. I erased my original answer.

                the D3 stuff is tricky. I'm using c3js, which is a sort of tool to deal with D3 Js stuff.

                 

                C3.js | D3-based reusable chart library

                 

                I prefer this one. In my opinion easier to use.

                1 of 1 people found this helpful
                • 5. Re: D3 Pie Chart Passing Parameter
                  laguna92651

                  Do I just replace the D3.min.js with C3.js?  I tried pasting the pie code into a text field on my layout and didn't get a pie chart. Is there something else I need to copy over? I took a quick look at the c3 site are there examples to pass a parameter on the site, didn't see one on first pass. Could you repaste the code you had before,I want to try a pie chart with just an array, I deleted the layout I had done with your onclick code. I tried put quotes around the key names and the pie chart didn't plot at all.

                   

                  I see the C3 help where do I place this code? C3.js | D3-based reusable chart library

                   

                  Then, load the scripts and css:

                  <!-- Load c3.css --> <link href="/path/to/c3.css" rel="stylesheet" type="text/css">  

                  <!-- Load d3.js and c3.js -->

                  <script src="/path/to/d3.v3.min.js" charset="utf-8"></script>
                  <script src="/path/to/c3.min.js"></script>
                  • 6. Re: D3 Pie Chart Passing Parameter
                    jbrown

                    !Here's a sample file of a pie chart using the C3JS.

                    I've got the data in the Data 1 field. It allows me to set the data via scripting and update the information as needed.

                    You're welcome to use all this code; load the libraries in your file into fields (I would only store the code in fields) and update the Data 1 as needed.

                     

                    And here's a link to a blog post I wrote and a full set of web viewer library integrations. This provides a great background on how this is set up.

                    • 7. Re: D3 Pie Chart Passing Parameter
                      laguna92651

                      Sorry, I posted before I saw your response I will go through your example, thanks Jeremy.

                      • 8. Re: D3 Pie Chart Passing Parameter
                        jbrown

                        Here's a better one. I reorganized it a bit better and cleaned up some code.

                        1 of 1 people found this helpful
                        • 9. Re: D3 Pie Chart Passing Parameter
                          laguna92651

                          Thanks Jermey, the Web Viewer Integration Library looks really great, just reviewed the videos.

                          Also looked the the initial pie chart not the most recent. I am assuming I would make desired changes to the JSFunction field, what would I change if I wanted to pass the parameter to a script called SliceClick?

                          • 10. Re: D3 Pie Chart Passing Parameter
                            jbrown

                            I've my code set up to put the script name in the ScriptCalled field. the callc field that runs the web viewer substitutes out placeholder text and puts in the script name text in that field

                            • 11. Re: D3 Pie Chart Passing Parameter
                              laguna92651

                              In the example the script your running is ShowSpecificData? I removed the Show Message box and did a Set Field to a global field, g_passed_parameter and used Get(ScriptParameter) to grab the parameter. That worked fine in PieChart.frmp12 but in PieChart2.fmp12  I get an error message, "The file PieChart.zip could not be opened, either the host is not available..." Actually in PieChart2 it gave the error before I made any modifications.

                               

                              What is this data for?

                              ['x', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],

                              ['x', '2010', '2011', '2012', '2013', '2014', '2015', '2016', '2017'],

                               

                              I was working my way up to 3 pieces of data, [Name, Value, ID] it is the ID for a pie slice that I actually want to pass back to FM, so I can generate data for the slice in a portal. How would I get at the ID from the array?

                              • 12. Re: D3 Pie Chart Passing Parameter
                                jbrown

                                Hi.
                                Look at the 2nd file. It is cleaned up. I adapted a bar chart from C3 to work here and failed to remove extraneous information in the code.

                                All you need for the pie chart is

                                ['pears', 45], ['apples', 32] and so on.

                                 

                                The pie chart seems to be limited in what you can include in the arrays. So it should be necessary, I think, to pass the category (pears, apples, etc) to FileMaker thru the script parameter, and find that way.

                                • 13. Re: D3 Pie Chart Passing Parameter
                                  laguna92651

                                  Okay I see that the x data is not in chart 2. How about the error I get instead of the Show Dialog Message box?

                                  • 14. Re: D3 Pie Chart Passing Parameter
                                    jbrown

                                    Hi.

                                    Apologies. I changed the file name via the finder, and neglected to do something in the calc field to update the file name.

                                    To fix: go to Manage Database, and go to the field "HTML_Calc"

                                    Make it unstored–double-click on the field, go to storage and check "Do not store". this will allow the function Get(FileName) to refresh and run again, getting the new name of the file "PieChart2" instead of "PieChart".

                                     

                                    Close this dialog and test it out by clicking a wedge.

                                    That should work (It did in my copy when I downloaded it from an above response.

                                     

                                    You can go back to the storage of the calc and make it to be stored again if you wish.

                                     

                                    Jeremy

                                    1 of 1 people found this helpful
                                    1 2 3 Previous Next