Gallery Back to Gallery

Delivery Dashboard

Delivery Time
Average Time 6:51
Limit Time 10:00
Best Time 2:32

Longest Time 14:32

Powered by ZingChart
81%On Time81%On Time
Powered by ZingChart
Orders0$19.98$9.99$9.99$9.99$29.97
Powered by ZingChart
01/0713/0702/0703/0704/0705/0706/0707/0708/0709/0710/0711/0712/07050002500
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingSoft Demo</title>
  <script nonce="undefined" 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
    let chart1Id = 'chart1';
    let chart2Id = 'chart2';
    let chart3Id = 'chart3';

    // CHART DATA
    // -----------------------------
    let sales = [
      [19.98],
      [9.99],
      [9.99],
      [29.97],
      [9.99]
    ];
    let income = [
      500, 1000, 2500, 700, 3500, 600, 1000, 1000, 1000, 800, 3000, 4500, 5000,
    ];
    let 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
    let chart1Data = {
      type: 'ring',
      globals: {
        fontFamily: 'Poppins',
      },
      backgroundColor: 'transparent',
      plot: {
        valueBox: {
          text: '81%<br>On Time',
          fontSize: '24px',
          fontStyle: 'normal',
          fontWeight: 'normal',
          placement: 'center',
        },
        slice: '80%',
      },
      plotarea: {
        margin: '0px 0px 0px 0px',
      },
      series: [{
          values: [81],
          backgroundColor: 'var(--yellow)',
          borderWidth: '0px',
          shadow: false,
        },
        {
          values: [29],
          backgroundColor: 'var(--lightGray)',
          borderWidth: '0px',
          shadow: false,
        },
      ],
    };

    // Chart 2
    let chart2Data = {
      type: 'hbar',
      globals: {
        fontFamily: 'Poppins',
      },
      backgroundColor: 'transparent',
      title: {
        text: 'Orders',
        align: 'left',
        fontColor: 'var(--lightGray)',
        fontWeight: 'normal',
        padding: '16px',
      },
      plot: {
        tooltip: {
          visible: false,
        },
        barSpace: '32px',
        barWidth: '12px',
        borderWidth: '0px',
      },
      plotarea: {
        margin: '40px 56px 16px 56px',
      },
      scaleY: {
        visible: false,
      },
      scaleX: {
        labels: [],
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      scaleX2: {
        values: [
          '$' + sales[0],
          '$' + sales[1],
          '$' + sales[2],
          '$' + sales[3],
          '$' + sales[4],
        ],
        lineWidth: '0px',
        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
    let chart3Data = {
      type: 'line',
      globals: {
        fontFamily: 'Poppins',
      },
      backgroundColor: 'transparent',
      scaleX: {
        labels: dates,
        tick: {
          visible: false,
        },
      },
      scaleY: {
        values: '0: 5000: 2500',
        guide: {
          lineStyle: 'solid',
          lineColor: 'var(--lightGray)',
        },
        lineWidth: '0px',
        tick: {
          visible: false,
        },
      },
      series: [{
        values: income,
        lineColor: 'var(--yellow)',
        lineWidth: '5px',
        marker: {
          backgroundColor: 'var(--lightPurple)',
          borderColor: 'var(--yellow)',
          borderWidth: '3px',
          size: 8,
        },
      }, ],
    };

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

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

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

    // Chart 3
    zingchart.render({
      id: chart3Id,
      data: chart3Data,
      height: '250px',
      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
let chart1Id = 'chart1';
let chart2Id = 'chart2';
let chart3Id = 'chart3';

// CHART DATA
// -----------------------------
let sales = [[19.98], [9.99], [9.99], [29.97], [9.99]];
let income = [
  500, 1000, 2500, 700, 3500, 600, 1000, 1000, 1000, 800, 3000, 4500, 5000,
];
let 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
let chart1Data = {
  type: 'ring',
  globals: {
    fontFamily: 'Poppins',
  },
  backgroundColor: 'transparent',
  plot: {
    valueBox: {
      text: '81%<br>On Time',
      fontSize: '24px',
      fontStyle: 'normal',
      fontWeight: 'normal',
      placement: 'center',
    },
    slice: '80%',
  },
  plotarea: {
    margin: '0px 0px 0px 0px',
  },
  series: [
    {
      values: [81],
      backgroundColor: 'var(--yellow)',
      borderWidth: '0px',
      shadow: false,
    },
    {
      values: [29],
      backgroundColor: 'var(--lightGray)',
      borderWidth: '0px',
      shadow: false,
    },
  ],
};

// Chart 2
let chart2Data = {
  type: 'hbar',
  globals: {
    fontFamily: 'Poppins',
  },
  backgroundColor: 'transparent',
  title: {
    text: 'Orders',
    align: 'left',
    fontColor: 'var(--lightGray)',
    fontWeight: 'normal',
    padding: '16px',
  },
  plot: {
    tooltip: {
      visible: false,
    },
    barSpace: '32px',
    barWidth: '12px',
    borderWidth: '0px',
  },
  plotarea: {
    margin: '40px 56px 16px 56px',
  },
  scaleY: {
    visible: false,
  },
  scaleX: {
    labels: [],
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  scaleX2: {
    values: [
      '$' + sales[0],
      '$' + sales[1],
      '$' + sales[2],
      '$' + sales[3],
      '$' + sales[4],
    ],
    lineWidth: '0px',
    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
let chart3Data = {
  type: 'line',
  globals: {
    fontFamily: 'Poppins',
  },
  backgroundColor: 'transparent',
  scaleX: {
    labels: dates,
    tick: {
      visible: false,
    },
  },
  scaleY: {
    values: '0: 5000: 2500',
    guide: {
      lineStyle: 'solid',
      lineColor: 'var(--lightGray)',
    },
    lineWidth: '0px',
    tick: {
      visible: false,
    },
  },
  series: [
    {
      values: income,
      lineColor: 'var(--yellow)',
      lineWidth: '5px',
      marker: {
        backgroundColor: 'var(--lightPurple)',
        borderColor: 'var(--yellow)',
        borderWidth: '3px',
        size: 8,
      },
    },
  ],
};

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

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

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

// Chart 3
zingchart.render({
  id: chart3Id,
  data: chart3Data,
  height: '250px',
  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 39/281 Bitcoin Dashboard

Related Documentation:

?
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
$29.97
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source
2500
Reload
 
View As PNG
 
Download PDF
Download SVG
Download CSV
Download XLS
View Data Table
Print Chart
 
View Source