From 4437dcd159dd3077636c32be0d57655c98ae4759 Mon Sep 17 00:00:00 2001
From: madiabs <mha6@uw.edu>
Date: Thu, 30 Jul 2015 20:25:19 -0700
Subject: [PATCH] added basic chart visuals

---
 .../templates/mapvisuals/charts.html          | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 jobvisualization/apps/mapvisuals/templates/mapvisuals/charts.html
diff --git a/jobvisualization/apps/mapvisuals/templates/mapvisuals/charts.html b/jobvisualization/apps/mapvisuals/templates/mapvisuals/charts.html
new file mode 100644
index 0000000..38a3d21
--- /dev/null
+++ b/jobvisualization/apps/mapvisuals/templates/mapvisuals/charts.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <link rel="stylesheet" href="c3/c3.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
+  <script src="c3/c3.min.js"></script></head>
+<body>
+
+  <h1>Hello Chart</h1>
+  <div id="chart"></div>
+  <div id="chart2"></div>
+
+ <script>
+    var results = [{"skills": "\n\t\t\t\tRuby on Rails, JavaScript, Git, MySQL, Object Oriented Programming, Agile/Scrum methodologies, Service Oriented Architecture - Ruby on Rails, JavaScript, Git, MySQL, Object Oriented Programming, Agile/Scrum methodologies, Service Oriented Architecture\n\t\t\t", "salary": 110000, "title": "Ruby on Rails Developer - 100% Remote / Work From Home!", "location": "Seattle, WA", "posted": "Posted 12 hours ago"},
+{"skills": "\n\t\t\t\t*Full Stack* developer on .Net technologies, Front end frameworks like ReactJS, AngularJS and CSS framework like Bootstrap.\n\t\t\t", "salary": null, "title": "*Full Stack* developer on .Net technologies", "location": "Seattle, WA", "posted": "Posted 16 hours ago"},
+{"skills": "\n\t\t\t\teCommerce Systems Design/Development, Core Java, Spring Security, Spring MVC, B2B Data exchanges, AWS, TEST DRIVEN Automation of Java web apps, Web Services (REST/XML), Oracle PL/SQL - eCommerce Systems Design/Development, Core Java, Spring Security, Spring MVC, B2B Data exchanges, AWS, TEST DRIVEN Automation of Java web apps, Web Services (REST/XML), Oracle PL/SQL\n\t\t\t", "salary": null, "title": "Sr. eCommerce Software Engineer - Java/Spring", "location": "Seattle, WA", "posted": "Posted 12 hours ago"},
+{"skills": "\n\t\t\t\tjava, j2ee, jsp, spring, hibernate, nosql, sql, mongodb, hadoop, spark, mahout, agile, scrum, coding, api, web api, big data\n\t\t\t", "salary": 120000, "title": "Sr. Java Developers (not the coffee kind!)", "location": "Seattle, WA", "posted": "Posted 2 days ago"},
+{"skills": "\n\t\t\t\tJava, postgressql, jaxb, jobx soa, agile, scrum, hibernate, jpa, ORM, Maven...\n\t\t\t", "salary": null, "title": "Java Developer", "location": "Seattle, WA", "posted": "Posted 1 week ago"},
+{"skills": "\n\t\t\t\tsoftware engineer open source Linux design patterns AWS MS SQL MySQL Mongo Hadoop Agile C# javascript AngularJS Backbone.js Node.js memcachedb Perl XML XSL T-SQL SOA Apache IIS NoSQL CRM VOIP\n\t\t\t", "salary": null, "title": "Software Engineer - Functional Programming", "location": "Seattle, WA", "posted": "Posted 5 days ago"},
+{"skills": "\n\t\t\t\tScala, Java, C++/C#, JavaScript, OOP, SQL, NoSQL, Linux\n\t\t\t", "salary": null, "title": "Java Developer (Scala, JavaScript, etc.)", "location": "Bellevue, WA", "posted": "Posted 1 week ago"},
+{"skills": "\n\t\t\t\tAlgorithm, Avionics, Developer, Development, Hardware, HTTP, Industrial Design, Middleware, Recruiter\n\t\t\t", "salary": null, "title": "Senior Software Developer-Senior Designer", "location": "Everett, WA", "posted": "Posted 13 hours ago"},
+{"skills": "\n\t\t\t\tOpen Source, PHP, Linux, Javascript, SQL\n\t\t\t", "salary": null, "title": "Lead Software Engineer", "location": "Seattle, WA", "posted": "Posted 1 day ago"},
+{"skills": "\n\t\t\t\t3 new ios Android developers / 1 Automotive application engineer / 1 Automotive Cloud Connect engineer\n\t\t\t", "salary": null, "title": "ios/Android developers", "location": "Kirkland, WA", "posted": "Posted 2 weeks ago"},
+{"skills": "\n\t\t\t\t.NET Development\n\t\t\t", "salary": null, "title": ".NET Developer", "location": "Seattle, WA", "posted": "Posted 2 weeks ago"},
+{"skills": "\n\t\t\t\tRuby 2.2, Rails 4.0, HTML, CSS, JQuery, NoSQL, TDD, Agile\n\t\t\t", "salary": null, "title": "Software Development Engineer - Ruby on Rails", "location": "Seattle, WA", "posted": "Posted 6 hours ago"},
+{"skills": "\n\t\t\t\tAndroid\n\t\t\t", "salary": 90000, "title": "Mobile Software Engineer (Android)", "location": "Seattle, WA", "posted": "Posted 2 days ago"},
+{"skills": "\n\t\t\t\tsee job description\n\t\t\t", "salary": null, "title": "Software Development Engineer, Personalization", "location": "Seattle, WA", "posted": "Posted 6 days ago"},
+{"skills": "\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t", "salary": null, "title": "Senior Mac Developer", "location": "Seattle, WA", "posted": "Posted 14 hours ago"},
+{"skills": "\n\t\t\t\tLeadership Coding expertise Architecture\n\t\t\t", "salary": null, "title": "Senior Software Development Engineer - GeoTech", "location": "Seattle, WA", "posted": "Posted 6 days ago"},
+{"skills": "\n\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t", "salary": null, "title": "Sr. Software Design Engineer", "location": "Kirkland, WA", "posted": "Posted 14 hours ago"},
+{"skills": "\n\t\t\t\tC++, CSS, Database, Data Collection, Developer, Development, Graphic Designer, GUI, HTML, Java, JavaScript, Linux, Manager, Management, Multi-threaded, Oracle, Programming, Quality Assurance, Software Engineer, SQL, Supervisor, Testing, Unix, XML\n\t\t\t", "salary": null, "title": "Software Engineer", "location": "Seattle, WA", "posted": "Posted 49 minutes ago"},
+{"skills": "\n\t\t\t\tBackbone.JS, HTML5/CSS3, Angular.js, Knockout.js, Node.JS - Backbone.JS, HTML5/CSS3, Angular.js, Knockout.js, Node.JS\n\t\t\t", "salary": null, "title": "Front End Developer - Backbone.JS, HTML5/CSS3, Angular.js", "location": "Seattle, WA", "posted": "Posted 12 hours ago"},
+{"skills": "\n\t\t\t\tAgile, Analysis, Apache, Architecture, Automated, Browser, CSS, Database, Data Modeling, Development, HTML, Hudson, J2EE, Java, JavaScript, jQuery, JSP, Linux, Management, Metrics, Modeling, OOD, Oracle, PL/SQL, QA, Sales, Security, Software Engineer, SQL, Subversion, Testing, Unix, Validation, Version Control, XML\n\t\t\t", "salary": null, "title": "Software Engineer, Application Development-IPC", "location": "Redmond, WA", "posted": "Posted 2 days ago"},
+]
+
+    var languages = {
+      "javascript": 0,
+      "python": 0,
+      "php": 0,
+      "ruby": 0
+    }
+
+    for (var i = 0; i < results.length; i++){
+      var js = results[i].skills.search(/javascript/i);
+      if(js != -1){
+        languages["javascript"] ++;
+      }
+      var py = results[i].skills.search(/python/i);
+      if(py != -1){
+        languages["python"] ++;
+      }
+      var php = results[i].skills.search(/php/i);
+      if(php != -1){
+        languages["php"] ++;
+      }
+      var ruby = results[i].skills.search(/ruby/i);
+      if(ruby != -1){
+        languages["ruby"] ++;
+      }
+
+    }
+  var total = languages.javascript + languages.python + languages.php + languages.ruby;
+
+
+    console.log(languages);
+    console.log("total language hits: " + total);
+
+  var chart = c3.generate({
+    bindto: '#chart',
+    data: {
+        // iris data from R
+        columns: [
+            ["javascript", languages.javascript],
+            ["python", languages.python],
+            ["php", languages.php],
+            ["ruby", languages.ruby]
+        ],
+        type : 'pie',
+        onclick: function (d, i) { console.log("onclick", d, i); },
+        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
+        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
+    }
+});
+var avNum;
+var minNum = 0;
+var maxNum = 0;
+var totalNum = 0;
+var countNum = 0;
+
+for (var n = 0; n < results.length; n++){
+  if(results[n].salary){
+    if(minNum == 0){
+      minNum = results[n].salary;
+    } else if (results[n].salary < minNum){
+      minNum = results[n].salary;
+    }
+    if(results[n].salary > maxNum){
+      maxNum = results[n].salary
+    }
+    totalNum += results[n].salary
+    countNum ++
+  }
+}
+var avNum = Math.floor(totalNum / countNum);
+console.log(avNum);
+console.log(minNum);
+console.log(maxNum);
+console.log(countNum)
+console.log(totalNum);
+
+var chart = c3.generate({
+    bindto: '#chart2',
+    data: {
+        columns: [
+            ['data', avNum]
+        ],
+        type: 'gauge',
+        onclick: function (d, i) { console.log("onclick", d, i); },
+        onmouseover: function (d, i) { console.log("onmouseover", d, i); },
+        onmouseout: function (d, i) { console.log("onmouseout", d, i); }
+    },
+    gauge: {
+       label: {
+           format: function(value, ratio) {
+               return value;
+           },
+           show: false // to turn off the min/max labels.
+       },
+   min: minNum, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
+   max: maxNum, // 100 is default
+   units: ' ',
+   width: 60 // for adjusting arc thickness
+    },
+    color: {
+        pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
+        threshold: {
+//            unit: 'value', // percentage is default
+//            max: 200, // 100 is default
+            values: [30, 60, 90, 100]
+        }
+    },
+    size: {
+        height: 180
+    }
+});
+
+  </script>
+</body>
+</html>
