Last updates

Commercial networks

Code View

<!-- Line Area Chart -->
<div class="col-12">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between">
            <div>
                <h5 class="card-title mb-0">Last updates</h5>
                <p class="card-subtitle my-0">Commercial networks</p>
            </div>
            <div class="dropdown">
                <button type="button"
                        class="btn dropdown-toggle px-0"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="icon-base bx bx-calendar"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a href="javascript:void(0);" class="dropdown-item">Today</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Yesterday</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Last 30 Days</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Current Month</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Last Month</a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div id="lineAreaChart"></div>
        </div>
    </div>
</div>
<!-- /Line Area Chart -->
Data Science
Code View

<!-- Data Science Bar Chart -->
<div class="col-12">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-md-center align-items-start">
            <h5 class="card-title mb-0">Data Science</h5>
            <div class="dropdown">
                <button type="button"
                        class="btn dropdown-toggle p-0"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="icon-base bx bx-calendar"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a href="javascript:void(0);" class="dropdown-item">Today</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Yesterday</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Last 30 Days</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Current Month</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item">Last Month</a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div id="barChart"></div>
        </div>
    </div>
</div>
<!-- /Data Science Bar Chart -->
New Technologies Data
Code View

<!-- New Technologies Data Scatter Chart -->
<div class="col-12">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">New Technologies Data</h5>
            <div class="btn-group d-none d-sm-flex" role="group" aria-label="radio toggle button group">
                <input type="radio" class="btn-check" name="btnradio" id="dailyRadio" checked />
                <label class="btn btn-outline-secondary" for="dailyRadio">Daily</label>

                <input type="radio" class="btn-check" name="btnradio" id="monthlyRadio" />
                <label class="btn btn-outline-secondary" for="monthlyRadio">Monthly</label>

                <input type="radio" class="btn-check" name="btnradio" id="yearlyRadio" />
                <label class="btn btn-outline-secondary" for="yearlyRadio">Yearly</label>
            </div>
        </div>
        <div class="card-body">
            <div id="scatterChart"></div>
        </div>
    </div>
</div>
<!-- /New Technologies Data Scatter Chart -->
Balance

Commercial networks & enterprises

$ 100,000
20%
Code View

<!-- Balance Line Chart -->
<div class="col-12">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between">
            <div>
                <h5 class="card-title mb-0">Balance</h5>
                <p class="card-subtitle my-0">Commercial networks & enterprises</p>
            </div>
            <div class="d-sm-flex d-none align-items-center">
                <h5 class="mb-0 me-4">$ 100,000</h5>
                <span class="badge bg-label-secondary">
                    <i class="icon-base bx bx-down-arrow-alt icon-xs text-danger"></i>
                    <span class="align-middle">20%</span>
                </span>
            </div>
        </div>
        <div class="card-body">
            <div id="lineChart"></div>
        </div>
    </div>
</div>
<!-- /Balance Line Chart -->
Balance

$74,382.72

Code View

<!-- Balance Horizontal Bar Chart -->
<div class="card h-100">
    <div class="card-header d-flex justify-content-between align-items-center">
        <div>
            <h5 class="card-title mb-0">Balance</h5>
            <p class="my-0 card-subtitle">$74,382.72</p>
        </div>
        <div class="dropdown">
            <button type="button"
                    class="btn dropdown-toggle px-0"
                    data-bs-toggle="dropdown"
                    aria-expanded="false">
                <i class="icon-base bx bx-calendar"></i>
            </button>
            <ul class="dropdown-menu dropdown-menu-end">
                <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
                <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
                <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
                <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
                <li><hr class="dropdown-divider" /></li>
                <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
                <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div id="horizontalBarChart"></div>
    </div>
</div>
<!-- /Balance Horizontal Bar Chart -->
Stocks Prices

$50,863.98

Code View

<!-- Stocks Prices Candlestick Chart -->
<div class="col-md-6 col-12">
    <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h5 class="card-title mb-0">Stocks Prices</h5>
                <p class="card-subtitle my-0">$50,863.98</p>
            </div>
            <div class="dropdown">
                <button type="button"
                        class="btn dropdown-toggle px-0"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="icon-base bx bx-calendar"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div id="candleStickChart"></div>
        </div>
    </div>
</div>
<!-- /Stocks Prices Candlestick Chart -->
Daily Sales States
Last 28 Days Last Month Last Year
Code View

<!-- Daily Sales States Heat Map Chart -->
<div class="col-md-6 col-12">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Daily Sales States</h5>
            <div class="dropdown">
                <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1"
                        type="button"
                        id="heatChartDd"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="icon-base bx bx-dots-vertical-rounded"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd">
                    <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
                    <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
                    <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div id="heatMapChart"></div>
        </div>
    </div>
</div>
<!-- /Daily Sales States Heat Map Chart -->
Statistics
Code View

<!-- Statistics – Radial Bar Chart -->
<div class="col-md-6 col-12">
    <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
            <h5 class="card-title mb-0">Statistics</h5>
            <div class="dropdown">
                <button type="button"
                        class="btn dropdown-toggle p-0"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="icon-base bx bx-calendar"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div id="radialBarChart"></div>
        </div>
    </div>
</div>
<!-- /Statistics – Radial Bar Chart -->
Mobile Comparison
Last 28 Days Last Month Last Year
Code View

<!-- Mobile Comparison – Radar Chart -->
<div class="col-md-6 col-12">
    <div class="card h-100">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5 class="card-title mb-0">Mobile Comparison</h5>
            <div class="dropdown">
                <button class="btn btn-text-secondary rounded-pill text-body-secondary border-0 p-2 me-n1"
                        type="button"
                        id="heatChartDd1"
                        data-bs-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false">
                    <i class="icon-base bx bx-dots-vertical-rounded"></i>
                </button>
                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="heatChartDd1">
                    <a class="dropdown-item" href="javascript:void(0);">Last 28 Days</a>
                    <a class="dropdown-item" href="javascript:void(0);">Last Month</a>
                    <a class="dropdown-item" href="javascript:void(0);">Last Year</a>
                </div>
            </div>
        </div>
        <div class="card-body">
            <div id="radarChart"></div>
        </div>
    </div>
</div>
<!-- /Mobile Comparison – Radar Chart -->
Expense Ratio

Spending on various categories

Code View

<!-- Expense Ratio – Donut Chart -->
<div class="col-md-6 col-12">
    <div class="card h-100">
        <div class="card-header d-flex align-items-center justify-content-between">
            <div>
                <h5 class="card-title mb-0">Expense Ratio</h5>
                <p class="card-subtitle my-0">Spending on various categories</p>
            </div>
            <div class="dropdown d-none d-sm-flex">
                <button type="button"
                        class="btn dropdown-toggle px-0"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">
                    <i class="icon-base bx bx-calendar"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Today</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Yesterday</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 7 Days</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last 30 Days</a></li>
                    <li><hr class="dropdown-divider" /></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Current Month</a></li>
                    <li><a href="javascript:void(0);" class="dropdown-item d-flex align-items-center">Last Month</a></li>
                </ul>
            </div>
        </div>
        <div class="card-body">
            <div id="donutChart"></div>
        </div>
    </div>
</div>
<!-- /Expense Ratio – Donut Chart -->