ChartJs

by Saksham Malhotra

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<div class="headerRow">
</div>
<div class="content">
  <div class="pageHeadings">
    <div class="heading">BIT.TINY</div>
    <div class="subHeading">Stats for:
      <u>https://bit.tiny/hQ7gDE3</u>
    </div>
  </div>
  <div class="chartRow">
    <div class="chartCell">
      <canvas id="myChart1"></canvas>
    </div>
    <div class="chartCell">
      <canvas id="myChart3"></canvas>
    </div>
  </div>
  <div class="chartRow">
    <div class="chartCell">
      <canvas id="myChart4"></canvas>
    </div>
    <div class="chartCell">
      <canvas id="myChart2"></canvas>
    </div>
  </div>
</div>
<div class="footer">Copyright 2019</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.headerRow {
  height: 50px;
  background: url('New-BlackRock-logo-White.png') no-repeat left 50px center #000;
  background-size: 10%;
}

.chartRow {
  height: 400px;
  min-width: 800px;
  max-width: 1400px;
  margin: 0 auto;
  width: 80%;
  display: flex;
}

.pageHeadings {
  min-width: 800px;
  max-width: 1400px;
  margin: 0 auto;
  width: 80%;
  padding: 50px 0px;
  text-align: center;
}

.chartCell {
  flex: 1;
  padding: 20px;
}

.heading {
  font-size: 120px;
  padding-bottom: 40px;
  letter-spacing: 60px;
  margin-right: -60px;
}

.subHeading {
  font-size: 36px;
  padding-bottom: 40px;
}

.footer {
  background-color: black;
  padding: 50px;
  color: #FFF;
  text-align: center;
  font-size: 14px;
}

JavaScript

$(function() {
  var ctx = document.getElementById("myChart1");
  var myChart = new Chart(ctx, {
    type: 'doughnut',
    data: {
      datasets: [{
        data: [4412, 3212, 1542],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)'
        ],
        borderWidth: 1
      }],
      labels: [
        'AMRS',
        'APAC',
        'EMEA'
      ]
    },
    options: {
      responsive: true,
      title: {
        display: true,
        position: "top",
        text: "Hits this week by region",
        fontSize: 32,
        fontColor: "#111"
      },
      legend: {
        display: true,
        labels: {
          fontColor: '#666'
        }
      }
    }
  });

  ctx = document.getElementById("myChart2");
  myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: ["Trainee/Contingent", "Analyst", "Associate", "Vice President", "Director and above"],
      datasets: [{
        label: 'Hits',
        data: [243, 419, 313, 123, 100],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      title: {
        display: true,
        position: "top",
        text: "Hits this week by designation",
       ...