{"action":"opened","issue":{"url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1392","repository_url":"https://api.github.com/repos/almasaeed2010/AdminLTE","labels_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1392/labels{/name}","comments_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1392/comments","events_url":"https://api.github.com/repos/almasaeed2010/AdminLTE/issues/1392/events","html_url":"https://github.com/almasaeed2010/AdminLTE/issues/1392","id":211645921,"number":1392,"title":"Problem with Pie Chart","user":{"login":"arbitram","id":26162473,"avatar_url":"https://avatars1.githubusercontent.com/u/26162473?v=3","gravatar_id":"","url":"https://api.github.com/users/arbitram","html_url":"https://github.com/arbitram","followers_url":"https://api.github.com/users/arbitram/followers","following_url":"https://api.github.com/users/arbitram/following{/other_user}","gists_url":"https://api.github.com/users/arbitram/gists{/gist_id}","starred_url":"https://api.github.com/users/arbitram/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/arbitram/subscriptions","organizations_url":"https://api.github.com/users/arbitram/orgs","repos_url":"https://api.github.com/users/arbitram/repos","events_url":"https://api.github.com/users/arbitram/events{/privacy}","received_events_url":"https://api.github.com/users/arbitram/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-03-03T10:08:45Z","updated_at":"2017-03-03T10:08:45Z","closed_at":null,"body":"Dear Abdullah\r\n\r\nGreetings. \r\n\r\nWe have been using your AdminLTE and it has been very useful. \r\n\r\nWe were however having some problems in rendering Pie Charts and Doughnut Charts. While the Bar and Line are working fine, the Pie and Doughnut are not working alright. \r\n\r\nI have added the code here for your kind perusal. We might just be making a silly error, it would be great if you could let us know what the error is.\r\n----------------------------------------\r\n  @*@*else if (m.ChartType == \"Pie\")\r\n                                                {\r\n                                                    <div class=\"chart\">\r\n                                                        <canvas id=@m.ID></canvas>\r\n                                                    </div>\r\n                                                    <script type=\"text/javascript\"   src=\"https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.pie.min.js\">\r\n                                                        //var reportDate = $(\".datepicker\").val();\r\n                                                        //var frequency = $(\"#Frequency\").val();\r\n                                                        @*var storedProc = { \"storedProc\": '@m.StoredProc', \"reportDate\": reportDate, \"frequency\": frequency };*@\r\n                                                        var storedProc = { \"storedProc\": '@m.StoredProc',\"year\": year};\r\n                                                        var pieChartCanvas = $(\"#@m.ID\").get(0).getContext(\"2d\");\r\n                                                        var pieChart = new Chart(pieChartCanvas);\r\n\r\n                                                        var PieDataValue = [];\r\n                                                        var PieDataColor = [];\r\n                                                        var PieDataHighlight = [];\r\n                                                        var PieDataKey = [];\r\n\r\n                                                        _//var PieData = [\r\n                                                        //                  {\r\n                                                        //                      value: 700,\r\n                                                        //                      color: \"#f56954\",\r\n                                                        //                      highlight: \"#f56954\"\r\n                                                        //                      label: \"chrome\"\r\n                                                        //},\r\n                                                        //                  {\r\n                                                        //                      value: 500,\r\n                                                        //                      color: \"#00a65a\",\r\n                                                        //                      highlight: \"#00a65a\"\r\n                                                        //                      label: \"ie\"\r\n                                                        //}\r\n                                                        //];_\r\n\r\n                                                       **// Syntax/Approach 1:\r\n                                                        for (var i = 0; i < chartsdata.length; i++) {\r\n                                                            PieData[i].label = chartsdata[i].Key;\r\n                                                            PieData[i].value = chartsdata[i].Value;\r\n                                                        }\r\n\r\n                                                        //Syntax / Approach 2:\r\n                                                        @*@for (var i = 0; i < m.chartsdata.Count; i++)\r\n                                                            {\r\n                                                             @*@:PieDataValue[@i] =  @m.chartsdata[i].Value;\r\n                                                             @:PieDataColor[@i] = \"#fffff\" + i;\r\n                                                             @:PieDataHighlight[@i] = \"#fffff\" + i;\r\n                                                             @:PieDataKey[@i] = '@m.chartsdata[i].Key';\r\n                                                            }*@**\r\n\r\n                                                        //PieData[0].color = \"#f56954\";\r\n                                                        //PieData[1].fillColor = \"#00a65a\";\r\n                                                        //PieData[0].color = \"#f56954\";\r\n                                                        //PieData[1].color = \"#00a65a\";\r\n\r\n                                                        //PieData[0].highlight = \"#f56954\";\r\n                                                        //PieData[1].highlight = \"#00a65a\";\r\n                                                        var pieOptions = {\r\n                                                            //Boolean - Whether we should show a stroke on each segment\r\n                                                            segmentShowStroke: true,\r\n                                                            //String - The colour of each segment stroke\r\n                                                            segmentStrokeColor: \"#fff\",\r\n                                                           //Number - The width of each segment stroke\r\n                                                            segmentStrokeWidth: 2,\r\n                                                            //Number - The percentage of the chart that we cut out of the middle\r\n                                                            percentageInnerCutout: 0, // This is 0 for Pie charts\r\n                                                            //Number - Amount of animation steps\r\n                                                            animationSteps: 100,\r\n                                                            //String - Animation easing effect\r\n                                                            animationEasing: \"easeOutBounce\",\r\n                                                            //Boolean - Whether we animate the rotation of the Doughnut\r\n                                                            animateRotate: true,\r\n                                                            //Boolean - Whether we animate scaling the Doughnut from the centre\r\n                                                            animateScale: false,\r\n                                                            //Boolean - whether to make the chart responsive to window resizing\r\n                                                            responsive: true,\r\n                                                            // Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container\r\n                                                            maintainAspectRatio: true,\r\n                                                            //String - A legend template\r\n                                                            legendTemplate: \"<ul class=\\\"<%=name.toLowerCase()%>-legend\\\"><% for (var i=0; i<segments.length; i++){%><li><span style=\\\"background-color:<%=segments[i].fillColor%>\\\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>\"\r\n                                                        }\r\n                            //Create pie or douhnut chart\r\n                            // You can switch between pie and douhnut using the method below.\r\n                            pieChart.Pie(PieData);\r\n                            //pieChart.Doughnut(PieData);\r\n                             </ script >\r\n                        }\r\n\r\n"}}
{"actor":{"display_login":"arbitram"}}