Chart.js line chart with different dataset size - Javascript Chart.js

Javascript examples for Chart.js:Line Chart

  1. HOME
  2. Javascript
  3. Chart.js
  4. Line Chart

Description

Chart.js line chart with different dataset size

Demo Code

ResultView the demo in separate window 

<html lang="en">
   <head> 
      <title>Chart.js - Line Chart With Multiple X Scales (X Axes)</title> 
   </head> 
   <body translate="no"> 
      <div style="width: 45%"> 
         <canvas id="canvas"></canvas> 
      </div> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
      <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
      <script>
      var chartColors = {/* w  ww  . j ava2s . c o m*/
  red: 'rgb(255, 99, 132)',
  orange: 'rgb(255, 159, 64)',
  yellow: 'rgb(255, 205, 86)',
  green: 'rgb(75, 192, 192)',
  blue: 'rgb(54, 162, 235)',
  purple: 'rgb(153, 102, 255)',
  grey: 'rgb(231,233,237)'
};
var getRandomValue = function() {
  min = Math.ceil(0);
  max = Math.floor(50);
  return Math.floor(Math.random() * (max - min + 1)) + min;
};
var generateHourlyAvgData = function() {
  var data = [];
  for (var i = 0; i < 168; i++) {
    data.push({
      x: i,
      y: getRandomValue()
    });
  }
  return data;
};
var generateDailyAvgData = function(hourlyAvgData) {
  var chunkSize = 24;
  var data = [null];
  for (var i = 0; i < hourlyAvgData.length / chunkSize; i++) {
    var startIndex = i * chunkSize;
    var slicedData = hourlyAvgData.slice(startIndex, startIndex + chunkSize);
    var sum = slicedData.reduce(function(acc, val, index) {
      return acc + slicedData[index].y;
    }, slicedData[0].y);
    data.push(sum / chunkSize);
  }
  return data;
};
var hourlyAvgData = generateHourlyAvgData();
var dailyAvgData = generateDailyAvgData(hourlyAvgData);
var ctx = document.getElementById("canvas").getContext("2d");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ['', "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
    datasets: [{
      type: 'line',
      label: 'Daily Avg',
      data: dailyAvgData,
      borderColor: chartColors.red,
      backgroundColor: chartColors.red,
      borderWidth: 5,
      fill: false,
    }, {
      type: 'line',
      label: 'Hourly Avg',
      borderColor: chartColors.green,
      backgroundColor: chartColors.green,
      borderWidth: 1,
      fill: false,
      pointRadius: 0,
      xAxisID: 'x-axis-2',
      data: hourlyAvgData
    }]
  },
  options: {
    responsive: true,
    title: {
      display: true,
      text: 'Chart.js - Line Chart With Multiple X Scales (X Axes)'
    },
    tooltips: {
      mode: 'nearest',
      intersect: true,
    },
    scales: {
      xAxes: [{
        gridLines: {
          offsetGridLines: false,
        }
      }, {
        id: 'x-axis-2',
        type: 'linear',
        position: 'bottom',
        display: false,
        ticks: {
          min: 0,
          max: 168,
          stepSize: 24
        }
      }],
      yAxes: [{
        ticks: {
          min: 0,
          max: 50
        }
      }]
    }
  }
});
      </script>  
   </body>
</html>

Related Tutorials