Compliance chart

[sylvr3]

Started making the scatterplot for patient compliance.
I am trying to get it to display a sample scatterplot on the page for now before I use our data.
However, it seems the .Scatter function is not recognized, according to the web console.

Should I be importing Chart.min.js or Chart.js in default.hbs (as shown here in line 6)?
Reference: https://github.com/nnnick/Chart.js/blob/v2.0-dev/samples/scatter.html

Also tried to extend the Chart Type to create a Scatter chart, as shown here:
http://www.chartjs.org/docs/

But that does not seem to work.

Any suggestions? @ChristianMurphy

[ChristianMurphy]

Should I be importing Chart.min.js or Chart.js in default.hbs?

Chart JS is already imported here, and is automatically available on all pages.

Also tried to extend the Chart Type to create a Scatter chart.

What extension needs to be added to the default scatter chart?

http://www.chartjs.org/docs/
But that does not seem to work.

These are the docs for Chart JS v1, we are using v2, currently the documentation for v2 is WIP but the examples are up-to-date.

[sylvr3]

[sylvr3]

Other than the Travis CI build failure, does this look good?

How are we measuring change over time? What should the y-axis be? How do we measure compliance?
@beccannlittle @ChristianMurphy @poojaRal

[ChristianMurphy]

Could we set the X Scale to a time series?

[sylvr3]

I am not sure if we can set the x scale to a time series if it is a scatterplot with ChartJS alone.

Could we use the Chart.Scatter plugin, perhaps?
https://github.com/dima117/Chart.Scatter

[ChristianMurphy]

Scatter plot supports time series in v2.

ref chartjs/Chart.js#1352

[sylvr3]

I can't push my latest commits because I cannot update my branch with the changes in master until it passes the Travis CI build...

[sylvr3]

I started rewriting my code based on the Chart.Scatter example here: https://github.com/dima117/Chart.Scatter

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
                        }
                    ]
                }];

        var ctx = document.getElementById("scatterChart").getContext("2d");
        var myDateLineChart = new Chart(ctx).Scatter(scatterChartData, {
                bezierCurve: true,
                showTooltips: true,
                scaleShowHorizontalLines: true,
                scaleShowLabels: true,
                scaleType: "date",
                scaleLabel: "<%=value%>°C"
            });

I am getting the following error: TypeError: e is undefined in Chart.min.js

I am not sure why that is, and what "e" it is referring to...?

[ChristianMurphy]

I can't push my latest commits because I cannot update my branch with the changes in master until it passes the Travis CI build...

There may be a fast forward warning from the remote branch being updated but not local branch not being updated.
try running git pull origin compliance-chart --rebase then try pushing your code to this branch.

I started rewriting my code based on the Chart.Scatter example here:

dima's version is designed for Chart js v1, we are using Chart js v2 these will not play well with each other.

I am getting the following error: TypeError: e is undefined in Chart.min.js
I am not sure why that is, and what "e" it is referring to...?

e is referring to the scatter plot trying to register an event.
It is having this issue because the custom Scatter plot plugin is not designed for Chart JS 2.

[ChristianMurphy]

@sylvr3 time series is simple.
Replace the xAxes code here.
with this code:
https://github.com/nnnick/Chart.js/blob/v2.0-dev/samples/line-time-point-data.html#L71

[sylvr3]

@ChristianMurphy That rebase command will not work... I still can't pull master into my branch..

[ChristianMurphy]

@sylvr3 You already did pull master into your branch in 38d85eb

[sylvr3]

[beccannlittle]

See screenshots.

I guess I accidentally deleted my commit message? Anyways this is a pass at a functioning time series. X axis is date of survey instance (we can do more than one per day if we wish). Y axis is hours until survey expires, which is supposed to show how close the patient is cutting it. Uses chart.js v2

[sylvr3]

Looks good! I can't view the latest changes on my end, though. Anyone else getting this foreign key constraint failure?

[ChristianMurphy]

@beccannlittle screenshots look good
@sylvr3 Try running gulp sync

[sylvr3]

@ChristianMurphy the above screenshot shows what happens when I run gulp sync.

[beccannlittle]

@ChristianMurphy gulp sync is what she ran to get the error.

@sylvr3 I get that error using gulp sync in the master branch, so I'm going to go ahead and merge this PR. Open a separate issue for that error for now.

[ChristianMurphy]

Drop the database, re-create, then sync and the issue should go away.

[sylvr3]

👍