diff --git a/package.json b/package.json
index 60c81a6c..81fad796 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "vue-splitpane": "1.0.4",
     "vue-upload-component": "^2.8.20",
     "vuedraggable": "2.20.0",
+    "vuejs-datepicker": "^1.6.2",
     "vuex": "3.1.0",
     "xlsx": "0.14.1"
   },
diff --git a/src/api/user.js b/src/api/user.js
index 72071279..de6a6c82 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -31,3 +31,12 @@ export function sendAnalyzeRequest(token) {
     params: { token }
   })
 }
+
+export function sendAnalyzeOnDateRequest(token, fromDate, toDate) {
+  return request({
+    url: '/predictOnDate',
+    method: 'get',
+    baseURL: 'http://localhost:8888',
+    params: { token, fromDate, toDate }
+  })
+}
diff --git a/src/test.vue b/src/test.vue
new file mode 100644
index 00000000..98a84d7f
--- /dev/null
+++ b/src/test.vue
@@ -0,0 +1,13 @@
+<div id="app">
+  <vuejs-datepicker></vuejs-datepicker>
+</div>
+<script src="https://unpkg.com/vue"></script>
+<script src="https://unpkg.com/vuejs-datepicker"></script>
+<script>
+export default {
+	name: 'testView',
+	components: {
+		vuejsDatepicker
+	}
+}
+</script> 
\ No newline at end of file
diff --git a/src/views/Analyzing/analyzing.vue b/src/views/Analyzing/analyzing.vue
index 7f77cc1a..b1afc890 100644
--- a/src/views/Analyzing/analyzing.vue
+++ b/src/views/Analyzing/analyzing.vue
@@ -16,10 +16,10 @@
 </script> -->
 
 <template>
-  <div class="vue-spinner">
-    <Circle9 />
-    <h1>Analyzing....</h1>
-  </div>
+    <div class="vue-spinner">
+      <Circle9></Circle9>
+      <h1>Analyzing....</h1>
+    </div>
 </template>
 
 <script>
diff --git a/src/views/VueUploader/index.vue b/src/views/VueUploader/index.vue
index eb1d10fc..e634e537 100644
--- a/src/views/VueUploader/index.vue
+++ b/src/views/VueUploader/index.vue
@@ -516,18 +516,17 @@ export default {
     },
 
     onSendAnalyzeRequest() {
-      this.$router.push({ name: 'analyze' })
-      this.listLoading = true
-      sendAnalyzeRequest().then(response => {
+        this.$router.push({ name: "analyze" })
+        this.listLoading = true
+        sendAnalyzeRequest().then(response => {
         // console.log("success!")
-        // console.log(response['token'])
         // this.list = response.data.items
         // this.listLoading = false
-        /*eslint-disable*/ 
-        token = response['token']
+        var token = response['token']
+
         // if the response from the server indicating that it's running the analysis, then redirect to a loading view
-        if (this.list.indexOf('anylyzing') >= 0) {
-          // this.$router.push('@/views/Analyzing/analyzing')
+        if (token == 'success') {
+          this.$router.push({ name: "plot" })
 
           // sendAnalyzeRequest().then(response => {
           //   this.list = response.data.items
diff --git a/src/views/plot/plot.vue b/src/views/plot/plot.vue
new file mode 100644
index 00000000..c8ad9a4c
--- /dev/null
+++ b/src/views/plot/plot.vue
@@ -0,0 +1,45 @@
+<template>
+	<div>
+	  <span style="font-weight: bold">You could also run the analysis on the data from the specific date range</span><br>
+	  <span>From: </span>
+	  <Datepicker v-model="state.from" style="display: inline-block" :bootstrap-styling="true">
+	  </Datepicker>
+	  <span>To: </span>
+	  <Datepicker v-model="state.to" style="display: inline-block" :bootstrap-styling="true"></Datepicker>
+	  <button type="button" class="btn btn-success" @click="onSendAnalyzeOnDateRequest">Apply</button>
+    </div>
+    <iframe src="http://localhost:808" width=1300 height=600></iframe>
+</template>
+
+<script>
+import Datepicker from 'vuejs-datepicker'
+import { sendAnalyzeOnDateRequest } from '@/api/user'
+import { getToken } from '@/utils/auth'
+export default {
+  name: 'plot',
+  components: {
+  	 Datepicker
+  },
+
+  data() {
+	return {
+	state: { from: new Date(), to: new Date() }
+	};
+  },
+
+  methods: {
+	  onSendAnalyzeOnDateRequest() {
+	    this.$router.push({ name: "analyze" })
+	    this.listLoading = true
+	    sendAnalyzeOnDateRequest(getToken(), this.state.from, this.state.to).then(response => {
+	        var token = response['token']
+
+	        // if the response from the server indicating that it's running the analysis, then redirect to a loading view
+	        if (token == 'success') {
+	          this.$router.push({ name: "plot" })
+	        }
+	    })
+	  }
+  }
+}
+</script>
\ No newline at end of file