Brtdku

I have a water monitoring system, which reports tank level and usage values every minute. I have a mobile app that displays the data, but I want to surface the info on a general web page so the people in the house will see it..

but, a 3 day view is over 4000 data points.. level data range values are from 1750 to 2029 (and I see those on the y axis as top and bottom)

right now I get a straight line (from start of array to end) for both usage and level data items..

            var myChart = new Chart(canvas, {

              type: 'line',

              showLine: true,                           

              data: {

                datasets: [

                  {

                    xAxisID: 'dates',

                    data: self.data[self.config.Pins[1]], 

                    fill:true,

                    borderColor: '#2196f3', // Add custom color border (Line)

                    backgroundColor: '#2196f3', 

                    //borderWidth: 1,// Specify bar

                  }

                ]

              },

              options:   { 

                    legend: { display: false, },

                    responsive: true,

                    elements: {

                      line: {

                         tension: 0, // disables bezier curves

                      }

                    },

                scales: {

                  xAxes: [{

                    id: 'dates',

                    type: 'time',

                    distribution: 'linear',

                    scaleLabel: {

                        display: true,

                        labelString: 'Water Usage, gallons'

                    },

                      time: {

                          unit: 'minute'

                      },

                    bounds: 'data',

                    ticks: {

                        display: false ,

                        maxRotation: 90,

                        source: 'data',

                        maxTicksLimit: self.data[self.config.Pins[1]].length,                    },

                  }],

                  yAxes: [{

                        display: true,

                        scaleLabel: {

                            display: true,

                            labelString: 'used'

                        },

                    ticks: {

                        beginAtZero: true,

                        source: 'data',

                        min: 0,

                        //max: self.data[self.config.Pins[1]].length,

                    },

                    }]

                },

              }

            });

any guidance welcomed

the x and y axis are displayed with the right labels,
the Y axis has the right number scale from the data
the chart shows the MAX value of the Y axis in the upper left (411.0000)
on the right, same height, is a dot, which displays date/time.
the right edge of the graph, also shows different date/time values...
as if the top edge is drawn on the right...

but the right edge is a STACK of all the values, low to high, where their timestamps are ignored.. all drawn on the right edge.. as if step drew the 1st point in the left edge, then the next point on the right edge, and then there was no more room, so kept drawing points at the rightmost edge.

this turned out to be a data bug.. one element in the array was not Time Cartesian (date & value), just a point(value)... charting got confused as to what to do...