title: d3 js pie chart is not showing even there is not error in web browser console. and SVG is getting append
body: <p>I am using C# for programming the back end with MVC 4 design pattern. I have created one controller that binds data on which is stored in <code>viewdata</code> with controller. Here is the JSON that I stored in <code>viewdata["monthTrip"]</code> in the controller.</p>
  
  <pre><code>"[{\"label\":\"August-2017\",\"value\":\"35470\",\"color\":\"#582D92\"},{\"label\":\"December-2017\",\"value\":\"33598\",\"color\":\"#582D92\"},{\"label\":\"January-2018\",\"value\":\"22203\",\"color\":\"#582D92\"},{\"label\":\"July-2017\",\"value\":\"24633\",\"color\":\"#582D92\"},{\"label\":\"November-2017\",\"value\":\"41667\",\"color\":\"#582D92\"},{\"label\":\"October-2017\",\"value\":\"35546\",\"color\":\"#582D92\"},{\"label\":\"September-2017\",\"value\":\"31224\",\"color\":\"#582D92\"}]"
  </code></pre>
  
  <p>Here is the javascript code as a part of cshtml</p>
  
  <pre><code>$(document).ready(function(){
              var pie = new d3pie("tripMonthsChart", {
                  "size": {
                      "canvasHeight": 270,
                      "canvasWidth": 320,
                      "pieInnerRadius": "45%",
                      "pieOuterRadius": "65%"
                  },
                  "data": {
                      "sortOrder": "value-desc",
                      "content": JSON.parse(@Html.Raw(Json.Encode(ViewBag.monthTrip)))
                  },
                  "labels": {
                      "inner": {
                          "format": "value"
                      },
                      "mainLabel": {
                          "fontSize": 16
                      },
                      "percentage": {
                          "color": "#ffffff",
                          "decimalPlaces": 0
                      },
                      "value": {
                          "color": "#000000",
                          "fontSize": 18
                      },
                      "lines": {
                          "enabled": true,
                          "style": "straight"
                      },
                      "truncation": {
                          "enabled": true
                      }
                  },
                  "tooltips": {
                      "enabled": true,
                      "type": "placeholder",
                      "string": "{label}: {value} ({percentage}%)",
                      "styles": {
                          "fontSize": 18
                      }
                  },
                  "effects": {
                      "pullOutSegmentOnClick": {
                          "speed": 400,
                          "size": 8
                      }
                  }
              });
          });
  </code></pre>