https://www.chartjs.org/dist/2.9.4/Chart.min.js

ChartJS

by moshfeu

HTML

<script src="https://www.chartjs.org/dist/2.9.4/Chart.min.js"></script>

            <div class="col-sm-12">
                <canvas id="line-chart" width="800" height="250"></canvas>
            </div>

CSS

canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }

JavaScript

/* just normalized data data. Ultimately instead of generating different variables,
	 it should be a single array with objects for each row in the db.
   The array should look something like:
   
[
  { TagsC: 1, TagsN: "Escalation", TagsD: "06 Oct" },
  { TagsC: 7, TagsN: "Switchboard In", TagsD: "06 Oct" },
  { TagsC: 3, TagsN: "Switchboard In", TagsD: "07 Oct" },
  { TagsC: 1, TagsN: "Account Manager", TagsD: "08 Oct" },
  { TagsC: 10, TagsN: "Switchboard In", TagsD: "08 Oct" },
  { TagsC: 4, TagsN: "Switchboard In", TagsD: "09 Oct" },
  { TagsC: 1, TagsN: "Account Manager", TagsD: "12 Oct" },
  { TagsC: 1, TagsN: "Account Manager", TagsD: "12 Oct" },
  { TagsC: 6, TagsN: "Switchboard In", TagsD: "12 Oct" },
  { TagsC: 1, TagsN: "Account Manager", TagsD: "13 Oct" },
  { TagsC: 10, TagsN: "Switchboard In", TagsD: "13 Oct" },
  { TagsC: 1, TagsN: "Account Manager", TagsD: "14 Oct" },
  { TagsC: 6, TagsN: "Switchboard In", TagsD: "14 Oct" },
];

*/
const TagsCs = [1,7,3,1,10,4,1,1,6,1,10,1,6,1,2,1,4];
const TagsNs = ["Escalation","Switchboard In","Switchboard In","Account Manager","Switchboard In","Switchboard In","Account Manager","Account Manager","Switchboard In","Account Manager","Switchboard In","Account Manager","Switchboard In"];
const TagsDs = ["06 Oct","06 Oct","07 Oct","08 Oct","08 Oct","09 Oct","12 Oct","12 Oct","12 Oct","13 Oct","13 Oct","14 Oct","14 Oct","14 Oct","14 Oct"];

const data = TagsCs.map((e, index) => ({
  TagsC: TagsCs[index],
  TagsN: TagsNs[index],
  TagsD: TagsDs[index]
}));


// https://gomakethings.com/a-vanilla-js-equivalent-of-lodashs-groupby-method
function groupBy(arr, key) {
  return arr.reduce((prev, current) => {
  	const groupKey = current[key];
		if (!prev.has(groupKey)) {
    	prev.set(groupKey, []);
    }
    prev.get(groupKey).push(current);
		return prev;
  }, new Map());
}

const colors = ['red', 'blue', 'green', 'yellow'];

const grouped = groupBy(data,...