CODEWITHSUNDEEP
d3.jschartsd3plus
Mohamed Cherradi
Mohamed Cherradi

Reputation: 11

Uncaught TypeError: d3plus.Pie is not a constructor

I want to make a Pie Chart based on d3plus library. I try with below code (But i have a problem, d3plus.Pie is not a constructor) 

<html>
    <head>
        <title>D3Plus</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3plus/1.9.8/d3plus.full.js"></script>
    </head>
    <body>


        <script>
            var myData = [
              {"Group": "Store", "Sub-Group": "Convenience Store", "Number of Food Stores": 100},
              {"Group": "Store", "Sub-Group": "Grocery Store", "Number of Food Stores": 150},
              {"Group": "Store", "Sub-Group": "Farmer's Market", "Number of Food Stores": 50},
              {"Group": "Store", "Sub-Group": "Supercenters", "Number of Food Stores": 30},
              {"Group": "Restaurant", "Sub-Group": "Fast-Food Restaurant", "Number of Food Stores": 60},
              {"Group": "Restaurant", "Sub-Group": "Full-Service Restaurant", "Number of Food Stores": 120}
            ];

            new d3plus.Pie()
              .config({
                data: myData,
                groupBy: ["Group", "Sub-Group"],
                value: function(d) {
                  return d["Number of Food Stores"];
                }
              })
              .render();
        </script>
    </body>
</html>

Upvotes: 1

Views: 904

Answers (1)

calmar
calmar

Reputation: 1959

It seems like you need a different source including hierarchy 

https://d3plus.org/js/d3plus-hierarchy.v0.8.full.min.js"


<html>
    <head>
        <title>D3Plus</title>
  
        <script type="text/javascript" src="https://d3plus.org/js/d3plus-hierarchy.v0.8.full.min.js"></script>
    </head>
    <body>


        <script>
            var myData = [
              {"Group": "Store", "Sub-Group": "Convenience Store", "Number of Food Stores": 100},
              {"Group": "Store", "Sub-Group": "Grocery Store", "Number of Food Stores": 150},
              {"Group": "Store", "Sub-Group": "Farmer's Market", "Number of Food Stores": 50},
              {"Group": "Store", "Sub-Group": "Supercenters", "Number of Food Stores": 30},
              {"Group": "Restaurant", "Sub-Group": "Fast-Food Restaurant", "Number of Food Stores": 60},
              {"Group": "Restaurant", "Sub-Group": "Full-Service Restaurant", "Number of Food Stores": 120}
            ];
            new d3plus.Pie()
              .config({
                data: myData,
                groupBy: ["Group", "Sub-Group"],
                value: function(d) {
                  return d["Number of Food Stores"];
                }
              })
              .render();
        </script>
    </body>
</html>

d3plus modules list can be found at https://github.com/d3plus

Upvotes: 1

Related Questions