Gallery Back to Gallery

Financial Dashboard

Employee Expenses

Expenses Over Time

Expenses By Category

Expense Estimations

Expenses vs Operational Costs

Transaction Overview

[[index.category]]
<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  <style>
    #expenses {
      min-height: 330px;
    }

    #treemap {
      min-height: 445px;
    }

    #estimations,
    #operational {
      min-height: 200px;
    }

    .zc-body {
      background: #e6e6e6;
    }

    .zc-body zing-grid[loading] {
      min-height: 450px;
    }

    .zc-body zing-grid {
      /* ZG-GRID
    ----------------------------------------------------- */
      --zing-grid-border-bottom: 0;
      --zing-grid-border-left: 0;
      --zing-grid-border-right: 0;
      --zing-grid-border-top: 0;
      --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
      --zing-grid-font-family: 'Helvetica';
      --zing-grid-font-weight: 500;
      --zing-grid-color: #78909c;
      /* ZG-ICON */
      --zg-icon-color: #ACACAC;
      /* ZG-BUTTON
    ----------------------------------------------------- */
      --zg-button-opacity_disabled: .5;
      /* ZG-CELL
    ----------------------------------------------------- */
      --zg-cell-background_sorted: rgba(139, 177, 202, .3);
      /* ZG-HEAD
    ----------------------------------------------------- */
      --zg-head-background: #fff;
      /* ZG-HEAD-CELL
    ----------------------------------------------------- */
      --zg-head-cell-background_sorted: rgba(139, 177, 202, .6);
      --zg-head-cell-font-weight_sorted: 700;
      --zg-head-cell-icon-color_sorted: rgba(65, 117, 171, 1.0);
      /* ZG-PAGER
    ----------------------------------------------------- */
      /* --zg-pager-icon-color: red; */
      /* ZG-ROW
    ----------------------------------------------------- */
      --zg-row-body-background_even: #fff;
      --zg-row-body-background_odd: rgba(229, 236, 243, .7);
      --zg-row-body-background_hover: rgba(229, 236, 243, 1.0);
    }

    zg-head-cell[sorted] {
      font-weight: 700;
    }

    [data-importance] {
      height: 10px;
      width: 10px;
      border-radius: 15px;
      padding: 5px 8px;
      background-color: #bdbdbd;
      color: #fff;
    }

    [data-importance~="Sales"] {
      background-color: #03a9f4;
    }

    [data-importance~="Internal"] {
      background-color: #F0B827;
    }

    [data-importance~="Marketing"] {
      background-color: #D95234;
    }

    [data-importance~="Networking"] {
      background-color: #65BAA6;
    }

    .accented--text {
      font-weight: 700;
    }

    .cell--positive {
      color: #00c853;
    }

    .cell--negative {
      color: #d50000;
    }

    body {
      background: #E5E5E5;
      height: 100%;
    }

    #dashboard {
      display: flex;
      flex-direction: column;
    }

    #dashboard>header {
      padding-left: 3rem;
      border-bottom: 1px solid #BBB;
    }

    #dashboard header {
      padding-left: 1rem;
      font-family: 'Helvetica', Arial;
    }

    #dashboard h1 {
      margin-left: 1rem;
    }

    .db__content {
      display: flex;
      min-height: 800px;
      min-width: 800px;
      flex-wrap: wrap;
      padding: 1rem;
      flex: 1;
    }

    .db-col {
      display: flex;
      flex-direction: column;
      flex: 1;
      /* margin: 1rem; */
    }

    .block {
      display: flex;
      flex-direction: column;
      background: white;
      border-radius: 5px;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
      padding: 1rem;
      margin: 1rem;
      min-width: 500px;
    }

    .block header h2 {
      font-size: 1.2rem;
    }

    zing-grid[loading] {
      height: 386px;
    }
  </style>
</head>

<body class="zc-body">
  <section id="dashboard">
    <header>
      <h1>Employee Expenses</h1>
    </header>
    <section class="db__content">
      <section class="db-col db-col-1">
        <section class="block">
          <header>
            <h2>Expenses Over Time</h2>
          </header>
          <div id="expenses"></div>
        </section>
        <section class="block">
          <header>
            <h2>Expenses By Category</h2>
          </header>
          <div id="treemap"></div>
        </section>
      </section>
      <section class="db-col db-col-2">
        <section class="block">
          <header>
            <h2>Expense Estimations</h2>
          </header>
          <div id="estimations"></div>
        </section>
        <section class="block">
          <header>
            <h2>Expenses vs Operational Costs</h2>
          </header>
          <div id="operational"></div>
        </section>
        <section class="block">
          <header>
            <h2>Transaction Overview</h2>
          </header>
          <zing-grid pager page-size="5" page-size-options="5,10,50" sort viewport-stop zebra>
            <zg-colgroup>
              <zg-column index="item" cell-class="accented--text"></zg-column>
              <zg-column index="cost" type="currency"></zg-column>
              <zg-column index="budget" type="currency"></zg-column>
              <zg-column index="difference" type="currency" cell-class="posNegClass"></zg-column>
              <zg-column index="category" sort="disabled">
                <span data-importance="[[index.category]]">[[index.category]]</span>
              </zg-column>
              <zg-column index="dateApproved" type="date"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </section>

      </section>
    </section>

  </section>
  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    const STEP = 60 * 60 * 24;
    const START_TIME = (1577836800 + STEP) * 1000;

    function generateSeries(count, min, max) {
      const arr = new Array(count).fill().map(() => {
        return parseFloat(randomDollarAmount(min, max).toFixed(2));
      });
      return arr;
    }

    function randomDollarAmount(min, max) {
      return parseFloat((Math.random() * (max - min) + min).toFixed(2));
    }
    const AccommodationsValues = generateSeries(91, 1000, 1500);
    const foodValues = generateSeries(91, 1000, 1500);
    const transportationValues = generateSeries(91, 1000, 3000);
    const suppliesValues = generateSeries(91, 700, 1300);

    let barConfig = {
      type: 'bar',
      legend: {
        align: 'center',
        border: '0px',
        layout: '2x4',
        marker: {
          type: 'circle',
        },
        toggleAction: 'remove',
        verticalAlign: 'bottom',
      },
      plotarea: {
        margin: '20px dynamic dynamic dynamic',
      },
      plot: {
        lineWidth: '3px',
        // line node styling
        marker: {
          borderWidth: '0px',
          size: '6px',
        },
        stacked: true,
        // hoverstate
        tooltip: {
          visible: false,
        },
      },
      scaleX: {
        guide: {
          lineWidth: 0,
        },
        label: {
          text: '',
        },
        minValue: START_TIME,
        step: 'day',
        tick: {
          lineWidth: 0,
        },
        transform: {
          type: 'date',
          all: '%M %d',
        },
      },
      scaleY: {
        // scale label with unicode character
        guide: {
          lineStyle: 'dashed',
        },
        label: {
          text: 'Total Expense Cost<br>in dollars',
          paddingRight: 30,
        },
        lineColor: 'none',
        short: true,
        shortUnit: 'K',
        tick: {
          visible: false,
        },
      },
      crosshairX: {
        alpha: 0.28,
        lineWidth: '100%',
        plotLabel: {
          borderRadius: '3px',
          padding: '10px 15px',
          sortByValue: 'asc',
        },
      },
      series: [{
          text: 'Food and Drinks',
          // plot values
          values: foodValues,
          backgroundColor: '#65BAA6',
        },
        {
          text: 'Transportation',
          // plot values
          values: transportationValues,
          backgroundColor: '#03a9f4',
        },
        {
          text: 'Accommodations',
          // plot values
          values: AccommodationsValues,
          backgroundColor: '#F0B827',
        },

        {
          text: 'Supplies',
          // plot values
          values: suppliesValues,
          backgroundColor: '#D95234',
        },
      ],
    };

    let treemapConfig = {
      type: 'treemap',
      options: {
        splitType: 'squarify',
        palette: ['#03a9f4', '#F0B827', '#D95234', '#65BAA6'],
        box: {
          borderColor: '#FFF',
          borderRadius: 5,
          borderWidth: '3px',
          margin: 5,
          padding: '10px',
        },
      },
      tooltip: {},
      series: [{
          text: 'Transportation',
          children: [{
              text: 'Car Rental',
              value: 2000,
            },
            {
              text: 'Airplane',
              value: 3000,
            },
            {
              text: 'Ride Share',
              value: 800,
            },
            {
              text: 'Taxi',
              value: 200,
            },
          ],
        },
        {
          text: 'Food',
          children: [{
              text: 'Catering',
              value: 400,
            },
            {
              text: 'Fast Food',
              value: 300,
            },
            {
              text: 'Dining',
              value: 1500,
            },
            {
              text: 'Snacks',
              value: 800,
            },
            {
              text: 'Coffee',
              value: 700,
            },
            {
              text: 'Alcohol',
              value: 1000,
            },
          ],
        },
        {
          text: 'Accommodations',
          children: [{
              text: 'Hotel',
              value: 4000,
            },
            {
              text: 'Airbnb',
              value: 1500,
            },
            {
              text: 'Camping',
              value: 300,
            },
          ],
        },
        {
          text: 'Supplies',
          children: [{
              text: 'Copy',
              value: 300,
            },
            {
              text: 'Electronics',
              value: 3000,
            },
            {
              text: 'Misc',
              value: 500,
            },
          ],
        },
      ],
    };

    // Expense Estimation
    const totalValues = Array(91)
      .fill()
      .map((value, index) => {
        return parseFloat(
          (
            transportationValues[index] +
            AccommodationsValues[index] +
            suppliesValues[index] +
            foodValues[index]
          ).toFixed(2)
        );
      });

    const estimationsConfig = {
      type: 'line',
      legend: {
        align: 'center',
        border: '0px',
        layout: '1x2',
        marker: {
          type: 'circle',
        },
        verticalAlign: 'bottom',
      },
      plot: {
        lineWidth: 3,
        marker: {
          visible: false,
        },
      },
      plotarea: {
        margin: '20px dynamic dynamic dynamic',
      },
      scaleX: {
        guide: {
          lineWidth: 0,
        },
        label: {
          text: '',
        },
        minValue: START_TIME,
        step: 'day',
        tick: {
          lineWidth: 0,
        },
        transform: {
          type: 'date',
          all: '%M %d',
        },
      },
      scaleY: {
        values: '3000:7000:1000',
        guide: {
          lineStyle: 'dashed',
        },
        label: {
          text: 'Total Expense Cost<br>in dollars',
          paddingRight: 30,
        },
        lineColor: 'none',
        short: true,
        shortUnit: 'K',
        tick: {
          visible: false,
        },
      },
      series: [{
          text: 'Actual',
          values: totalValues,
          lineColor: '#03a9f4',
        },
        {
          text: 'Projected',
          values: Array(91)
            .fill()
            .map(() => {
              return randomDollarAmount(5000, 5300);
            }),
          lineColor: '#65BAA6',
        },
      ],
    };

    const operationalConfig = {
      type: 'bar',
      legend: {
        align: 'center',
        border: '0px',
        layout: '1x2',
        marker: {
          type: 'circle',
        },
        verticalAlign: 'bottom',
      },
      plot: {
        lineWidth: 3,
        marker: {
          visible: false,
        },
        stacked: true,
        stackType: '100%',
      },
      plotarea: {
        margin: '20px dynamic dynamic dynamic',
      },
      scaleX: {
        guide: {
          lineWidth: 0,
        },
        label: {
          text: '',
        },
        minValue: START_TIME,
        step: 'day',
        tick: {
          lineWidth: 0,
        },
        transform: {
          type: 'date',
          all: '%M %d',
        },
      },
      scaleY: {
        values: '0:100:10',
        // scale label with unicode character
        label: {
          text: 'Percent of costs',
          paddingRight: 30,
        },
        lineColor: 'none',
        tick: {
          visible: false,
        },
        guide: {
          lineStyle: 'dashed',
        },

        format: '%v%',
      },
      series: [{
          text: 'Operational',
          values: totalValues,
          backgroundColor: '#A7E2C0',
        },
        {
          text: 'Projected',
          values: Array(91)
            .fill()
            .map(() => {
              return randomDollarAmount(5000, 5300);
            }),
          backgroundColor: '#65BAA6',
        },
      ],
    };

    // ZingGrid

    function posNegClass(difference, cellDOMRef, cellRef) {
      if (difference > 0) return 'cell--positive';
      else if (difference < 0) return 'cell--negative';

      // return nothing if zero difference
      return;
    }

    // window:load event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content

      // get reference to zinggrid DOM element
      const zgRef = document.querySelector('zing-grid');
      const data = [{
          item: 'Flight to New York',
          cost: 400,
          budget: 1800,
          category: 'Sales',
          dateApproved: '2/10/20',
        },
        {
          item: 'Lunch Meeting',
          cost: 260,
          budget: 100,
          category: 'Sales',
          dateApproved: '2/12/20',
        },
        {
          item: 'Software License',
          cost: 1999,
          budget: 1500,
          category: 'Internal',
          dateApproved: '2/16/20',
        },
        {
          item: 'AP3 Conference',
          cost: 10623,
          budget: 9000,
          category: 'Marketing',
          dateApproved: '1/12/20',
        },
        {
          item: 'SO3 Conference',
          cost: 8054,
          budget: 10000,
          category: 'Networking',
          dateApproved: '1/04/20',
        },
        {
          item: 'Paid Vue Sponsorship',
          cost: 500,
          budget: 1000,
          category: 'Marketing',
          dateApproved: '1/01/20',
        },
        {
          item: 'Paid Article Sponsorship',
          cost: 1000,
          budget: 1000,
          category: 'Marketing',
          dateApproved: '1/01/20',
        },
        {
          item: 'Team Lunch Meeting',
          cost: 85,
          budget: 100,
          category: 'Sales',
          dateApproved: '1/31/20',
        },
        {
          item: 'Team Lunch Meeting',
          cost: 125,
          budget: 100,
          category: 'Sales',
          dateApproved: '1/24/20',
        },
        {
          item: 'Browserstack',
          cost: 199,
          budget: 199,
          category: 'Internal',
          dateApproved: '1/01/20',
        },
        {
          item: 'Browserstack',
          cost: 199,
          budget: 199,
          category: 'Internal',
          dateApproved: '2/01/20',
        },
      ];

      // once you get data from endpoint
      // massage data to calculate difference
      data.forEach((index) => {
        index.difference = index.cost - index.budget;
      });
      zgRef.setData(data);

      zingchart.render({
        id: 'expenses',
        data: barConfig,
        width: '100%',
        height: 330,
      });
      zingchart.render({
        id: 'treemap',
        data: treemapConfig,
        width: '100%',
        height: 445,
      });
      zingchart.render({
        id: 'estimations',
        data: estimationsConfig,
        width: '100%',
        height: 200,
      });
      zingchart.render({
        id: 'operational',
        data: operationalConfig,
        width: '100%',
        height: 200,
      });
    });
  </script>
</body>

</html>
<!DOCTYPE html>
<html class="zc-html">

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
  </head>

<body class="zc-body">
  <section id="dashboard">
    <header>
      <h1>Employee Expenses</h1>
    </header>
    <section class="db__content">
      <section class="db-col db-col-1">
        <section class="block">
          <header>
            <h2>Expenses Over Time</h2>
          </header>
          <div id="expenses"></div>
        </section>
        <section class="block">
          <header>
            <h2>Expenses By Category</h2>
          </header>
          <div id="treemap"></div>
        </section>
      </section>
      <section class="db-col db-col-2">
        <section class="block">
          <header>
            <h2>Expense Estimations</h2>
          </header>
          <div id="estimations"></div>
        </section>
        <section class="block">
          <header>
            <h2>Expenses vs Operational Costs</h2>
          </header>
          <div id="operational"></div>
        </section>
        <section class="block">
          <header>
            <h2>Transaction Overview</h2>
          </header>
          <zing-grid pager page-size="5" page-size-options="5,10,50" sort viewport-stop zebra>
            <zg-colgroup>
              <zg-column index="item" cell-class="accented--text"></zg-column>
              <zg-column index="cost" type="currency"></zg-column>
              <zg-column index="budget" type="currency"></zg-column>
              <zg-column index="difference" type="currency" cell-class="posNegClass"></zg-column>
              <zg-column index="category" sort="disabled">
                <span data-importance="[[index.category]]">[[index.category]]</span>
              </zg-column>
              <zg-column index="dateApproved" type="date"></zg-column>
            </zg-colgroup>
          </zing-grid>
        </section>

      </section>
    </section>

  </section>
</body>

</html>
const STEP = 60 * 60 * 24;
const START_TIME = (1577836800 + STEP) * 1000;

function generateSeries(count, min, max) {
  const arr = new Array(count).fill().map(() => {
    return parseFloat(randomDollarAmount(min, max).toFixed(2));
  });
  return arr;
}

function randomDollarAmount(min, max) {
  return parseFloat((Math.random() * (max - min) + min).toFixed(2));
}
const AccommodationsValues = generateSeries(91, 1000, 1500);
const foodValues = generateSeries(91, 1000, 1500);
const transportationValues = generateSeries(91, 1000, 3000);
const suppliesValues = generateSeries(91, 700, 1300);

let barConfig = {
  type: 'bar',
  legend: {
    align: 'center',
    border: '0px',
    layout: '2x4',
    marker: {
      type: 'circle',
    },
    toggleAction: 'remove',
    verticalAlign: 'bottom',
  },
  plotarea: {
    margin: '20px dynamic dynamic dynamic',
  },
  plot: {
    lineWidth: '3px',
    // line node styling
    marker: {
      borderWidth: '0px',
      size: '6px',
    },
    stacked: true,
    // hoverstate
    tooltip: {
      visible: false,
    },
  },
  scaleX: {
    guide: {
      lineWidth: 0,
    },
    label: {
      text: '',
    },
    minValue: START_TIME,
    step: 'day',
    tick: {
      lineWidth: 0,
    },
    transform: {
      type: 'date',
      all: '%M %d',
    },
  },
  scaleY: {
    // scale label with unicode character
    guide: {
      lineStyle: 'dashed',
    },
    label: {
      text: 'Total Expense Cost<br>in dollars',
      paddingRight: 30,
    },
    lineColor: 'none',
    short: true,
    shortUnit: 'K',
    tick: {
      visible: false,
    },
  },
  crosshairX: {
    alpha: 0.28,
    lineWidth: '100%',
    plotLabel: {
      borderRadius: '3px',
      padding: '10px 15px',
      sortByValue: 'asc',
    },
  },
  series: [
    {
      text: 'Food and Drinks',
      // plot values
      values: foodValues,
      backgroundColor: '#65BAA6',
    },
    {
      text: 'Transportation',
      // plot values
      values: transportationValues,
      backgroundColor: '#03a9f4',
    },
    {
      text: 'Accommodations',
      // plot values
      values: AccommodationsValues,
      backgroundColor: '#F0B827',
    },

    {
      text: 'Supplies',
      // plot values
      values: suppliesValues,
      backgroundColor: '#D95234',
    },
  ],
};

let treemapConfig = {
  type: 'treemap',
  options: {
    splitType: 'squarify',
    palette: ['#03a9f4', '#F0B827', '#D95234', '#65BAA6'],
    box: {
      borderColor: '#FFF',
      borderRadius: 5,
      borderWidth: '3px',
      margin: 5,
      padding: '10px',
    },
  },
  tooltip: {},
  series: [
    {
      text: 'Transportation',
      children: [
        {
          text: 'Car Rental',
          value: 2000,
        },
        {
          text: 'Airplane',
          value: 3000,
        },
        {
          text: 'Ride Share',
          value: 800,
        },
        {
          text: 'Taxi',
          value: 200,
        },
      ],
    },
    {
      text: 'Food',
      children: [
        {
          text: 'Catering',
          value: 400,
        },
        {
          text: 'Fast Food',
          value: 300,
        },
        {
          text: 'Dining',
          value: 1500,
        },
        {
          text: 'Snacks',
          value: 800,
        },
        {
          text: 'Coffee',
          value: 700,
        },
        {
          text: 'Alcohol',
          value: 1000,
        },
      ],
    },
    {
      text: 'Accommodations',
      children: [
        {
          text: 'Hotel',
          value: 4000,
        },
        {
          text: 'Airbnb',
          value: 1500,
        },
        {
          text: 'Camping',
          value: 300,
        },
      ],
    },
    {
      text: 'Supplies',
      children: [
        {
          text: 'Copy',
          value: 300,
        },
        {
          text: 'Electronics',
          value: 3000,
        },
        {
          text: 'Misc',
          value: 500,
        },
      ],
    },
  ],
};

// Expense Estimation
const totalValues = Array(91)
  .fill()
  .map((value, index) => {
    return parseFloat(
      (
        transportationValues[index] +
        AccommodationsValues[index] +
        suppliesValues[index] +
        foodValues[index]
      ).toFixed(2)
    );
  });

const estimationsConfig = {
  type: 'line',
  legend: {
    align: 'center',
    border: '0px',
    layout: '1x2',
    marker: {
      type: 'circle',
    },
    verticalAlign: 'bottom',
  },
  plot: {
    lineWidth: 3,
    marker: {
      visible: false,
    },
  },
  plotarea: {
    margin: '20px dynamic dynamic dynamic',
  },
  scaleX: {
    guide: {
      lineWidth: 0,
    },
    label: {
      text: '',
    },
    minValue: START_TIME,
    step: 'day',
    tick: {
      lineWidth: 0,
    },
    transform: {
      type: 'date',
      all: '%M %d',
    },
  },
  scaleY: {
    values: '3000:7000:1000',
    guide: {
      lineStyle: 'dashed',
    },
    label: {
      text: 'Total Expense Cost<br>in dollars',
      paddingRight: 30,
    },
    lineColor: 'none',
    short: true,
    shortUnit: 'K',
    tick: {
      visible: false,
    },
  },
  series: [
    {
      text: 'Actual',
      values: totalValues,
      lineColor: '#03a9f4',
    },
    {
      text: 'Projected',
      values: Array(91)
        .fill()
        .map(() => {
          return randomDollarAmount(5000, 5300);
        }),
      lineColor: '#65BAA6',
    },
  ],
};

const operationalConfig = {
  type: 'bar',
  legend: {
    align: 'center',
    border: '0px',
    layout: '1x2',
    marker: {
      type: 'circle',
    },
    verticalAlign: 'bottom',
  },
  plot: {
    lineWidth: 3,
    marker: {
      visible: false,
    },
    stacked: true,
    stackType: '100%',
  },
  plotarea: {
    margin: '20px dynamic dynamic dynamic',
  },
  scaleX: {
    guide: {
      lineWidth: 0,
    },
    label: {
      text: '',
    },
    minValue: START_TIME,
    step: 'day',
    tick: {
      lineWidth: 0,
    },
    transform: {
      type: 'date',
      all: '%M %d',
    },
  },
  scaleY: {
    values: '0:100:10',
    // scale label with unicode character
    label: {
      text: 'Percent of costs',
      paddingRight: 30,
    },
    lineColor: 'none',
    tick: {
      visible: false,
    },
    guide: {
      lineStyle: 'dashed',
    },

    format: '%v%',
  },
  series: [
    {
      text: 'Operational',
      values: totalValues,
      backgroundColor: '#A7E2C0',
    },
    {
      text: 'Projected',
      values: Array(91)
        .fill()
        .map(() => {
          return randomDollarAmount(5000, 5300);
        }),
      backgroundColor: '#65BAA6',
    },
  ],
};

// ZingGrid

function posNegClass(difference, cellDOMRef, cellRef) {
  if (difference > 0) return 'cell--positive';
  else if (difference < 0) return 'cell--negative';

  // return nothing if zero difference
  return;
}

// window:load event for Javascript to run after HTML
// because this Javascript is injected into the document head
window.addEventListener('load', () => {
  // Javascript code to execute after DOM content

  // get reference to zinggrid DOM element
  const zgRef = document.querySelector('zing-grid');
  const data = [
    {
      item: 'Flight to New York',
      cost: 400,
      budget: 1800,
      category: 'Sales',
      dateApproved: '2/10/20',
    },
    {
      item: 'Lunch Meeting',
      cost: 260,
      budget: 100,
      category: 'Sales',
      dateApproved: '2/12/20',
    },
    {
      item: 'Software License',
      cost: 1999,
      budget: 1500,
      category: 'Internal',
      dateApproved: '2/16/20',
    },
    {
      item: 'AP3 Conference',
      cost: 10623,
      budget: 9000,
      category: 'Marketing',
      dateApproved: '1/12/20',
    },
    {
      item: 'SO3 Conference',
      cost: 8054,
      budget: 10000,
      category: 'Networking',
      dateApproved: '1/04/20',
    },
    {
      item: 'Paid Vue Sponsorship',
      cost: 500,
      budget: 1000,
      category: 'Marketing',
      dateApproved: '1/01/20',
    },
    {
      item: 'Paid Article Sponsorship',
      cost: 1000,
      budget: 1000,
      category: 'Marketing',
      dateApproved: '1/01/20',
    },
    {
      item: 'Team Lunch Meeting',
      cost: 85,
      budget: 100,
      category: 'Sales',
      dateApproved: '1/31/20',
    },
    {
      item: 'Team Lunch Meeting',
      cost: 125,
      budget: 100,
      category: 'Sales',
      dateApproved: '1/24/20',
    },
    {
      item: 'Browserstack',
      cost: 199,
      budget: 199,
      category: 'Internal',
      dateApproved: '1/01/20',
    },
    {
      item: 'Browserstack',
      cost: 199,
      budget: 199,
      category: 'Internal',
      dateApproved: '2/01/20',
    },
  ];

  // once you get data from endpoint
  // massage data to calculate difference
  data.forEach((index) => {
    index.difference = index.cost - index.budget;
  });
  zgRef.setData(data);

  zingchart.render({
    id: 'expenses',
    data: barConfig,
    width: '100%',
    height: 330,
  });
  zingchart.render({
    id: 'treemap',
    data: treemapConfig,
    width: '100%',
    height: 445,
  });
  zingchart.render({
    id: 'estimations',
    data: estimationsConfig,
    width: '100%',
    height: 200,
  });
  zingchart.render({
    id: 'operational',
    data: operationalConfig,
    width: '100%',
    height: 200,
  });
});
#expenses { min-height: 330px; }
  #treemap { min-height: 445px; }
  #estimations,
  #operational { min-height: 200px; }
  .zc-body {
    background: #e6e6e6;
  }

  .zc-body zing-grid[loading] {
    min-height: 450px;
  }
  .zc-body zing-grid {

    /* ZG-GRID
    ----------------------------------------------------- */
    --zing-grid-border-bottom: 0;
    --zing-grid-border-left: 0;
    --zing-grid-border-right: 0;
    --zing-grid-border-top: 0;
    --zing-grid-box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
    --zing-grid-font-family: 'Helvetica';
    --zing-grid-font-weight: 500;
    --zing-grid-color: #78909c;

    /* ZG-ICON */
    --zg-icon-color: #ACACAC;
    /* ZG-BUTTON
    ----------------------------------------------------- */
    --zg-button-opacity_disabled: .5;

    /* ZG-CELL
    ----------------------------------------------------- */
    --zg-cell-background_sorted: rgba(139, 177, 202, .3);

    /* ZG-HEAD
    ----------------------------------------------------- */
    --zg-head-background: #fff;

    /* ZG-HEAD-CELL
    ----------------------------------------------------- */
    --zg-head-cell-background_sorted: rgba(139, 177, 202, .6);
    --zg-head-cell-font-weight_sorted: 700;
    --zg-head-cell-icon-color_sorted: rgba(65, 117, 171, 1.0);

    /* ZG-PAGER
    ----------------------------------------------------- */
    /* --zg-pager-icon-color: red; */

    /* ZG-ROW
    ----------------------------------------------------- */
    --zg-row-body-background_even: #fff;
    --zg-row-body-background_odd: rgba(229, 236, 243, .7);
    --zg-row-body-background_hover: rgba(229, 236, 243, 1.0);
  }

  zg-head-cell[sorted] {
    font-weight: 700;
  }

  [data-importance] {
    height: 10px;
    width: 10px;
    border-radius: 15px;
    padding: 5px 8px;
    background-color: #bdbdbd;
    color: #fff;
  }

  [data-importance~="Sales"] {
    background-color: #03a9f4;
  }

  [data-importance~="Internal"] {
    background-color: #F0B827;
  }

  [data-importance~="Marketing"] {
    background-color: #D95234;
  }

  [data-importance~="Networking"] {
    background-color: #65BAA6;
  }

  .accented--text {
    font-weight: 700;
  }

  .cell--positive {
    color: #00c853;
  }

  .cell--negative {
    color: #d50000;
  }

  body {
    background: #E5E5E5;
    height: 100%;
  }

  #dashboard {
    display: flex;
    flex-direction: column;
  }
  #dashboard > header {
    padding-left: 3rem;
    border-bottom: 1px solid #BBB;
  }
  #dashboard header {
    padding-left: 1rem;
    font-family: 'Helvetica', Arial;
  }
  #dashboard h1 {
    margin-left: 1rem;
  }

  .db__content {
    display: flex;
    min-height: 800px;
    min-width: 800px;
    flex-wrap: wrap;
    padding: 1rem;
    flex: 1;
  }
  .db-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    /* margin: 1rem; */
  }
  .block {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    padding: 1rem;
    margin: 1rem;
    min-width: 500px;
  }
  .block header h2 {
    font-size: 1.2rem;
  }
Dynamic Labels on Legend and Crosshair 2/270 Working from Home Dashboard

Related Documentation: