Log Charts

by jaredgibb

HTML

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.2/dist/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/1.27.0/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@0.2.1"></script>
<div id='chart' class='chart' width='400px' height='100%'>
  <canvas id="myChart" class='chart' ></canvas>
</div>

JavaScript

let maxArray, correctArray, incorrectArray, objectArray
let yourImage = new Image()
yourImage.src = `https://res.cloudinary.com/behaviorreportcard/image/upload/w_10,h_18,c_scale/v1623785517/Untitled_10_qbwmx4.png`;
let ctx = document.getElementById('myChart').getContext('2d');
Chart.defaults.font.size = '10px';
Chart.defaults.plugins.tooltip.enabled = true
const Interval = luxon.Interval,
  DateTime = luxon.DateTime,
  Duration = luxon.Duration;
let minTime = "2017-01-19",
  maxTime = "2017-04-01",
  start = DateTime.fromISO(minTime),
  end = DateTime.fromISO(maxTime),
  duration = Duration.fromObject({
    days: 1
  });
function getStart() {
  let newStart
  if (start.weekday != 7) {
    return start.minus({
      days: start.weekday
    }).toFormat("yyyy-MM-dd")
  } else {
    return start.toFormat("yyyy-MM-dd")
  }
}
let emptyArray = Interval.fromDateTimes(start, end).splitBy(duration).map(t => ({
  date: t.s.toFormat("yyyy-MM-dd"),
  correct: null,
  incorrect: null
}));
let incomingData = [{
    date: '2017-01-01',
    correct: 10,
    incorrect: 20
  },
  {
    date: '2017-01-02',
    correct: 10,
    incorrect: 0.09
  },
  {
    date: '2017-01-03',
    correct: 0.9,
    incorrect: null
  }, {
    date: '2017-01-04',
    correct: 3,
    incorrect: 0.09
  }, {
    date: '2017-01-27',
    correct: 5,
    incorrect: 0.09
  }, {
    date: '2017-01-28',
    correct: 10,
    incorrect: null
  }, {
    date: '2017-02-19',
    correct: null,
    incorrect: 50
  }, {
    date: '2017-02-20',
    correct: 75,
    incorrect: 50
  }, {
    date: '2017-02-28',
    correct: 60,
    incorrect: 0.085
  }, {
    date: '2017-03-01',
    correct: 75,
    incorrect: null
  }, {
    date: '2017-03-02',
    correct: 10,
    incorrect: null
  }
]
let returns = []
emptyArray.forEach(x => {
  let objToReplace = incomingData.find(o => o.date === x.date)
  let objIndex = incomingData.indexOf(objToReplace);
  if (objIndex != -1) {
    returns.push(incomingData[objIndex])
  } else {
   ...