CODEWITHSUNDEEP
javascriptchart.jsmomentjschart.js3chart.jsv3
Rod
Rod

Reputation: 87

Chartjs: Moment and ChartJS Time Format Parsing

I need to make a bar chart using the time format, I started this one as a base but the library version is old and I need to use the new one but it is not working, can someone help me?

Values must be in hours:minutes:second timeframe.

here is the code so far here is the code so far here is the code so far here is the code so far here is the code so far

enter code here
<!DOCTYPE html>
<html>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js">        </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>

<div id="chartTarget" style="height: 160px; width: 100%;">
  <canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
  <div style="opacity:0;" class="chartTooltip center">
  </div>
</div>

</body>
</html>
<script>
var temp = '{ "EmpLst": {"0" : "Parado","1" : "A pé"},"dateData" : [{"x": "07:00:00", "y": "09:10:00"},{"x": "08:00:00", "y": "08:10:00"}]}';

var parsedJSon = JSON.parse(temp);
var empNames = Object.values(parsedJSon.EmpLst);
var dateData = Object.values(parsedJSon.dateData);

var dataSets = [];

for (var i1 = 0; i1 < dateData.length; i1++) {
  dataSets.push({
    label: 'data',
    data: [
      [moment(dateData[i1].x, 'h:mm:ss'), moment(dateData[i1].y, 'h:mm:ss')],
      [moment(dateData[i1 + 1].x, 'h:mm:ss'), moment(dateData[i1 + 1].y, 'h:mm:ss')]
    ],
    backgroundColor: 'lightblue'
  });

  i1++
}
console.log(Date.parse(dataSets[0].data[0][0]._d))

var data = {
  type: 'bar',
  data: {
    labels: empNames,
    datasets: dataSets
  },
  options: {
    indexAxis: 'y',
    responsive: true,
    legend: {
      position: 'top',
    },
    title: {
      display: true,
      text: 'Horizontal Floating Bars'
    },
    scales: {
              x: {
                type: 'time',
                time: {
                 unit: 'hour',
                  displayFormats: {
                    hour: 'HH:mm:ss'
                  },
                  tooltipFormat: 'HH:mm:ss',
                  ticks:{
                min: moment('00:00:00', 'h:mm:ss'),
                max: moment('23:59:59', 'h:mm:ss'),
                },
                }
              }
            }
  }
};


var chart = new Chart(document.getElementById('deviceOnChart').getContext('2d'), data);
</script>

this is what i want enter image description here

Upvotes: 3

Views: 2052

Answers (1)

uminder
uminder

Reputation: 26170

When using time axis, no need to parse the dates yourself. Simply define time.parser and let Chart.js do it's job. According to 3.x Migration Guide, a few other things need also to be changed to make it work with Chart.js v3.

Please take a look at your amended and runnable code below and see how it works.

<!DOCTYPE html>
<html>

<body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.js">
  </script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-adapter-moment/1.0.0/chartjs-adapter-moment.min.js"></script>

  <div id="chartTarget" style="height: 160px; width: 100%;">
    <canvas id="deviceOnChart" width="600" height="160" style="display: block; height: 160px; width: 600px;"></canvas>
    <div style="opacity:0;" class="chartTooltip center">
    </div>
  </div>

</body>

</html>
<script>
  var temp = '{ "EmpLst": {"0" : "Parado","1" : "A pé"},"dateData" : [{"x": "07:00:00", "y": "09:10:00"},{"x": "08:00:00", "y": "08:10:00"}]}';

  var parsedJSon = JSON.parse(temp);
  var empNames = Object.values(parsedJSon.EmpLst);
  var dateData = Object.values(parsedJSon.dateData).map(o => [o.x, o.y]);

  var dataSets = [{
    label: 'data',
    data: dateData,
    backgroundColor: 'lightblue'
  }];

  var data = {
    type: 'bar',
    data: {
      labels: empNames,
      datasets: dataSets
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      plugins: {
        title: {
          display: true,
          text: 'Horizontal Floating Bars'
        },
        tooltip: {
          callbacks: {
            label: ctx => {
              const v = ctx.dataset.data[ctx.dataIndex];
              return v[0] + ' - ' + v[1];           
            }
          }
        }
      },
      scales: {
        x: {
          type: 'time',
          time: {
            parser: 'h:mm:ss',
            unit: 'hour',
            displayFormats: {
              hour: 'HH:mm:ss'
            }
          },
          min: '00:00:00',
          max: '24:00:00'
        }
      }
    }
  };


  var chart = new Chart('deviceOnChart', data);
</script>

Upvotes: 3

Related Questions