Delivery Dashboard

Please enable JavaScript to see the interactive demo.

https://app.zingsoft.com/demos/embed/AXQTIXJH

Delivery Time

Average Time 6:51

Limit Time 10:00

Best Time 2:32

Longest Time 14:32

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
  <style>
    /* Defaults */

    :root {
      --purple: #212135;
      --lightPurple: #2D2D45;
      --yellow: #FCEA3C;
      --white: #FFFFFF;
      --lightGray: #7C7C8E;
      --green: #A5F291;
      --red: #FA7477;
    }

    .zc-body {
      justify-content: center;
      background-color: var(--purple);
      font-family: Poppins;
    }

    /* Main Wrapper */

    .dashboard {
      margin: 0 auto;
      padding-bottom: 1.5rem;
      width: 100%;
      max-width: 95%;
    }

    /* Nav */

    .dashboard-nav {
      display: flex;
      align-items: center;
      min-height: 100px;
    }

    .dashboard-nav a {
      color: var(--lightGray);
      font-size: 24px;
      text-decoration: none;
      transition: .3s ease-in-out;
    }

    .dashboard-nav a:hover {
      color: var(--white);
    }

    .dashboard-nav a+a {
      margin-left: 1rem;
    }

    /* Body */

    .dashboard-body {
      min-height: 575px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
    }

    /* Panel */

    .dashboard-panel {
      min-height: 250px;
      padding: 1rem;
      grid-column: 1 / -1;
      color: var(--lightGray);
      font-size: 1.125rem;
      background-color: var(--lightPurple);
    }

    .dashboard-panel.nopad {
      padding: 0;
    }

    .dashboard-panel.layout-2of3 {
      grid-column: 1 / -2;
    }

    .dashboard-panel.layout-1of3 {
      grid-column: 3 / -2;
    }

    /* Panel Title */

    .dashboard-intro {
      font-size: 24px;
      color: var(--white);
      font-weight: normal;
    }

    /* Times */

    .panel-times {
      min-height: 300px;
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
    }

    .dashboard-times {
      display: grid;
      grid-template-columns: 2fr 1fr;
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
    }

    .dashboard-times div strong {
      display: block;
    }

    .dashboard-times div span {
      color: var(--white);
      font-size: 2rem;
    }

    .dashboard-times div .green {
      color: var(--green);
    }

    .dashboard-times div .red {
      color: var(--red);
    }

    .dashboard-times .dashboard-intro {
      grid-column: 1 / -1;
    }

    .zc-ref {
      display: none;
    }
  </style>
</head>

<body class="zc-body">

  <div class="dashboard">

    <!-- Nav -->
    <nav class="dashboard-nav">
      <a href="#">Dashboard</a>
      <a href="#">Tasks</a>
      <a href="#">Couriers</a>
    </nav>

    <!-- Dashboard -->
    <div class="dashboard-body">

      <!-- Panel -->
      <div class="dashboard-panel layout-2of3 panel-times">

        <!-- Delivery Times -->
        <div class="dashboard-times">
          <strong class="dashboard-intro">Delivery Time</strong>

          <div>
            <strong>Average Time</strong>
            <span>6:51</span>
          </div>

          <div>
            <strong>Limit Time</strong>
            <span>10:00</span>
          </div>

          <div>
            <strong>Best Time</strong>
            <span class="green">2:32</span></p>
          </div>

          <div>
            <strong>Longest Time</strong>
            <span class="red">14:32</span></p>
          </div>

        </div>

        <!-- Chart 1 -->
        <div id="chart1">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>

      </div>


      <!-- Panel -->
      <div class="dashboard-panel layout-1of3 nopad">
        <div id="chart2">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>


      <!-- Panel -->
      <div class="dashboard-panel nopad">
        <div id="chart3">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>

    </div>

  </div>

  <script>
    ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    // DEFINE CHART LOCATIONS (IDS)
    // -----------------------------
    // Main chart render location
    var chart1Id = 'chart1';
    var chart2Id = 'chart2';
    var chart3Id = 'chart3';


    // CHART DATA
    // -----------------------------
    var sales = [
      [19.98],
      [9.99],
      [9.99],
      [29.97],
      [9.99]
    ];
    var income = [500, 1000, 2500, 700, 3500, 600, 1000, 1000, 1000, 800, 3000, 4500, 5000];
    var dates = ['01/07', '02/07', '03/07', '04/07', '05/07', '06/07', '07/07', '08/07', '09/07', '10/07', '11/07', '12/07', '13/07'];


    // CHART CONFIG
    // -----------------------------

    // Chart 1
    var chart1Data = {
      type: 'ring',
      backgroundColor: 'transparent',
      globals: {
        fontFamily: 'Poppins',
      },
      plot: {
        slice: '80%',
        valueBox: {
          placement: 'center',
          text: '81%<br>On Time',
          fontWeight: 'normal',
          fontSize: '24px',
          fontStyle: 'normal'
        }
      },
      plotarea: {
        margin: '0px 0px 0px 0px'
      },
      series: [{
          values: [81],
          backgroundColor: 'var(--yellow)',
          borderWidth: 0,
          shadow: false
        },
        {
          values: [29],
          backgroundColor: 'var(--lightGray)',
          borderWidth: 0,
          shadow: false
        }
      ]
    };

    // Chart 2
    var chart2Data = {
      type: 'hbar',
      globals: {
        fontFamily: 'Poppins'
      },
      backgroundColor: 'transparent',
      title: {
        text: 'Orders',
        fontColor: 'var(--lightGray)',
        fontWeight: 'normal',
        align: 'left',
        padding: '16px'
      },
      tooltip: {
        visible: false
      },
      plot: {
        barWidth: 12,
        borderWidth: 0,
        barSpace: '32px'
      },
      plotarea: {
        margin: '40px 56px 16px 56px'
      },
      scaleY: {
        visible: false
      },
      scaleX: {
        labels: [],
        lineWidth: 0,
        tick: {
          visible: false
        }
      },
      scaleX2: {
        lineWidth: 0,
        values: ['$' + sales[0], '$' + sales[1], '$' + sales[2], '$' + sales[3], '$' + sales[4]],
        tick: {
          visible: false
        }
      },
      series: [{
          values: sales[0],
          backgroundColor: 'var(--yellow)'
        },
        {
          values: sales[1],
          backgroundColor: 'var(--yellow)'
        },
        {
          values: sales[2],
          backgroundColor: 'var(--yellow)'
        },
        {
          values: sales[3],
          backgroundColor: 'var(--yellow)'
        },
        {
          values: sales[4],
          backgroundColor: 'var(--yellow)'
        }
      ]
    };

    // Chart 3
    var chart3Data = {
      type: 'line',
      globals: {
        fontFamily: 'Poppins'
      },
      backgroundColor: 'transparent',
      scaleX: {
        labels: dates,
        tick: {
          visible: false
        }
      },
      scaleY: {
        lineWidth: 0,
        values: '0: 5000: 2500',
        tick: {
          visible: false
        },
        guide: {
          lineStyle: 'solid',
          lineColor: 'var(--lightGray)'
        }
      },
      series: [{
        values: income,
        lineColor: 'var(--yellow)',
        lineWidth: 5,
        marker: {
          backgroundColor: 'var(--lightPurple)',
          borderColor: 'var(--yellow)',
          borderWidth: 3,
          size: 8
        }
      }]
    }


    // RENDER CHARTS
    // -----------------------------

    // Chart 1
    zingchart.render({
      id: chart1Id,
      data: chart1Data,
      height: 300,
      width: '100%'
    });

    // Chart 2
    zingchart.render({
      id: chart2Id,
      data: chart2Data,
      height: 300,
      width: '100%'
    });

    // Chart 3
    zingchart.render({
      id: chart3Id,
      data: chart3Data,
      height: 250,
      width: '100%'
    });
  </script>
</body>

</html>

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
</head>

<body class="zc-body">

  <div class="dashboard">
      
    <!-- Nav -->
    <nav class="dashboard-nav">
      <a href="#">Dashboard</a>
      <a href="#">Tasks</a>
      <a href="#">Couriers</a>
    </nav>
  
    <!-- Dashboard -->
    <div class="dashboard-body">

      <!-- Panel -->
      <div class="dashboard-panel layout-2of3 panel-times">

        <!-- Delivery Times -->
        <div class="dashboard-times">
          <strong class="dashboard-intro">Delivery Time</strong>
          
          <div>
            <strong>Average Time</strong>
            <span>6:51</span>
          </div>
          
          <div>
            <strong>Limit Time</strong>
            <span>10:00</span>
          </div>
          
          <div>
            <strong>Best Time</strong>
            <span class="green">2:32</span></p>
          </div>
          
          <div>
            <strong>Longest Time</strong>
            <span class="red">14:32</span></p>
          </div>

        </div>

        <!-- Chart 1 -->
        <div id="chart1">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>

      </div>
      
      
      <!-- Panel -->
      <div class="dashboard-panel layout-1of3 nopad">
        <div id="chart2">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>
      
      
      <!-- Panel -->
      <div class="dashboard-panel nopad">
        <div id="chart3">
          <a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
        </div>
      </div>
      
    </div>
    
  </div>

</body>
</html>

// DEFINE CHART LOCATIONS (IDS)
// -----------------------------
// Main chart render location
var chart1Id = 'chart1';
var chart2Id = 'chart2';
var chart3Id = 'chart3';


// CHART DATA
// -----------------------------
var sales = [[19.98], [9.99], [9.99], [29.97], [9.99]];
var income =  [500, 1000, 2500, 700, 3500, 600, 1000, 1000, 1000, 800, 3000, 4500, 5000];
var dates = ['01/07','02/07','03/07','04/07','05/07','06/07','07/07','08/07','09/07','10/07','11/07','12/07','13/07'];


// CHART CONFIG
// -----------------------------

// Chart 1
var chart1Data = {
  type: 'ring',
  backgroundColor: 'transparent',
  globals: {
    fontFamily: 'Poppins',
  },
  plot: {
    slice: '80%',
    valueBox: {
      placement: 'center',
      text: '81%<br>On Time',
      fontWeight: 'normal',
      fontSize: '24px',
      fontStyle: 'normal'
    }
  },
  plotarea: {
    margin: '0px 0px 0px 0px'
  },
  series: [
    {
      values: [81],
      backgroundColor: 'var(--yellow)',
      borderWidth: 0,
      shadow: false
    },
    {
      values: [29],
      backgroundColor: 'var(--lightGray)',
      borderWidth: 0,
      shadow: false
    }
  ]
};

// Chart 2
var chart2Data = {
  type: 'hbar',
  globals: {
    fontFamily: 'Poppins'
  },
  backgroundColor: 'transparent',
  title: {
    text: 'Orders',
    fontColor: 'var(--lightGray)',
    fontWeight: 'normal',
    align: 'left',
    padding: '16px'
  },
  tooltip: {
    visible: false
  },
  plot: {
    barWidth: 12,
    borderWidth: 0,
    barSpace: '32px'
  },
  plotarea: {
    margin: '40px 56px 16px 56px'
  },
  scaleY: {
    visible: false
  },
  scaleX: {
    labels: [],
    lineWidth: 0,
    tick: {
      visible: false
    }
  },
  scaleX2: {
    lineWidth: 0,
    values: ['$' + sales[0], '$' + sales[1], '$' + sales[2], '$' + sales[3], '$' + sales[4]],
    tick: {
      visible: false
    }
  },
  series: [
    {
      values: sales[0],
      backgroundColor: 'var(--yellow)'
    },
    {
      values: sales[1],
      backgroundColor: 'var(--yellow)'
    }, 
    {
      values: sales[2],
      backgroundColor: 'var(--yellow)'
    },
    {
      values: sales[3],
      backgroundColor: 'var(--yellow)'
    },
    {
      values: sales[4],
      backgroundColor: 'var(--yellow)'
    }
  ]
};

// Chart 3
var chart3Data = {
  type: 'line',
  globals: {
    fontFamily: 'Poppins'
  },
  backgroundColor: 'transparent',
  scaleX: {
    labels: dates,
    tick: {
      visible: false
    }
  },
  scaleY: {
    lineWidth: 0,
    values: '0: 5000: 2500',
    tick: {
      visible: false
    },
    guide: {
      lineStyle: 'solid',
      lineColor: 'var(--lightGray)'
    }
  },
  series: [
    {
      values: income,
      lineColor: 'var(--yellow)',
      lineWidth: 5,
      marker: {
        backgroundColor: 'var(--lightPurple)',
        borderColor: 'var(--yellow)',
        borderWidth: 3,
        size: 8
      }
    }
  ]
}


// RENDER CHARTS
// -----------------------------

// Chart 1
zingchart.render({ 
  id: chart1Id, 
  data : chart1Data, 
  height: 300, 
  width: '100%'
});

// Chart 2
zingchart.render({ 
  id: chart2Id, 
  data : chart2Data, 
  height: 300, 
  width: '100%'
});

// Chart 3
zingchart.render({ 
  id: chart3Id, 
  data : chart3Data, 
  height: 250, 
  width: '100%'
});

/* Defaults */
:root {
  --purple: #212135;
  --lightPurple: #2D2D45;
  --yellow: #FCEA3C;
  --white: #FFFFFF;
  --lightGray: #7C7C8E;
  --green: #A5F291;
  --red: #FA7477;
}

.zc-body {
  justify-content: center;
  background-color: var(--purple);
  font-family: Poppins;
}

/* Main Wrapper */
.dashboard {
  margin: 0 auto;
  padding-bottom: 1.5rem;
  width: 100%;
  max-width: 95%;
}

/* Nav */
.dashboard-nav {
  display: flex;
  align-items: center;
  min-height: 100px;
}
.dashboard-nav a {
  color: var(--lightGray);
  font-size: 24px;
  text-decoration: none;
  transition: .3s ease-in-out;
}
.dashboard-nav a:hover {
  color: var(--white);
}
.dashboard-nav a + a {
  margin-left: 1rem;
}

/* Body */
.dashboard-body {
  min-height: 575px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

/* Panel */
.dashboard-panel {
  min-height: 250px;
  padding: 1rem;
  grid-column: 1 / -1;
  color: var(--lightGray);
  font-size: 1.125rem;
  background-color: var(--lightPurple);
}
.dashboard-panel.nopad { padding:0; }
.dashboard-panel.layout-2of3 { grid-column: 1 / -2; }
.dashboard-panel.layout-1of3 { grid-column: 3 / -2; }

/* Panel Title */
.dashboard-intro {
  font-size: 24px;
  color: var(--white);
  font-weight: normal;
}

/* Times */
.panel-times { 
  min-height:300px; 
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}

.dashboard-times { 
  display:grid;
  grid-template-columns: 2fr 1fr;
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
}
.dashboard-times div strong { display:block; }
.dashboard-times div span { color:var(--white); font-size:2rem; }
.dashboard-times div .green { color:var(--green); }
.dashboard-times div .red { color:var(--red); }

.dashboard-times .dashboard-intro { 
  grid-column: 1 / -1;
}

.zc-ref { display:none; }

Stock Trading Phone Dashboard 28/267 Bitcoin Dashboard

Delivery Dashboard

Related Documentation: