Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<?php 
session_start();
include('header.php');
include 'project_costs_process.php';
$invoice = new Invoice();
$invoice->checkLoggedIn();
if(!empty($_POST['client_name']) && $_POST['client_name'] && !empty($_POST['invoiceId']) && $_POST['invoiceId']) {	
	$invoice->updateInvoice($_POST);	
	header("Location:home.php");	
}
if(!empty($_GET['update_id']) && $_GET['update_id']) {
	$invoiceValues = $invoice->getInvoice($_GET['update_id']);		
	$invoiceItems = $invoice->getInvoiceItems($_GET['update_id']);
	$invoiceItems1 = $invoice->getLabourData($_GET['update_id']);
	$projectData = $invoice->getProjectData($_GET['update_id']);
	$MasterprojectData = $invoice->getQUOTEProjectData($_GET['master_id']);	
}
?>
<title>MLEC Electrical - Project Manager</title>
        <link href='sandbox/app3/jquery-ui.min.css' type='text/css' rel='stylesheet'>
    <script src="sandbox/app3/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="sandbox/app3/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/project1_materials.js.download"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript" src="script/script.js"></script>
<script type="text/javascript">
    $(function() {

       var TotalValue = 0;

       $("tr #loop").each(function(index,value){
         currentRow = parseFloat($(this).text());
         TotalValue += currentRow
       });

       var LabourValue = 0;

       $("tr #loop3").each(function(index,value){
         currentRow = parseFloat($(this).text());
         LabourValue += currentRow
       });

       document.getElementById('total').innerHTML = TotalValue;
       
document.getElementById('total').value = TotalValue;
document.getElementById('labourtotal').value = LabourValue;

let w = document.getElementById('labourtotal').value;
let x =...