diff --git a/tomcat/webapps/Trawl/about.html b/tomcat/webapps/Trawl/about.html
index 2e5b1c7bb61002993ccff95ff4a508a77d1c6d9d..2f0ec2149357d82fe9dd430e92898b488a6ecf47 100644
--- a/tomcat/webapps/Trawl/about.html
+++ b/tomcat/webapps/Trawl/about.html
@@ -1,32 +1,38 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta name="keywords" content="insert, some, keywords"> <!--TODO-->
- <meta name="description" content="insert a description"> <!--TODO-->
- <title>About|TrawlTool</title>
- <link rel="stylesheet" type="text/css" href="style.css">
-
- <!--Fonts-->
- <!--Open Sans Rg-400/Semi-600/Bd-700-->
- <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
-</head>
-<body>
- <header>
- <div class="headerWrapper">
- <a href="index.jsp" >TrawlTool</a>
- <span class="nav-bar">
- <a href="about.html">About</a> |
- <a href="index.jsp" target="_blank">Gitlab/Github Nonfunc!</a>
- </span>
- </div>
- </header>
-
- <section>
- Insert some info about the project, blah blah blah.<br>
- Add photo credit if applicable
- </section>
-
-</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="keywords" content="insert, some, keywords"> <!--TODO-->
+ <meta name="description" content="insert a description"> <!--TODO-->
+ <title>About|TrawlTool</title>
+ <link rel="stylesheet" type="text/css" href="style.css">
+ <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+
+ <!--Fonts-->
+ <!--Open Sans Rg-400/Semi-600/Bd-700-->
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
+</head>
+<body>
+ <header>
+ <div class="headerWrapper">
+ <a href="index.jsp" >TrawlTool</a>
+ <span class="nav-bar">
+ <a href="about.html">About</a> |
+ <a href="index.jsp" target="_blank">Gitlab/Github Nonfunc!</a>
+ </span>
+ </div>
+ </header>
+
+ <section>
+ Insert some info about the project, blah blah blah.<br>
+ Add photo credit if applicable
+ </section>
+
+ <div id="histogram">
+
+ </div>
+
+</body>
+<script src="histogram.js"></script>
</html>
\ No newline at end of file
diff --git a/tomcat/webapps/Trawl/histogram.js b/tomcat/webapps/Trawl/histogram.js
new file mode 100644
index 0000000000000000000000000000000000000000..60ab9c4aa64defe8488ef10a164529ce77b6cbe8
--- /dev/null
+++ b/tomcat/webapps/Trawl/histogram.js
@@ -0,0 +1,36 @@
+function histogram(x,y){
+ console.log("Histogram")
+ var data = [
+ { x: x,
+ y: y,
+ type: 'bar',
+ marker: {
+ color: 'blue',
+ },
+ }
+ ];
+
+ var layout = {
+ title: 'Individual count vs Year',
+ xaxis:{title: 'Year',
+ type: 'category',
+ titlefont: {
+ family: 'Courier New, monospace',
+ size: 18,
+ color: '#7f7f7f'
+ }
+ },
+ yaxis:{title: 'Individual count',
+ titlefont: {
+ family: 'Courier New, monospace',
+ size: 18,
+ color: '#7f7f7f'
+ }
+ }
+ }
+ Plotly.newPlot('histogram', data,layout);
+
+}
+
+window.onload = histogram([1990,1991,1992],[54656,65654,32555]);
+
diff --git a/tomcat/webapps/Trawl/histogram.jsp b/tomcat/webapps/Trawl/histogram.jsp
index e3121761dc2245a488d75908f763bef204afb90c..5744844826ad0c987ba7565efe04c957213943d2 100644
--- a/tomcat/webapps/Trawl/histogram.jsp
+++ b/tomcat/webapps/Trawl/histogram.jsp
@@ -1,59 +1,34 @@
<%@ page import="java.util.*, data.Record, model.TrawlExpert, search.BST, search.BasicSearchResult" %>
-<head>
- <!-- Plotly.js -->
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
-</head>
+<%@page import="org.json.simple.JSONArray"%>
+<%@page import="org.json.simple.parser.JSONParser"%>
-<body>
-
- <div id="histogram"><!-- Plotly chart will be drawn inside this DIV --></div>
- <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
- <script>
-
- <%
+<%
TrawlExpert te = (TrawlExpert)request.getServletContext().getAttribute("trawl");
BasicSearchResult result = te.rangeSearch(2, 1960, 2016);
BST<Integer, Integer> histogram = result.histogram();
Iterable<Integer> results = histogram.keys();
- out.print("var y=[];");
- out.print("var x=[];");
+
+ JSONParser parser = new JSONParser();
+
+
+ JSONObject js = new JSONObject();
+ JSONArray x = new JSONArray();
+ JSONArray y = new JSONArray();
+
+
for (Integer year: results){
- out.print("\ty.push("+ histogram.get(year) +");\n");
- out.print("\tx.push('"+ year +"');\n");
+ x.add(year);
+ y.add(histogram.get(year));
}
+
+ js.put("year", x);
+ js.put("individualCount", y);
+
+ out.print(js.toJSONString());
+
- %>
-
- var data = [
- { x: x,
- y: y,
- type: 'bar',
- marker: {
- color: 'blue',
- },
- }
- ];
+%>
- var layout = {
- title: 'Individual count vs Year',
- xaxis:{title: 'Year',
- type: 'category',
- titlefont: {
- family: 'Courier New, monospace',
- size: 18,
- color: '#7f7f7f'
- }
- },
- yaxis:{title: 'Individual count',
- titlefont: {
- family: 'Courier New, monospace',
- size: 18,
- color: '#7f7f7f'
- }
- }
- }
- Plotly.newPlot('histogram', data,layout);
- </script>
-</body>
\ No newline at end of file
+
\ No newline at end of file