Basic Column Chart - CanvasJS JavaScript Charts

Basic Column Chart - CanvasJS JavaScript Charts

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta http-equiv="x-ua-compatible" content="ie=edge">

		<title>Arbit Telemetria</title>

		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

		<!-- Scripts -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
		<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
	
	</head>
	<body>
		<div class="container-fluid">
			<h2 id="header">
				<strong>Arbit Telemetria</strong>
			</h2>

			<div class="row m-b-1">
				<div class="col-xs-8">
					<iframe id='map' src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3138.711059741782!2d-67.72201568426031!3d-38.12365597969737!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzjCsDA3JzI1LjIiUyA2N8KwNDMnMTEuNCJX!5e0!3m2!1ses-419!2sar!4v1544130997200" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
				</div>
				<div class="col-xs-4">
					<div class="card shadow">
						<h4 class="card-header">Registros por d&iacute;a</h4>
						<div class="card-block">
							<div id="day-chart"></div>
						</div>
					</div>
				</div>
			</div> <!-- row -->

			<div class="row m-b-1">
				<div class="col-lg-4">
					<div class="card...

CSS

body {
				background-color: #fafafa;
				font-size: 16px;
				line-height: 1.5;
			}

			h1,h2,h3,h4,h5,h6 {
				font-weight: 400;
			}

			#header {
				border-bottom: 5px solid #37474F;
				color: #37474F;
				margin-bottom: 1.5rem;
				padding: 1rem 0;
			}

			#revenue-tag {
				font-weight: inherit !important;
				border-radius: 0px !important;
			}

			.card {
				border: 0rem;
				border-radius: 0rem;
			}

			.card-header {
				background-color: #37474F;
				border-radius: 0 !important;
				color:	white;
				margin-bottom: 0;
				padding:	1rem;
			}

			.card-block {
				border: 1px solid #cccccc;
			}

			.shadow {
				box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
										0 1px 18px 0 rgba(0, 0, 0, 0.12),
										0 3px 5px -1px rgba(0, 0, 0, 0.2);
			}

			#day-chart, #week-chart, #month-chart, #year-chart {
				height: 300px;
				width: 100%;
			}

      #map {
        width: 100%;
        height: 400px;
      }

JavaScript

$(function () {

        var chart = new CanvasJS.Chart("day-chart", {
        	animationEnabled: true,
        	theme: "light1", // "light1", "light2", "dark1", "dark2"
        	title:{
        		text: "PHP Column Chart from Database"
        	},
          axisX:{
            type: 'datetime'
          },
        	data: [{
        		type: "area", //change type to bar, line, area, pie, etc
        		dataPoints: []
        	}]
        });
				chart.render();

				var chart = new CanvasJS.Chart("week-chart", {
					theme: "light2", // "light1", "light2", "dark1", "dark2"
					animationEnabled: true,
					zoomEnabled: true,
					title: {
						text: "Registros de la semana"
					},
					data: [{
						type: "area",
						dataPoints: []
					}]
				});
				chart.render();

				var chart = new CanvasJS.Chart("month-chart", {
					theme: "light2", // "light1", "light2", "dark1", "dark2"
					animationEnabled: true,
					zoomEnabled: true,
					title: {
						text: "Registros del mes"
					},
					data: [{
						type: "area",
						dataPoints: []
					}]
				});
				chart.render();

				var chart = new CanvasJS.Chart("year-chart", {
					theme: "light2", // "light1", "light2", "dark1", "dark2"
					animationEnabled: true,
					zoomEnabled: true,
					title: {
						text: "Registros del año"
					},
					data: [{
						type: "area",
            xValueType: "dateTime",
						dataPoints:...