javascript - Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options') - Stack Overfl

admin•2025-03-19 15:11:46•questions•阅读1

Edited the Details as I found a solution to display the Chart with the right datasets. Code Below will

Edited the Details as I found a solution to display the Chart with the right datasets. Code Below will show the Two Charts, which visually looks great but buttons on the 1st Chart are working great but the buttons on 2nd chart are not working.

Please check my code and Run the code Snippet and see by clicking on Today Monthly Yearly Buttons on both 1st and 2nd chart and you will find the error.

Uncaught TypeError: Cannot read properties of undefined (reading 'options') at timeFrame2 (Index:1825:41) at HTMLButtonElement.onclick (Index:708:165)

Heres the Code:

//for Miscellaneous
const day = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 9
  },
];
const month = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 5
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 60
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 55
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 10
  },
];
const year = [{
    x: '2018',
    y: '15'
  },
  {
    x: '2019',
    y: '5'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '50'
  },
  {
    x: '2022',
    y: '40'
  },
];
//for Administrative
const day1 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 7
  },
];
const month1 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 13
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 4
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 50
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 20
  },
];
const year1 = [{
    x: '2018',
    y: '40'
  },
  {
    x: '2019',
    y: '50'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '5'
  },
  {
    x: '2022',
    y: '15'
  },
];
//for Payroll
const day2 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 14
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 16
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 2
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 12
  },
];
const month2 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 60
  },
];
const year2 = [{
    x: '2018',
    y: '50'
  },
  {
    x: '2019',
    y: '40'
  },
  {
    x: '2020',
    y: '15'
  },
  {
    x: '2021',
    y: '25'
  },
  {
    x: '2022',
    y: '5'
  },
];
//for PettyCash
const day3 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 13
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 14
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 11
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 16
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 10
  },
];
const month3 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 17
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 50
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 5
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 58
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 33
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 18
  },
];
const year3 = [{
    x: '2018',
    y: '25'
  },
  {
    x: '2019',
    y: '5'
  },
  {
    x: '2020',
    y: '40'
  },
  {
    x: '2021',
    y: '50'
  },
  {
    x: '2022',
    y: '15'
  },
];


//expense chart 2
//for Expense chart 2
const days = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 9
  },
];
const months = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 5
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 60
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 55
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 10
  },
];
const years = [{
    x: '2018',
    y: '15'
  },
  {
    x: '2019',
    y: '5'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '50'
  },
  {
    x: '2022',
    y: '40'
  },
];
//for Ine
const days1 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 7
  },
];
const months1 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 13
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 4
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 50
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 20
  },
];
const years1 = [{
    x: '2018',
    y: '40'
  },
  {
    x: '2019',
    y: '50'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '5'
  },
  {
    x: '2022',
    y: '15'
  },
];

//for Expense 1 chart
// setup
const data = {
  //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [{
      label: 'Miscellaneous',
      data: day,
      backgroundColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderWidth: 1
    },
    {
      label: 'Administrative',
      data: day1,
      backgroundColor: [
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53'
      ],
      borderColor: [
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53'
      ],
      borderWidth: 1
    },
    {
      label: 'Payroll',
      data: day2,
      backgroundColor: [
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6'
      ],
      borderColor: [
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6'
      ],
      borderWidth: 1
    },
    {
      label: 'Petty Cash',
      data: day3,
      backgroundColor: [
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9'
      ],
      borderColor: [
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9'
      ],
      borderWidth: 1
    }
  ]
};


// config

var config = {
  type: 'line',
  data,
  options: {
    plugins: {
      legend: {

        display: true,
        labels: {
          boxWidth: 60,
          boxHeight: 20,
        }
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
};


// render init block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);



function timeFrame(period) {
  console.log(period.value);
  if (period.value == 'day') {
    myChart.config.options.scales.x.time.unit = period.value;
    myChart.config.data.datasets[0].data = day;
    myChart.config.data.datasets[1].data = day1;
    myChart.config.data.datasets[2].data = day2;
    myChart.config.data.datasets[3].data = day3;
  }
  if (period.value == 'month') {
    myChart.config.options.scales.x.time.unit = period.value;
    myChart.config.data.datasets[0].data = month;
    myChart.config.data.datasets[1].data = month1;
    myChart.config.data.datasets[2].data = month2;
    myChart.config.data.datasets[3].data = month3;
  }
  if (period.value == 'year') {
    myChart.config.options.scales.x.time.unit = period.value;
    myChart.config.data.datasets[0].data = year;
    myChart.config.data.datasets[1].data = year1;
    myChart.config.data.datasets[2].data = year2;
    myChart.config.data.datasets[3].data = year3;
  }
  myChart.update();
};

//expense chart 2
//for Expense 1 chart
// setup
const dataExBar = {
  //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [{
      label: 'Experience',
      data: days,
      backgroundColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderWidth: 1,
      barThickness: 12
    },
    {
      label: 'Other Ine',
      data: days1,
      backgroundColor: [
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153'
      ],
      borderColor: [
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153'
      ],
      borderWidth: 1,
      barThickness: 12
    }
  ]
};


// config

var configExBar = {
  type: 'bar',
  data: dataExBar,
  options: {
    plugins: {
      legend: {

        display: true,
        labels: {
          boxWidth: 60,
          boxHeight: 20,
        }
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
};


// render init block
const ExpenseChartTwo = new Chart(
  document.getElementById('ExpenseChartTwo'),
  configExBar
);



function timeFrame2(period2) {
  console.log(period2.value);
  if (period2.value == 'days') {
    ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
    ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = days;
    ExpenseChartTwo.configExBar.dataExBar.datasets[1].data = days1;
  }
  if (period2.value == 'months') {
    ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
    ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = months;
    ExpenseChartTwo.configExBar.dataExBar.datasets[1].data = months1;
  }
  if (period2.value == 'years') {
    ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
    ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = years;
    ExpenseChartTwo.configExBar.data.datasets[1].data = years1;
  }
  ExpenseChartTwo.update();
};

.btn-outline-prime {
  color: #23BAD7;
  border-color: #23BAD7;
}

.btn-outline-prime:hover {
  color: #fff;
  background-color: #23BAD7;
  border-color: #23BAD7;
}

button.active {
  color: #fff;
  background-color: #23BAD7;
  border-color: #23BAD7;
}

.border-expBox {
  border: 1px solid #E0E0E0 !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href=".2.0-beta1/css/bootstrap.min.css" />


</head>

<body>
  <div class="mb-5">
    <h1>Chart 1</h1>
  </div>
  <div style="display: block; box-sizing: border-box; height: 307px" class="row ps-3 pe-3 ms-0 me-0 mb-3 bg-white d-flex align-items-center shadow-sm rounded-3">
    <div class="col-12">
      <div class="row">
        <div class="col-12 d-flex align-items-center">
          <div class="col-5 d-flex justify-content-end">
            <button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="day">Today</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="month">Monthly</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame(this)" value="year">Yearly</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-9">
      <canvas id="myChart" width="618" height="220" style="display: block; box-sizing: border-box; height: 130px; width: 250.5px;"></canvas>
    </div>
  </div>


  <div class="mt-5">
    <h1>Chart 2</h1>
  </div>

  <div style="display: block; box-sizing: border-box; height: 307px" class="row ps-3 pe-3 ms-0 me-0  mb-3 bg-white d-flex align-items-center shadow-sm rounded-3">
    <div class="col-12">
      <div class="row">
        <div class="col-12 d-flex">
          <div class="col-5 d-flex justify-content-end align-items-center">
            <button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="days">Today</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="months">Monthly</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame2(this);" value="years">Yearly</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12" style="display: block; box-sizing: border-box; height: 211px">
      <canvas id="ExpenseChartTwo" width="825" height="211" style="display: block; box-sizing: border-box; height: 211px; width: 250.5px;"></canvas>
    </div>
  </div>
  </div>

  </div>


  <script src=".js/2.29.1/moment.min.js"></script>
  <script src=".6.0/jquery.min.js"></script>
  <script src=".2.0-beta1/js/bootstrap.bundle.min.js"></script>
  <script src=".2.6/jquery.unobtrusive-ajax.min.js"></script>
  <script src=".js"></script>
  <script src=".bundle.min.js"></script>

  <script>
    $(document).on('click', 'button', function() {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </script>
</body>

</html>

Please check my code and Run the code Snippet and see by clicking on Today Monthly Yearly Buttons on both 1st and 2nd chart and you will find the error.

Uncaught TypeError: Cannot read properties of undefined (reading 'options') at timeFrame2 (Index:1825:41) at HTMLButtonElement.onclick (Index:708:165)

Heres the Code:

//for Miscellaneous
const day = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 9
  },
];
const month = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 5
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 60
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 55
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 10
  },
];
const year = [{
    x: '2018',
    y: '15'
  },
  {
    x: '2019',
    y: '5'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '50'
  },
  {
    x: '2022',
    y: '40'
  },
];
//for Administrative
const day1 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 7
  },
];
const month1 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 13
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 4
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 50
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 20
  },
];
const year1 = [{
    x: '2018',
    y: '40'
  },
  {
    x: '2019',
    y: '50'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '5'
  },
  {
    x: '2022',
    y: '15'
  },
];
//for Payroll
const day2 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 14
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 16
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 2
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 12
  },
];
const month2 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 60
  },
];
const year2 = [{
    x: '2018',
    y: '50'
  },
  {
    x: '2019',
    y: '40'
  },
  {
    x: '2020',
    y: '15'
  },
  {
    x: '2021',
    y: '25'
  },
  {
    x: '2022',
    y: '5'
  },
];
//for PettyCash
const day3 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 13
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 14
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 11
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 16
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 10
  },
];
const month3 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 17
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 50
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 5
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 58
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 33
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 18
  },
];
const year3 = [{
    x: '2018',
    y: '25'
  },
  {
    x: '2019',
    y: '5'
  },
  {
    x: '2020',
    y: '40'
  },
  {
    x: '2021',
    y: '50'
  },
  {
    x: '2022',
    y: '15'
  },
];


//expense chart 2
//for Expense chart 2
const days = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 9
  },
];
const months = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 10
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 5
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 15
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 60
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 55
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 10
  },
];
const years = [{
    x: '2018',
    y: '15'
  },
  {
    x: '2019',
    y: '5'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '50'
  },
  {
    x: '2022',
    y: '40'
  },
];
//for Ine
const days1 = [{
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-02 00:00:00 UTC+05:00'),
    y: 18
  },
  {
    x: Date.parse('2022-05-03 00:00:00 UTC+05:00'),
    y: 9
  },
  {
    x: Date.parse('2022-05-04 00:00:00 UTC+05:00'),
    y: 6
  },
  {
    x: Date.parse('2022-05-05 00:00:00 UTC+05:00'),
    y: 3
  },
  {
    x: Date.parse('2022-05-06 00:00:00 UTC+05:00'),
    y: 12
  },
  {
    x: Date.parse('2022-05-07 00:00:00 UTC+05:00'),
    y: 7
  },
];
const months1 = [{
    x: Date.parse('2022-01-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-02-01 00:00:00 UTC+05:00'),
    y: 0
  },
  {
    x: Date.parse('2022-03-01 00:00:00 UTC+05:00'),
    y: 13
  },
  {
    x: Date.parse('2022-04-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-05-01 00:00:00 UTC+05:00'),
    y: 4
  },
  {
    x: Date.parse('2022-06-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-07-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-08-01 00:00:00 UTC+05:00'),
    y: 40
  },
  {
    x: Date.parse('2022-09-01 00:00:00 UTC+05:00'),
    y: 20
  },
  {
    x: Date.parse('2022-10-01 00:00:00 UTC+05:00'),
    y: 50
  },
  {
    x: Date.parse('2022-11-01 00:00:00 UTC+05:00'),
    y: 30
  },
  {
    x: Date.parse('2022-12-01 00:00:00 UTC+05:00'),
    y: 20
  },
];
const years1 = [{
    x: '2018',
    y: '40'
  },
  {
    x: '2019',
    y: '50'
  },
  {
    x: '2020',
    y: '25'
  },
  {
    x: '2021',
    y: '5'
  },
  {
    x: '2022',
    y: '15'
  },
];

//for Expense 1 chart
// setup
const data = {
  //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [{
      label: 'Miscellaneous',
      data: day,
      backgroundColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderWidth: 1
    },
    {
      label: 'Administrative',
      data: day1,
      backgroundColor: [
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53'
      ],
      borderColor: [
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53',
        '#01AF53'
      ],
      borderWidth: 1
    },
    {
      label: 'Payroll',
      data: day2,
      backgroundColor: [
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6'
      ],
      borderColor: [
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6',
        '#8D68A6'
      ],
      borderWidth: 1
    },
    {
      label: 'Petty Cash',
      data: day3,
      backgroundColor: [
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9'
      ],
      borderColor: [
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9',
        '#FD85A9'
      ],
      borderWidth: 1
    }
  ]
};


// config

var config = {
  type: 'line',
  data,
  options: {
    plugins: {
      legend: {

        display: true,
        labels: {
          boxWidth: 60,
          boxHeight: 20,
        }
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
};


// render init block
const myChart = new Chart(
  document.getElementById('myChart'),
  config
);



function timeFrame(period) {
  console.log(period.value);
  if (period.value == 'day') {
    myChart.config.options.scales.x.time.unit = period.value;
    myChart.config.data.datasets[0].data = day;
    myChart.config.data.datasets[1].data = day1;
    myChart.config.data.datasets[2].data = day2;
    myChart.config.data.datasets[3].data = day3;
  }
  if (period.value == 'month') {
    myChart.config.options.scales.x.time.unit = period.value;
    myChart.config.data.datasets[0].data = month;
    myChart.config.data.datasets[1].data = month1;
    myChart.config.data.datasets[2].data = month2;
    myChart.config.data.datasets[3].data = month3;
  }
  if (period.value == 'year') {
    myChart.config.options.scales.x.time.unit = period.value;
    myChart.config.data.datasets[0].data = year;
    myChart.config.data.datasets[1].data = year1;
    myChart.config.data.datasets[2].data = year2;
    myChart.config.data.datasets[3].data = year3;
  }
  myChart.update();
};

//expense chart 2
//for Expense 1 chart
// setup
const dataExBar = {
  //labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  datasets: [{
      label: 'Experience',
      data: days,
      backgroundColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderColor: [
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7',
        '#23BAD7'
      ],
      borderWidth: 1,
      barThickness: 12
    },
    {
      label: 'Other Ine',
      data: days1,
      backgroundColor: [
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153'
      ],
      borderColor: [
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153',
        '#00B153'
      ],
      borderWidth: 1,
      barThickness: 12
    }
  ]
};


// config

var configExBar = {
  type: 'bar',
  data: dataExBar,
  options: {
    plugins: {
      legend: {

        display: true,
        labels: {
          boxWidth: 60,
          boxHeight: 20,
        }
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
};


// render init block
const ExpenseChartTwo = new Chart(
  document.getElementById('ExpenseChartTwo'),
  configExBar
);



function timeFrame2(period2) {
  console.log(period2.value);
  if (period2.value == 'days') {
    ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
    ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = days;
    ExpenseChartTwo.configExBar.dataExBar.datasets[1].data = days1;
  }
  if (period2.value == 'months') {
    ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
    ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = months;
    ExpenseChartTwo.configExBar.dataExBar.datasets[1].data = months1;
  }
  if (period2.value == 'years') {
    ExpenseChartTwo.configExBar.options.scales.x.time.unit = period2.value;
    ExpenseChartTwo.configExBar.dataExBar.datasets[0].data = years;
    ExpenseChartTwo.configExBar.data.datasets[1].data = years1;
  }
  ExpenseChartTwo.update();
};

.btn-outline-prime {
  color: #23BAD7;
  border-color: #23BAD7;
}

.btn-outline-prime:hover {
  color: #fff;
  background-color: #23BAD7;
  border-color: #23BAD7;
}

button.active {
  color: #fff;
  background-color: #23BAD7;
  border-color: #23BAD7;
}

.border-expBox {
  border: 1px solid #E0E0E0 !important;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare./ajax/libs/bootstrap/5.2.0-beta1/css/bootstrap.min.css" />


</head>

<body>
  <div class="mb-5">
    <h1>Chart 1</h1>
  </div>
  <div style="display: block; box-sizing: border-box; height: 307px" class="row ps-3 pe-3 ms-0 me-0 mb-3 bg-white d-flex align-items-center shadow-sm rounded-3">
    <div class="col-12">
      <div class="row">
        <div class="col-12 d-flex align-items-center">
          <div class="col-5 d-flex justify-content-end">
            <button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="day">Today</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame(this)" value="month">Monthly</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame(this)" value="year">Yearly</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-9">
      <canvas id="myChart" width="618" height="220" style="display: block; box-sizing: border-box; height: 130px; width: 250.5px;"></canvas>
    </div>
  </div>


  <div class="mt-5">
    <h1>Chart 2</h1>
  </div>

  <div style="display: block; box-sizing: border-box; height: 307px" class="row ps-3 pe-3 ms-0 me-0  mb-3 bg-white d-flex align-items-center shadow-sm rounded-3">
    <div class="col-12">
      <div class="row">
        <div class="col-12 d-flex">
          <div class="col-5 d-flex justify-content-end align-items-center">
            <button class="active btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="days">Today</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold me-2" onclick="timeFrame2(this);" value="months">Monthly</button>
            <button class="btn btn-outline-prime btn-sm ps-4 pe-4 fw-bold" onclick="timeFrame2(this);" value="years">Yearly</button>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12" style="display: block; box-sizing: border-box; height: 211px">
      <canvas id="ExpenseChartTwo" width="825" height="211" style="display: block; box-sizing: border-box; height: 211px; width: 250.5px;"></canvas>
    </div>
  </div>
  </div>

  </div>


  <script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.29.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/bootstrap/5.2.0-beta1/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare./ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>
  <script src="https://cdn.jsdelivr/npm/chart.js"></script>
  <script src="https://cdn.jsdelivr/npm/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js"></script>

  <script>
    $(document).on('click', 'button', function() {
      $(this).addClass('active').siblings().removeClass('active')
    })
  </script>
</body>

</html>

Share Improve this question edited May 16, 2022 at 23:51 asked May 13, 2022 at 20:54 Omer Butt 411 gold badge1 silver badge7 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

chartfour is the name of the chart configuration you're using for creating your chart. myChart2.chartfour however does not exist.

When creating the chart, make sur to to assign it to a global constant...

const myChart2 = new Chart('myChart2', chartfour);

...then, you can directly access its options and data as follows:

myChart2.options.scales.x.time.unit = period.value;
myChart2.data.datasets[0].data = months;
...

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742300708a4417976.html

admin

questions
javascript - Delete row from table on corresponding delete button click - Stack Overflow
I'm facing some problem in the given example. I have a list of three items, all of them have a del
admin
23分钟前
10
questions
javascript - then is not a function error - Node promise library - Stack Overflow
I'm new to Node and this is the first time I've tried to use a promise library.With that sa
admin
22分钟前
10
questions
I need help understanding a simple JavaScript script - Stack Overflow
if (document.frmMain.POL_NO.value == ""){alert("Select Policy Number");document.fr
admin
19分钟前
10
questions
javascript - Inserting an element in a 1D array at the first position - Stack Overflow
I was asked this question in a Javascript interview and sadly, I couldnt e up with a better answer than
admin
19分钟前
10
网站建设
Win10系统在线重装的详细教程
Win10系统在线重装的详细教程在日常使用电脑的过程中，系统重装是一项常见且重要的维护操作。特别是在Windows 10系统环境下，随着时间的推移，系统可能因各种原因出现卡顿、崩溃或感染病毒等问题，这时重装系统往往是解决问题的最佳选择。
admin
19分钟前
10
网站建设
戴尔电脑重装Win10的方法详解
戴尔电脑重装Win10的方法详解在日常使用电脑的过程中，由于系统老化、病毒感染、软件冲突等原因，我们有时需要对电脑系统进行重装。对于戴尔电脑用户而言，重装Windows 10系统并不复杂，只要按照正确的步骤操作，即可轻松完成。本文将详细
admin
19分钟前
00
questions
javascript - Google Map jQuery - getting LatLng from mouse click - Stack Overflow
I'm currently using Google Maps v3 API with their jQuery client. I'm trying to get the latitu
admin
18分钟前
20
questions
javascript - How can I make button width to follow the most larger width button based on text? - Stack Overflow
How can I make all my button to follow the width of a larger width based on text?The button produce dyn
admin
17分钟前
10
questions
javascript - Cookies cannot be set in IE? - Stack Overflow
I have the following code in website1:<script type="textjavascript">document.cookie =
admin
13分钟前
00
questions
javascript - How to write a wrapper around a material UI component using React JS? - Stack Overflow
I am using Material UI next library and currently I am using List ponent. Since the library is in beta,
admin
12分钟前
00
questions
javascript - Add image to openlayers map - Stack Overflow
Here is my code for adding a image on openlayers map.var image = new OpenLayers.Layer.Image('Image
admin
9分钟前
00
questions
javascript - Countdown Timer that doesn't reset when you refresh the page? - Stack Overflow
I Need to have a code for the timer that doesn't reset the countdown timer even you refresh the pa
admin
8分钟前
00
questions
Azure VM, extension script in powershell, how to pass as a parameter json object - Stack Overflow
I have a script in Powershell, I would like to run it as a script extension in Azure VM. The script is
admin
8分钟前
00
questions
woocommerce offtopic - WooComerce shows blank site (Shop)
The site I set WooComerce to use as the shop is blank (white), I enabled debuggng mode (define('WP_DEBUG', tru
admin
7分钟前
00
questions
javascript - Passing a value onto a child component (this.props.children) in react - Stack Overflow
I have a child ponent in a Layout that I want to pass a props value too. But I don't know how. In
admin
7分钟前
00
questions
php - How does WordPress know wich language is chosen when there is a database connection error
When I have a db connection error in WordPress, WordPress shows the following error:Error establishing a database connec
admin
4分钟前
00
questions
php javascript minifier - Stack Overflow
I'm using a shared hosting plan on Hostgator. As such I can't run any java from the mand line
admin
3分钟前
00
questions
javascript - Angular4 - how to ensure ngOnDestroy finishes before navigating away - Stack Overflow
I have a list of objects. The user can click on one, which then loads a child ponent to edit that ponen
admin
1分钟前
00
questions
git log - Using "x AND y" instead of "x OR y" when using --grep twice in git-log - Stack Ove
I'm trying to find commits whose commit message includes both key words "x" and "y&
admin
55秒前
00
questions
javascript - Node JS Sends html as response instead of JSOM - Stack Overflow
I have a node js app in VPS and static files are served from dist folder (react app build files). Howev
admin
20秒前
00

发表回复

评论列表（0条）

暂无评论

javascript - Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options') - Stack Overfl

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Chart.js Uncaught TypeError: Cannot read properties of undefined (reading &#39;options&#39;) - Stack Overfl

1 Answer 1

相关推荐

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Chart.js Uncaught TypeError: Cannot read properties of undefined (reading 'options') - Stack Overfl