Agfdhyk

I have set up a chart.js chart which uses data from a mysql database. I have set up a rest service to provide tha data, with the ability to define the grouping ie. the data is measured a five minute intervals, but I group it in 3 hour segments with my SQL statement SELECT (75-round(avg(sensorValue),0)) as Value, Time FROM sensorpi.rawData GROUP BY UNIX_TIMESTAMP(time) DIV $default_interval ORDER BY time asc

I would like to be able to change the granularity of the data by defining a new granularity.

I created an update function to send the request to the backend, and update the chart.

The chart is updated, but the default has 61 entries (at the moment) and the most fine-grained data has 180 entries. What happens is that the data is just reduced to the first 61 items in the dataset.

My gut feeling is that it is the date label of the X-Axis which is causing the trouble. But i am at a loss as to how i can solve it.

Here is a MVE (also on JSFiddle: https://jsfiddle.net/0agcu3ps/2/ )

var data05 = [1,  2,  5,  7,     16];

var data10 = [1,2,3,4,5,6,7,8,12,16];

var labels05 = [

  "Mon Nov 12 2018 02:00:00 GMT+0100",

  "Mon Nov 12 2018 12:00:00 GMT+0100",

  "Tue Nov 13 2018 18:00:00 GMT+0100",

  "Wed Nov 14 2018 02:00:00 GMT+0100",

  "Thu Nov 15 2018 14:00:00 GMT+0100"];

var labels10 = [

  "Tue Nov 12 2018 02:00:00 GMT+0100",

  "Mon Nov 12 2018 10:00:00 GMT+0100",

  "Mon Nov 12 2018 12:00:00 GMT+0100",

  "Tue Nov 13 2018 14:00:00 GMT+0100",

  "Tue Nov 13 2018 18:00:00 GMT+0100",

  "Tue Nov 13 2018 20:00:00 GMT+0100",

  "Wed Nov 14 2018 02:00:00 GMT+0100",

  "Wed Nov 14 2018 10:00:00 GMT+0100",

  "Thu Nov 15 2018 12:00:00 GMT+0100",

  "Thu Nov 15 2018 14:00:00 GMT+0100"];





window.updateChartData =  function() {

        var newData = ;

  var newLabels =;

  var intrval = document.getElementById("interval").value;

  if(intrval == 5){

    newData = data05;

  }else if (intrval == 10) {

    newData = data10;

  }

  pilleChart.data.datasets[0].data = newData;

  pilleChart.data.datasets[0].labels = newLabels;

  console.log("updating chart");

  pilleChart.update();

}





function drawLineChart() {



      // Create the chart.js data structure using 'labels' and 'data'

      var pilleData = {

        labels: labels05,

        datasets: [{

            fillColor: "rgba(151,187,205,0.2)",

            strokeColor: "rgba(200,200,205,0.7)",

            borderColor: "rgba(151,187,205,0.9)",

            borderWidth: 1,

            fill: false,

            label: 'Pilleniveau',

            data: data05



          }

        ]

      };

      var options = {

        showLines: true,

        responsive: true,

        title: {

          display: true,

          text: 'Pilleniveau i beholder'

        },

        legend: {

          display: false

        },

        tooltips: {

          mode: 'index',

          intersect: true

        },

        annotation: {

          annotations: [{

              type: 'line',

              mode: 'horizontal',

              scaleID: 'y-axis-0',

              value: 2,

              borderColor: "rgba(200,170,150,1)",

              borderWidth: 2,

              label: {

                enabled: false,

                content: 'Test label'

              }

            }

          ]

        },

        scales: {

          yAxes: [{

              ticks: {

                beginAtZero: true

              }

            }

          ],

          //Set X-Axis to date instead of labels

          xAxes: [{

              type: 'time',

              time: {

                unit: 'day'

              }

            }

          ]

        }

      }

      var ctx = document.getElementById("pilleChart").getContext("2d");

      // Instantiate a new chart

      pilleChart = new Chart(ctx, {

          type: 'line',

          data: pilleData,

          options: options

        });

}



drawLineChart();

EDIT:
I have been reading on Chart.js -- using update() with time scale datasets and communicated with the poster, who shared his solution, which is essentially to destroy the chart and draw it anew. I am not satisfied with that approach...

It seems that there is a hacking method:

pilleChart.config.data.labels = newLabels

See: https://jsfiddle.net/0agcu3ps/3/

ps: there is a bug in your demo, the first item of var labels10 = ["Tue Nov 13 2018 02:00:00 GMT+0100", is wrong, it should be Nov 12 :D