Highcharts Grid Lite Webinar

by stitot

HTML

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Webinar</title>

    <script src="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/grid-lite.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highcharts/grid-lite/css/grid.css" />
    <!-- Only needed for charts, not Grid Lite -->
    <script src="https://code.highcharts.com/highcharts.js"></script>
    
  </head>
  <body>
  
    <div id="our_grid"></div>
    <button id="button">Generate Chart</button>
    <div id="chart"></div>
    
  </body>
</html>

CSS

#our_grid {
  height: 400px;
  margin: 20px;
}

.our-theme {
  --hcg-background: #d9ebe4;
  --hcg-font-size: 14px;
  --hcg-color: #000000;
  --hcg-padding: 8px;

  --hcg-border-width: 1px;
  --hcg-border-color: #6aa68c;
  --hcg-border-radius: 10px;

  --hcg-header-background: #426b59;
  --hcg-header-color: #ffffff;
  --hcg-header-text-align: center;

  --hcg-cell-hovered-background: #b6d1c5;
  --hcg-cell-hovered-column-background: #c8e1d7;
  --hcg-cell-hovered-row-background: #c8e1d7;
  --hcg-cell-hovered-header-color: #b6d1c5;

  --hcg-caption-color: #397b5f;
  --hcg-caption-font-size: 20px;
}

.performance {
  display: inline-flex;
  border-radius: 5px;
  padding: 3px 5px;
  border: 1px solid transparent;
}

.performance span {
  width: 15px;
}

.red {
  background: #fef3f2;
  color: #c10008;
  border-color: #c10008;
}

.green {
  background: #effdf4;
  color: #008236;
  border-color: #008236;
}

.redder {
  background: #c10008;
  color: #fef3f2;
}

.greener {
  background: #008236;
  color: #effdf4;
}

button {
  margin: 10px 20px;
}

#chart:not(:empty) {
  background: #d9ebe4;
  border-radius: 10px;
  border: 1px solid #6aa68c;
  margin: 10px 20px;
  padding: 10px;
}

JavaScript

/* https://www.highcharts.com/docs/chart-concepts/security */
Grid.AST.allowedTags.push("input");
Grid.AST.allowedAttributes.push("value");

const employeeData = {
  id: [
    "a1B2c3D4e5",
    "F6g7H8i9J0",
    "K1l2M3n4O5",
    "P6q7R8s9T0",
    "U1v2W3x4Y5",
    "Z6a7B8c9D0",
    "E1f2G3h4I5",
    "J6k7L8m9N0",
    "O1p2Q3r4S5",
    "T6u7V8w9X0",
    "Y1z2A3b4C5",
    "D6e7F8g9H0",
    "I1j2K3l4M5",
    "N6o7P8q9R0",
    "S1t2U3v4W5",
    "X6y7Z8a9B0",
    "C1d2E3f4G5",
    "H6i7J8k9L0",
    "M1n2O3p4Q5",
    "R6s7T8u9V0",
  ],
  firstName: [
    "Alice",
    "Bob",
    "Charlie",
    "Diana",
    "Evan",
    "Fiona",
    "George",
    "Hannah",
    "Ian",
    "Julia",
    "Kevin",
    "Laura",
    "Michael",
    "Nina",
    "Oscar",
    "Paula",
    "Quincy",
    "Rachel",
    "Steven",
    "Tina",
  ],
  lastName: [
    "Smith",
    "Johnson",
    "Williams",
    "Brown",
    "Jones",
    "Miller",
    "Davis",
    "Garcia",
    "Rodriguez",
    "Martinez",
    "Hernandez",
    "Lopez",
    "Gonzalez",
    "Wilson",
    "Anderson",
    "Thomas",
    "Taylor",
    "Moore",
    "Jackson",
    "Martin",
  ],
  email: [
    "[email protected]",
    "[email protected]",
    ,
    "[email protected]",
    "[email protected]",
    ,
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
    "[email protected]",
  ],
  jobTitle: [
    "Software Engineer",
    "Marketing Specialist",
    "Financial Analyst",
    "HR Coordinator",
    "Operations Manager",
    "Sales Associate",
    "IT Support Specialist",
    "Customer Service Representative",
    "Research Analyst",
  ...