'How to plot chart from external JSON and format X-AXIS to show time using Chart.JS?

I am using Chart.JS to plot some data from external JSON. But I am unable to format the X-AXIS in a proper way.

My html & javascripts codes are here:

$(document).ready(function(){
  $.ajax({
    url : "https://api.npoint.io/1f7ea8eeaa8996ad0d71",
    type : "POST",
    dataType: "json",
    success : function(data){
      console.log(data);

      var reg_date = [];
      var datetime = [];
      var temperature = [];
      var humidity = [];
      var effluent_level = [];

      for(var i in data) {
        reg_date.push(new Date(data[i].reg_date));
        temperature.push(data[i].temperature);
        humidity.push(data[i].humidity);
        effluent_level.push(data[i].effluent_level);
      }

      var chartdata = {
        labels: reg_date,
        type: 'time',
        distribution: 'linear',
        datasets: [
          {
            label: "Temperature",
            fill: false,
            //lineTension: 0.1,
            backgroundColor: "rgba(59, 89, 152, 0.75)",
            borderColor: "rgba(59, 89, 152, 1)",
            pointHoverBackgroundColor: "rgba(59, 89, 152, 1)",
            pointHoverBorderColor: "rgba(59, 89, 152, 1)",
            data: temperature
          },
          {
            label: "Humidity",
            fill: false,
            //lineTension: 0.1,
            backgroundColor: "rgba(29, 202, 255, 0.75)",
            borderColor: "rgba(29, 202, 255, 1)",
            pointHoverBackgroundColor: "rgba(29, 202, 255, 1)",
            pointHoverBorderColor: "rgba(29, 202, 255, 1)",
            data: humidity
          },
          {
            label: "Effluent Level",
            fill: false,
            //lineTension: 0.1,
            backgroundColor: "rgba(211, 72, 54, 0.75)",
            borderColor: "rgba(211, 72, 54, 1)",
            pointHoverBackgroundColor: "rgba(211, 72, 54, 1)",
            pointHoverBorderColor: "rgba(211, 72, 54, 1)",
            data: effluent_level
          }
        ]
      };

      var ctx = $("#mycanvas");

      var LineGraph = new Chart(ctx, {
        type: 'line',
        data: chartdata
      });
    },
    error : function(data) {

    }
  });
});
<!DOCTYPE html>
<html>
  <head>
    <title>ChartJS - LineGraph</title>
    <style>
      .chart-container {
        width: 640px;
        height: auto;
      }
    </style>
  </head>
  <body>
    <div class="chart-container">
      <canvas id="mycanvas"></canvas>
    </div>

    <!-- javascript -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    <script type="text/javascript" src="linegraph.js"></script>
  </body>
</html>

Output Image:

Click Here

But I want to show only time values in X-AXIS (not losing date data). How to plot the graph in an effective way to represent the data?

javascripthtmljsonchart.js


Solution 1:[1]

You can use a time axis:

const options = {
  type: 'line',
  data: {
    labels: ["Fri Feb 11 2022 00:59:07 GMT+0530 (Indian Standard Time)", "Fri Feb 11 2022 00:59:17 GMT+0530 (Indian Standard Time)", "Fri Feb 11 2022 00:59:27 GMT+0530 (Indian Standard Time)"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
    }]
  },
  options: {
    scales: {
      x: {
        type: 'time'
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment@^2"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@^1"></script>
</body>

or you can use a custom tick callback to achieve this

const options = {
  type: 'line',
  data: {
    labels: ["Fri Feb 11 2022 00:59:07 GMT+0530 (Indian Standard Time)", "Fri Feb 11 2022 00:59:17 GMT+0530 (Indian Standard Time)", "Fri Feb 11 2022 00:59:27 GMT+0530 (Indian Standard Time)"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3],
    }]
  },
  options: {
    scales: {
      x: {
        ticks: {
          callback: function(val) {
            return this.getLabelForValue(val).substring(16, 24);
          }
        }
      }
    }
  }
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdn.jsdelivr.net/npm/chart.js/dist/chart.min.js"></script>
</body>

Documentation: https://www.chartjs.org/docs/master/axes/labelling.html#creating-custom-tick-formats

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jacco Berg

Related Questions