JezK

Edit File: dashboard123.php

<?php 
include("header.php");
?>
<section class="dashboard-counts section-padding">
    <div class="container-fluid bg-white px-5 py-3">
        <div class="row bg-white">
            
            <div class="container px-1">

<div class="form-group calender-Right">
                    <label class="fieldName mt-2 mr-2">Select Date Range</label>
                    <div id="reportrange" class="col-xl-5 col-md-6 col-lg-8 formField-control" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc;">
                        <i class="fa fa-calendar float-right pt-1"></i>&nbsp;
                        <span></span>
                        
                    </div>
                </div>
            </div>
            
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title d-flex blue-Block">
                    <div class="icon"><i class="icon-user"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">25K</strong>
                        <span>Users</span>
                        
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title d-flex  pink-Block">
                    <div class="icon"><i class="icon-padnote"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">5K</strong>
                        <span>Business</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title orange-Block d-flex">
                    <div class="icon"><i class="icon-check"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">2.5K</strong>
                        <span>Professionals</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title green-Block d-flex">
                    <div class="icon"><i class="icon-bill"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">$2.5M</strong>
                        <span>Total Income</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="charts">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6">
                <div class="card line-chart-example">
                    <div class="card-body">
                        <div id="chart">
                            <h6 class="mt-2">User joined vs Appointment</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card bar-chart-example">
                    <div class="card-body">
                        <h6 class="mt-2">Business Locations</h6>
                        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d15260.857990789558!2d82.24768!3d17.013145599999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sin!4v1566289458619!5m2!1sen!2sin" width="100%" height="400" frameborder="0" style="border:0" allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="dashboard-counts down-section-padding">
    <div class="container-fluid bg-white px-5 py-3">
        <div class="row bg-white">
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title d-flex violet-block">
                    <div class="icon"><i class="icon-user"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">25K</strong>
                        <span>Total Conferences</span>
                        
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title d-flex  sky-block">
                    <div class="icon"><i class="icon-padnote"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">5K</strong>
                        <span>Ongoing Conferences</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title darkPink-block d-flex">
                    <div class="icon"><i class="icon-check"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">2.5K</strong>
                        <span>Cancelled Conferences</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-4 col-lg-6">
                <div class="wrapper count-title yellow-block d-flex">
                    <div class="icon"><i class="icon-bill"></i></div>
                    <div class="name mb-2"><strong class="count-number text-white">$2.5M</strong>
                        <span>Completed Conferences</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script src="js/apexcharts.js"></script>
<script>
var options = {
      chart: {
        height: 350,
        type: 'line',
        stacked: false
      },
     
    stroke: {
    show: true,
    colors: ['#5c91a1', '#3772ee'],
    width: 2,
    dashArray: 0,      
},
   
      series: [{
        name: 'Users',
        type: 'area',
        color: '#5c91a1',
        data: [ 0 ,500, 1100, 1700, 2400]
        
      }, {
        name: 'Appointment',
        type: 'area',
        color: '#3772ee',
        data: [55, 850, 1350, 1500, 2100]
      }],
      fill: {
        type:'solid',
        opacity: [0.35, 0.25],
      },
      labels: ['Jan 01', 'Jan 08','Jan 15','Jan 22','Jan 29'],
      markers: {
        size: 0
      },
      legend:{
        shape: "square", 
        horizontalAlign:'right',
        position: 'top',
        colors: ['#5c91a1', '#3772ee'],
        radius: 0
       
     },
     
      markers: {
        size: [3, 3],
        colors: ['#5c91a1', '#3772ee'],
        strokeColors: '#fff',
        strokeWidth: 2,
        strokeOpacity: 0.9,
        fillOpacity: 1,
        discrete: [],
        shape: "circle",
        radius: 2,
        offsetX: 0,
        offsetY: 0,
        onClick: undefined,
        onDblClick: undefined,
    },
      tooltip: {
        shared: true,
        intersect: false,
        y: {
          formatter: function (y) {
            if(typeof y !== "undefined") {
              return  y.toFixed(0) + " points";
            }
            return y;
            
          }
        }
      }

}

var chart = new ApexCharts(
      document.querySelector("#chart"),
      options
    );

chart.render();
    </script>

<?php include("footer.php");?>