From 77923ed87c6eab92f74b82d0fa02c3444681738f Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 13:18:18 -0700 Subject: [PATCH 01/10] started creating scatterplot chart layout --- presenter/patient.js | 29 ++++++++++++++++++++++++++++- view/template/patient.hbs | 34 ++++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 1 deletion(-) diff --git a/presenter/patient.js b/presenter/patient.js index 53295b4..12dbafd 100644 --- a/presenter/patient.js +++ b/presenter/patient.js @@ -86,6 +86,33 @@ module.exports = function (request, reply) { name: 'test' }, surveys: surveys, - surveysJson: JSON.stringify(surveys) + surveysJson: JSON.stringify(surveys), + graphData: JSON.stringify({ + data: surveys, + options: { + scales: { + xAxes: [{ + position: 'top', + gridLines: { + zeroLineColor: "rgba(0,255,0,1)" + }, + scaleLabel: { + show: true, + labelString: 'x axis' + } + }], + yAxes: [{ + position: 'right', + gridLines: { + zeroLineColor: "rgba(0,255,0,1)" + }, + scaleLabel: { + show: true, + labelString: 'y axis' + } + }] + } + } + }) }); }; diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 413a488..721b75b 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -18,6 +18,27 @@
+
+ +
+
+
+
+

+ Legend +

+
+
+
+
+
+
+
+
+

+ Trials +

+
@@ -106,5 +127,18 @@ allDayDefault: true, events: surveys }); + + var data = JSON.parse('{{{ graphData }}}'); + var ctx = document.getElementById('scatterChart').getContext('2d'); + var options = { + legendTemplate: '
    <% for (var i = 0; i < data.datasets.length; i++){%>
  • <%=data.datasets[i].label%>
    • <%}%>
' + }; + var radarChart = new Chart.Radar(ctx, { + data: data, + options: options + }); + var legend = document.getElementById('legend'); + + legend.innerHTML += radarChart.generateLegend(); }); From 976ce7f90c1ea6b18f0ee3fbd8e7df3e51573424 Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 13:27:57 -0700 Subject: [PATCH 02/10] added Chart.js to list of included scripts in hbs template --- view/layout/default.hbs | 1 + 1 file changed, 1 insertion(+) diff --git a/view/layout/default.hbs b/view/layout/default.hbs index d819cfa..d4f73b6 100644 --- a/view/layout/default.hbs +++ b/view/layout/default.hbs @@ -13,6 +13,7 @@ + From 9eed3f53d22dd2ae990b454f06fad5d64625bce6 Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 13:45:32 -0700 Subject: [PATCH 03/10] attempting to get example scatterplot to display on page --- view/template/patient.hbs | 56 +++++++++++++++++++++++++++++++++++++-- 1 file changed, 54 insertions(+), 2 deletions(-) diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 721b75b..4c972ca 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -128,17 +128,69 @@ events: surveys }); + var chartData = { + datasets: [{ + label: "My First dataset", + data: [{ + x: 0, + y: 0 + }, { + x: 1, + y: 51 + }, { + x: 2, + y: 52 + }, { + x: 3, + y: 53 + }, { + x: 4, + y: 54 + } + ], // data + borderColor: "rgba(220,220,220,1)", + backgroundColor: "rgba(220,220,220,0.2)", + pointBorderColor: "rgba(220,220,220,1)", + pointBackgroundColor: "rgba(220,220,220,1)", + pointBorderWidth: "1" + }] // datasets + }; //chartData + + + var ctx = document.getElementById('scatterChart').getContext('2d'); + Chart.defaults.global.responsive = true; + + var myNewChart = new Chart(ctx).Scatter({ + data: chartData, + options: { + responsive: true, + hoverMode: 'single', + scales: { + xAxes: [{ + gridLines: { + zeroLineColor: "rgba(0,0,0,1)" + } + }] + } + } + }); + + +/* var data = JSON.parse('{{{ graphData }}}'); var ctx = document.getElementById('scatterChart').getContext('2d'); var options = { legendTemplate: '
    <% for (var i = 0; i < data.datasets.length; i++){%>
  • <%=data.datasets[i].label%>
    • <%}%>
' }; - var radarChart = new Chart.Radar(ctx, { + var scatterplot = new Chart.Scatter(ctx, { data: data, options: options }); var legend = document.getElementById('legend'); - legend.innerHTML += radarChart.generateLegend(); + legend.innerHTML += scatterplot.generateLegend(); + +*/ + }); From f0f4738d781056e37c67000100a3fe2c8921e728 Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 13:47:47 -0700 Subject: [PATCH 04/10] removed extraneous code --- view/template/patient.hbs | 18 ------------------ 1 file changed, 18 deletions(-) diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 4c972ca..d20892a 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -174,23 +174,5 @@ } } }); - - -/* - var data = JSON.parse('{{{ graphData }}}'); - var ctx = document.getElementById('scatterChart').getContext('2d'); - var options = { - legendTemplate: '
    <% for (var i = 0; i < data.datasets.length; i++){%>
  • <%=data.datasets[i].label%>
    • <%}%>
' - }; - var scatterplot = new Chart.Scatter(ctx, { - data: data, - options: options - }); - var legend = document.getElementById('legend'); - - legend.innerHTML += scatterplot.generateLegend(); - -*/ - }); From 9f68dc4aa9eff628cbb70134e446bd36c98e602d Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 13:48:48 -0700 Subject: [PATCH 05/10] more code cleanup --- view/template/patient.hbs | 9 --------- 1 file changed, 9 deletions(-) diff --git a/view/template/patient.hbs b/view/template/patient.hbs index d20892a..1957cad 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -21,15 +21,6 @@
-
-
-
-

- Legend -

-
-
-
From 894ce155af3afa0754fc2a620246dfec6713276d Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 14:00:58 -0700 Subject: [PATCH 06/10] extending chart type for scatter chart --- view/template/patient.hbs | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 1957cad..8926133 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -147,6 +147,25 @@ }] // datasets }; //chartData + Chart.Type.extend({ + // Passing in a name registers this chart in the Chart namespace + name: "Scatter", + // Providing a defaults will also register the deafults in the chart namespace + defaults : { + options: "Here", + available: "at this.options" + }, + // Initialize is fired when the chart is initialized - Data is passed in as a parameter + // Config is automatically merged by the core of Chart.js, and is available at this.options + initialize: function(data){ + this.chart.ctx // The drawing context for this chart + this.chart.canvas // the canvas node for this chart + }, + // Used to draw something on the canvas + draw: function() { + } +}); + var ctx = document.getElementById('scatterChart').getContext('2d'); Chart.defaults.global.responsive = true; From 7f252d945a84237eb296b8ca62dbe44f23881605 Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 18:33:15 -0700 Subject: [PATCH 07/10] Sample scatterplot now shows data --- view/template/patient.hbs | 70 ++++++++++++++++++--------------------- 1 file changed, 33 insertions(+), 37 deletions(-) diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 8926133..e38173c 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -119,7 +119,11 @@ events: surveys }); - var chartData = { + + + }); + + var scatterChartData = { datasets: [{ label: "My First dataset", data: [{ @@ -147,42 +151,34 @@ }] // datasets }; //chartData - Chart.Type.extend({ - // Passing in a name registers this chart in the Chart namespace - name: "Scatter", - // Providing a defaults will also register the deafults in the chart namespace - defaults : { - options: "Here", - available: "at this.options" - }, - // Initialize is fired when the chart is initialized - Data is passed in as a parameter - // Config is automatically merged by the core of Chart.js, and is available at this.options - initialize: function(data){ - this.chart.ctx // The drawing context for this chart - this.chart.canvas // the canvas node for this chart - }, - // Used to draw something on the canvas - draw: function() { - } -}); - - - var ctx = document.getElementById('scatterChart').getContext('2d'); - Chart.defaults.global.responsive = true; - - var myNewChart = new Chart(ctx).Scatter({ - data: chartData, + window.onload = function() { + var ctx = document.getElementById("scatterChart").getContext("2d"); + window.myScatter = Chart.Scatter(ctx, { + data: scatterChartData, options: { - responsive: true, - hoverMode: 'single', - scales: { - xAxes: [{ - gridLines: { - zeroLineColor: "rgba(0,0,0,1)" - } - }] - } + scales: { + xAxes: [{ + position: 'top', + gridLines: { + zeroLineColor: "rgba(0,255,0,1)" + }, + scaleLabel: { + show: true, + labelString: 'x axis' } - }); - }); + }], + yAxes: [{ + position: 'right', + gridLines: { + zeroLineColor: "rgba(0,255,0,1)" + }, + scaleLabel: { + show: true, + labelString: 'y axis' + } + }] +} +} +}); +}; From d40cef5edd8d5ee54d1686599667512bb10dd464 Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Fri, 23 Oct 2015 18:56:46 -0700 Subject: [PATCH 08/10] Moved scatterchart data into patient presenter --- presenter/patient.js | 59 ++++++++++++++++++++++---------------------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/presenter/patient.js b/presenter/patient.js index 12dbafd..c117c71 100644 --- a/presenter/patient.js +++ b/presenter/patient.js @@ -86,33 +86,34 @@ module.exports = function (request, reply) { name: 'test' }, surveys: surveys, - surveysJson: JSON.stringify(surveys), - graphData: JSON.stringify({ - data: surveys, - options: { - scales: { - xAxes: [{ - position: 'top', - gridLines: { - zeroLineColor: "rgba(0,255,0,1)" - }, - scaleLabel: { - show: true, - labelString: 'x axis' - } - }], - yAxes: [{ - position: 'right', - gridLines: { - zeroLineColor: "rgba(0,255,0,1)" - }, - scaleLabel: { - show: true, - labelString: 'y axis' - } - }] - } - } - }) + surveysJson: JSON.stringify(surveys) }); -}; + + var scatterChartData = { + datasets: [{ + label: "Compliance Chart", + data: [{ + x: 1, + y: 0 + }, { + x: 1, + y: 51 + }, { + x: 2, + y: 52 + }, { + x: 3, + y: 53 + }, { + x: 4, + y: 54 + } + ], + borderColor: "rgba(220,220,220,1)", + backgroundColor: "rgba(220,220,220,0.2)", + pointBorderColor: "rgba(220,220,220,1)", + pointBackgroundColor: "rgba(220,220,220,1)", + pointBorderWidth: "1" + }] + } + }; From 3300f62a3646c30ed88fbba6b5be3486553d8c2d Mon Sep 17 00:00:00 2001 From: Sylvia Barnai Date: Sat, 24 Oct 2015 12:36:16 -0700 Subject: [PATCH 09/10] scatter plot with time series will not appear --- view/layout/default.hbs | 2 +- view/template/patient.hbs | 105 ++++++++++++++++---------------------- 2 files changed, 45 insertions(+), 62 deletions(-) diff --git a/view/layout/default.hbs b/view/layout/default.hbs index d4f73b6..539e6db 100644 --- a/view/layout/default.hbs +++ b/view/layout/default.hbs @@ -13,7 +13,7 @@ - + diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 2294bd8..0637eaa 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -117,69 +117,52 @@ $('#calendar').fullCalendar({ allDayDefault: true, events: surveys - }); - - - + }); }); - var scatterChartData = { - datasets: [{ - label: "Compliance Chart", - data: [{ - x: 1, - y: 0 - }, { - x: 1, - y: 51 - }, { - x: 2, - y: 52 - }, { - x: 3, - y: 53 - }, { - x: 4, - y: 54 - } - ], - borderColor: "rgba(220,220,220,1)", - backgroundColor: "rgba(220,220,220,0.2)", - pointBorderColor: "rgba(220,220,220,1)", - pointBackgroundColor: "rgba(220,220,220,1)", - pointBorderWidth: "1" - }] - } - + var scatterChartData = [ + { + label: 'Compliance Chart', + strokeColor: '#A31515', + data: [ + { + x: new Date('2011-04-11T11:45:00'), + y: 25 + }, + { + x: new Date('2011-04-11T12:51:00'), + y: 28 + }, + { + x: new Date('2011-04-11T14:10:00'), + y: 22 + }, + { + x: new Date('2011-04-11T15:15:00'), + y: 18 + }, + { + x: new Date('2011-04-11T17:00:00'), + y: 25 + }, + { + x: new Date('2011-04-11T21:00:00'), + y: 24 + }, + { + x: new Date('2011-04-12T13:00:00'), + y: 24 + } + ] + }]; - window.onload = function() { var ctx = document.getElementById("scatterChart").getContext("2d"); - window.myScatter = Chart.Scatter(ctx, { - data: scatterChartData, - options: { - scales: { - xAxes: [{ - position: 'top', - gridLines: { - zeroLineColor: "rgba(0,255,0,1)" - }, - scaleLabel: { - show: true, - labelString: 'Patient ID' - } - }], - yAxes: [{ - position: 'right', - gridLines: { - zeroLineColor: "rgba(0,255,0,1)" - }, - scaleLabel: { - show: true, - labelString: 'Compliance' - } - }] -} -} -}); -}; + var myDateLineChart = new Chart(ctx).Scatter(scatterChartData, { + bezierCurve: true, + showTooltips: true, + scaleShowHorizontalLines: true, + scaleShowLabels: true, + scaleType: "date", + scaleLabel: "<%=value%>°C" + }); From ae3253f1e31cb2fa728033b7b06e8f0ce2e49300 Mon Sep 17 00:00:00 2001 From: Becca Little Date: Sun, 25 Oct 2015 18:25:56 -0700 Subject: [PATCH 10/10] jshint --- presenter/patient.js | 4 +- view/layout/default.hbs | 1 - view/template/patient.hbs | 129 +++++++++++--------------------------- 3 files changed, 40 insertions(+), 94 deletions(-) diff --git a/presenter/patient.js b/presenter/patient.js index b0cdc64..53295b4 100644 --- a/presenter/patient.js +++ b/presenter/patient.js @@ -86,6 +86,6 @@ module.exports = function (request, reply) { name: 'test' }, surveys: surveys, - surveysJson: JSON.stringify(surveys) + surveysJson: JSON.stringify(surveys) }); - }; +}; diff --git a/view/layout/default.hbs b/view/layout/default.hbs index 539e6db..d819cfa 100644 --- a/view/layout/default.hbs +++ b/view/layout/default.hbs @@ -13,7 +13,6 @@ - diff --git a/view/template/patient.hbs b/view/template/patient.hbs index 8f3b7df..179283c 100644 --- a/view/template/patient.hbs +++ b/view/template/patient.hbs @@ -15,32 +15,11 @@ Patient: {{ patient.id }} -
+
-
- -
-
-
-
-
-
-

- Trials -

-
-
-
-
-

- Here is where we would have a sweet graph of the clinician's total patients over time for this trial. -

- - ADD NEW - -
-
+
+
@@ -117,88 +96,56 @@ $('#calendar').fullCalendar({ allDayDefault: true, events: surveys - }); - }); + }); - var scatterChartData = { + let config = { type: 'line', data: { - datasets: [{ - label: "Dataset with point data", - data: [{ - x: "12/31/2014 06:00", - y: 1 - }, { - x: "01/04/2015 13:00", - y: 3 - }, { - x: "01/07/2015 01:15", - y: 5 - }, { - x: "01/15/2015 01:15", - y: 7 - }], - fill: false - }] + labels: ['01/01/2015 20:00', '01/02/2015 21:00', '01/03/2015 22:00', '01/04/2015 23:00', '01/05/2015 03:00', '01/06/2015 10:00', '01/07/2015 04:00'], + datasets: [ + { + label: 'Hours until survey expired', + data: [23, 18, 20, 15, 4, 0, 1] + } + ] }, options: { responsive: true, scales: { - xAxes: [{ - type: "time", - display: true, - time: { - format: 'MM/DD/YYYY HH:mm', - }, - scaleLabel: { - show: true, - labelString: 'Date' + xAxes: [ + { + type: 'time', + display: true, + time: { + format: 'MMDDYYYY HHmm', + round: 'day' + }, + scaleLabel: { + show: true, + labelString: 'Date' + } } - }, ], - yAxes: [{ - display: true, - scaleLabel: { - show: true, - labelString: 'value' + ], + yAxes: [ + { + display: true, + scaleLabel: { + show: true, + labelString: 'Hours until survey expires' + } } - }] + ] }, elements: { line: { tension: 0.3 } - }, + } } }; - window.onload = function() { - var ctx = document.getElementById("scatterChart").getContext("2d"); - window.myScatter = Chart.Scatter(ctx, { - data: scatterChartData, - options: { - scales: { - xAxes: [{ - position: 'top', - gridLines: { - zeroLineColor: "rgba(0,255,0,1)" - }, - scaleLabel: { - show: true, - labelString: 'Patient ID' - } - }], - yAxes: [{ - position: 'right', - gridLines: { - zeroLineColor: "rgba(0,255,0,1)" - }, - scaleLabel: { - show: true, - labelString: 'Compliance Time Series' - } - }] -} -} -}); -}; + let ctx = document.getElementById('complianceChart').getContext('2d'); + + window.radarChart = new Chart(ctx, config); + });