From b446bba9b2c49714a55502ae41c8bf8cf895fd6b Mon Sep 17 00:00:00 2001
From: dilumn <dilumnavanjana@gmail.com>
Date: Sun, 30 Apr 2017 16:48:15 +0530
Subject: [PATCH] added answered unanswered ration chart

---
 JSON/answered_unanswered.json                 | 74 +++++++++++++++++++
 .../answeredUnansweredchart.controller.js     | 54 ++++++++++++++
 .../answeredUnansweredchart.html              | 10 +++
 index.html                                    |  5 ++
 4 files changed, 143 insertions(+)
 create mode 100644 JSON/answered_unanswered.json
 create mode 100644 app/answeredUnansweredChart/answeredUnansweredchart.controller.js
 create mode 100644 app/answeredUnansweredChart/answeredUnansweredchart.html

diff --git a/JSON/answered_unanswered.json b/JSON/answered_unanswered.json
new file mode 100644
index 0000000..a4dc9c8
--- /dev/null
+++ b/JSON/answered_unanswered.json
@@ -0,0 +1,74 @@
+{
+  "c#": {
+    "answered": 614350,
+    "unanswered": 420233
+  },
+  "c++": {
+    "answered": 297149,
+    "unanswered": 189159
+  },
+  "c": {
+    "answered": 143845,
+    "unanswered": 92532
+  },
+  "php": {
+    "answered": 547185,
+    "unanswered": 461896
+  },
+  "ruby": {
+    "answered": 108528,
+    "unanswered": 64379
+  },
+  "java": {
+    "answered": 623905,
+    "unanswered": 555034
+  },
+  "python": {
+    "answered": 388806,
+    "unanswered": 280728
+  },
+  "objective-c": {
+    "answered": 161024,
+    "unanswered": 109054
+  },
+  "javascript": {
+    "answered": 715221,
+    "unanswered": 559072
+  },
+  "haskell": {
+    "answered": 22395,
+    "unanswered": 8122
+  },
+  "erlang": {
+    "answered": 4766,
+    "unanswered": 2245
+  },
+  "perl": {
+    "answered": 34789,
+    "unanswered": 19402
+  },
+  "scala": {
+    "answered": 37783,
+    "unanswered": 22024
+  },
+  "r": {
+    "answered": 95312,
+    "unanswered": 67616
+  },
+  "swift": {
+    "answered": 63624,
+    "unanswered": 62455
+  },
+  "go": {
+    "answered": 13063,
+    "unanswered": 6306
+  },
+  "rust": {
+    "answered": 4280,
+    "unanswered": 1283
+  },
+  "elixir": {
+    "answered": 2122,
+    "unanswered": 998
+  }
+}
\ No newline at end of file
diff --git a/app/answeredUnansweredChart/answeredUnansweredchart.controller.js b/app/answeredUnansweredChart/answeredUnansweredchart.controller.js
new file mode 100644
index 0000000..9c06089
--- /dev/null
+++ b/app/answeredUnansweredChart/answeredUnansweredchart.controller.js
@@ -0,0 +1,54 @@
+(function (angular) {
+  'use strict';
+
+  var answeredUnansweredController = function ($scope, $http) {
+
+    $http.get('JSON/answered_unanswered.json')
+    .then(function(res){
+      $scope.tags = res.data;
+      manageJson();
+      manageData();
+    });
+
+    $scope.tagSelect = function(value){
+      $scope.selectedTag = value;
+      if ($scope.tags){
+        manageData();
+      }
+    }
+
+    $scope.tagList = [];
+    $scope.labels = [];
+    $scope.data = [];
+    $scope.selectedTag = {id: "javascript", name: "javascript"};
+
+    $scope.colours = ['#72C02C', '#3498DB'];
+
+
+    var manageData = function(){
+      $scope.labels = [];
+      $scope.data = [];
+
+      for (var year in $scope.tags[$scope.selectedTag.id]) {
+        $scope.labels.push(year);
+        $scope.data.push($scope.tags[$scope.selectedTag.id][year]);
+      }
+    }
+
+    var manageJson = function() {
+      var count = 0;
+      for (var tag in $scope.tags) {
+        var object = {};
+        object.id = tag;
+        object.name = tag
+        $scope.tagList.push(object);
+      }
+    };
+
+  };
+
+  answeredUnansweredController.$inject = ['$scope', '$http'];
+
+  angular.module('myapp').controller('AnsweredUnansweredController', answeredUnansweredController);
+
+})(angular);
\ No newline at end of file
diff --git a/app/answeredUnansweredChart/answeredUnansweredchart.html b/app/answeredUnansweredChart/answeredUnansweredchart.html
new file mode 100644
index 0000000..7677d2e
--- /dev/null
+++ b/app/answeredUnansweredChart/answeredUnansweredchart.html
@@ -0,0 +1,10 @@
+<div class="chart-block" ng-controller="AnsweredUnansweredController" class="box-layout">
+  <h4 class="pull-left">Answered Unanswered ratio Chart</h4>
+
+  <st-dropdown model="selectedTag" datasource="tagList" selectcallback="tagSelect(value)"></st-dropdown>
+
+  <canvas id="tagsoveryears" class="chart chart-pie" chart-data="data" chart-labels="labels" chart-colors="colours">> </canvas>
+
+  <p class="pull-left">Answered Unanswered ratio chart shows the number of answered & unanswered questions were there for each programming language tag. If you want any other Programming langulage to compare, create an issue in our repository. We will add it as well.</p>
+
+</div>
diff --git a/index.html b/index.html
index e3f9994..7e84960 100644
--- a/index.html
+++ b/index.html
@@ -54,6 +54,9 @@
             <li>
               <a href="#toptagchart">Toptag chart</a>
             </li>
+            <li>
+              <a href="#toptagchart">Answered Unanswered ratio Chart</a>
+            </li>
             <li>
               <a href="#monthlychart">Monthly chart</a>
             </li>
@@ -66,6 +69,7 @@
           <div id="tagsoveryearsChart" ng-include="'app/tagsoveryearsChart/tagsoveryearschart.html'"></div>
           <div id="locationrepChart" ng-include="'app/locationRepChart/locationRepchart.html'"></div>
           <div id="toptagchart" ng-include="'app/toptagChart/toptagchart.html'"></div>
+          <div id="toptagchart" ng-include="'app/answeredUnansweredChart/answeredUnansweredchart.html'"></div>
           <div id="monthlychart" ng-include="'app/monthlyChart/monthlychart.html'"></div>
         </div>
       </div>
@@ -82,6 +86,7 @@
   <script type="text/javascript" src="app/toptagChart/toptagchart.controller.js"></script>
   <script type="text/javascript" src="app/tagsoveryearsChart/tagsoveryearschart.controller.js"></script>
   <script type="text/javascript" src="app/locationRepChart/locationRepchart.controller.js"></script>
+  <script type="text/javascript" src="app/answeredUnansweredChart/answeredUnansweredchart.controller.js"></script>
   <script type="text/javascript" src="app/footer.controller.js"></script>
 
   <!-- Core -->