ابزارک های نمودار
نمودار تک میله ای
نمودار میله ای روشی برای نشان دادن مقادیر داده ارائه شده به صورت میله های عمودی ارائه می دهد.
کاربران فعال
کاربران شما در آن زمان چگونه بازدید کردند.
ماهانه
9.28هزار
4.63%
هفتگی
2.69هزار
1.92%
روزانه (میانگین)
0.94هزار
3.45%
01 فروردین 1402
30 فروردین 1402
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group align-start pb-3 g-2">
<div class="card-title">
<h6 class="title">کاربران فعال</h6>
<p>کاربران شما در آن زمان چگونه بازدید کردند.</p>
</div>
<div class="card-tools">
<em class="card-hint icon ni ni-help" data-toggle="tooltip" data-bs-placement="right" title="کاربران این ماه"></em>
</div>
</div>
<div class="analytic-au">
<div class="analytic-data-group analytic-au-group g-3">
<div class="analytic-data analytic-au-data">
<div class="title">ماهانه</div>
<div class="amount">9.28هزار</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>4.63%</div>
</div>
<div class="analytic-data analytic-au-data">
<div class="title">هفتگی</div>
<div class="amount">2.69هزار</div>
<div class="change down"><em class="icon ni ni-arrow-long-down"></em>1.92%</div>
</div>
<div class="analytic-data analytic-au-data">
<div class="title">روزانه (میانگین)</div>
<div class="amount">0.94هزار</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>3.45%</div>
</div>
</div>
<div class="analytic-au-ck">
<canvas class="analytics-au-chart" id="analyticAuData"></canvas>
</div>
<div class="chart-label-group">
<div class="chart-label">01 فروردین 1402</div>
<div class="chart-label">30 فروردین 1402</div>
</div>
</div>
</div>
</div><!-- .card -->
نمودار چند میله ای
نمودار میله ای روشی برای مقایسه مجموعه داده های متعدد در کنار هم ارائه می دهد.
نمای کلی سفارشات
نمای کلی خرید و فروش در 15 روز گذشته. آمار دقیق
12,954,000 تومان
ماه گذشته 3,900,000 تومان
خرید سفارشات
12,954,000 تومان
ماه گذشته 3,900,000 تومان
فروش سفارشات
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group align-start mb-3">
<div class="card-title">
<h6 class="title">نمای کلی سفارشات</h6>
<p>نمای کلی خرید و فروش در 15 روز گذشته. <a href="#" class="link link-sm">آمار دقیق</a></p>
</div>
<div class="card-tools mt-n1 me-n1">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#" class="active"><span>15 روز</span></a></li>
<li><a href="#"><span>30 روز</span></a></li>
<li><a href="#"><span>3 ماه</span></a></li>
</ul>
</div>
</div>
</div>
</div><!-- .card-title-group -->
<div class="nk-order-ovwg">
<div class="row g-4 align-end">
<div class="col-xxl-8">
<div class="nk-order-ovwg-ck">
<canvas class="order-overview-chart" id="orderOverview"></canvas>
</div>
</div><!-- .col -->
<div class="col-xxl-4">
<div class="row g-4">
<div class="col-sm-6 col-xxl-12">
<div class="nk-order-ovwg-data buy">
<div class="amount">12,954,000 <small class="currenct currency-usd">تومان</small></div>
<div class="info">ماه گذشته <strong>3,900,000 <span class="currenct currency-usd">تومان</span></strong></div>
<div class="title"><em class="icon ni ni-arrow-down-left"></em> خرید سفارشات</div>
</div>
</div>
<div class="col-sm-6 col-xxl-12">
<div class="nk-order-ovwg-data sell">
<div class="amount">12,954,000 <small class="currenct currency-usd">تومان</small></div>
<div class="info">ماه گذشته <strong>3,900,000 <span class="currenct currency-usd">تومان</span></strong></div>
<div class="title"><em class="icon ni ni-arrow-up-left"></em> فروش سفارشات</div>
</div>
</div>
</div>
</div><!-- .col -->
</div>
</div><!-- .nk-order-ovwg -->
</div><!-- .card-inner -->
</div><!-- .card -->
نمودار میله ای انباشته
نمودار میله ای روشی برای مقایسه چند داده با نمای انباشته ارائه می دهد.
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group align-start mb-3">
<div class="card-title">
<h6 class="title">فعالیت های کاربر</h6>
<p>در 30 روز گذشته <em class="icon ni ni-info" data-toggle="tooltip" data-bs-placement="left" title="اطلاعات ارجاع"></em></p>
</div>
<div class="card-tools mt-n1 me-n1">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>15 روز</span></a></li>
<li><a href="#" class="active"><span>30 روز</span></a></li>
<li><a href="#"><span>3 ماه</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="user-activity-group g-4">
<div class="user-activity">
<em class="icon ni ni-users"></em>
<div class="info">
<span class="amount">345</span>
<span class="title">عضویت مستقیم</span>
</div>
<div class="gfx" data-color="#9cabff">
<svg enable-background="new 0 0 48 17.5" version="1.1" viewBox="0 0 48 17.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="m1.2 17.4h-0.3c-0.5-0.1-0.8-0.7-0.7-1.2 2-7.2 5-12.2 8.8-14.7 1.5-1 3-1.5 4.5-1.4 4.9 0.3 7.2 4.9 9 8.5 0.3 0.4 0.5 0.8 0.7 1.2 1 1.8 2.7 3.9 4.5 4.3 0.9 0.2 1.7-0.1 2.6-0.8 1.8-1.4 3-3.7 4.1-5.9 0.5-1 1-1.9 1.5-2.9 1-1.5 2.8-3.5 4.9-3.8 1.1-0.1 2.2 0.3 3.1 1 1.3 1.1 1.9 2.6 2.4 4.1 0.4 1 0.7 1.9 1.2 2.6 0.3 0.4 0.2 1.1-0.2 1.4s-1.1 0.2-1.4-0.2c-0.7-0.9-1.1-2-1.5-3-0.5-1.3-1-2.5-1.9-3.3-0.5-0.4-1-0.6-1.5-0.5-1.3 0.2-2.7 1.6-3.5 2.8-0.5 0.8-1 1.8-1.4 2.7-1.2 2.4-2.4 4.9-4.6 6.5-1.3 1.1-2.8 1.5-4.2 1.2-3.1-0.6-5.1-3.9-5.9-5.3-0.2-0.4-0.4-0.8-0.6-1.3-1.7-3.4-3.5-7.2-7.3-7.4-1.1-0.1-2.1 0.3-3.3 1-3.5 2.4-6.2 7-8 13.7-0.2 0.4-0.6 0.7-1 0.7z"/>
</svg>
</div>
</div>
<div class="user-activity">
<em class="icon ni ni-users"></em>
<div class="info">
<span class="amount">49</span>
<span class="title">عضویت ارجاعی</span>
</div>
<div class="gfx" data-color="#ccd4ff">
<svg enable-background="new 0 0 48 17.5" version="1.1" viewBox="0 0 48 17.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="m1.2 17.4h-0.3c-0.5-0.1-0.8-0.7-0.7-1.2 2-7.2 5-12.2 8.8-14.7 1.5-1 3-1.5 4.5-1.4 4.9 0.3 7.2 4.9 9 8.5 0.3 0.4 0.5 0.8 0.7 1.2 1 1.8 2.7 3.9 4.5 4.3 0.9 0.2 1.7-0.1 2.6-0.8 1.8-1.4 3-3.7 4.1-5.9 0.5-1 1-1.9 1.5-2.9 1-1.5 2.8-3.5 4.9-3.8 1.1-0.1 2.2 0.3 3.1 1 1.3 1.1 1.9 2.6 2.4 4.1 0.4 1 0.7 1.9 1.2 2.6 0.3 0.4 0.2 1.1-0.2 1.4s-1.1 0.2-1.4-0.2c-0.7-0.9-1.1-2-1.5-3-0.5-1.3-1-2.5-1.9-3.3-0.5-0.4-1-0.6-1.5-0.5-1.3 0.2-2.7 1.6-3.5 2.8-0.5 0.8-1 1.8-1.4 2.7-1.2 2.4-2.4 4.9-4.6 6.5-1.3 1.1-2.8 1.5-4.2 1.2-3.1-0.6-5.1-3.9-5.9-5.3-0.2-0.4-0.4-0.8-0.6-1.3-1.7-3.4-3.5-7.2-7.3-7.4-1.1-0.1-2.1 0.3-3.3 1-3.5 2.4-6.2 7-8 13.7-0.2 0.4-0.6 0.7-1 0.7z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="user-activity-ck">
<canvas class="usera-activity-chart" id="userActivity"></canvas>
</div>
</div><!-- .card -->
نمودار خطی تک رنگ
نمودار خطی روشی برای رسم نقاط داده روی یک خط است.
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group align-start gx-3 mb-3">
<div class="card-title">
<h6 class="title">نمای کلی فروش</h6>
<p>فروش اشتراک محصول در 30 روز. <a href="#">مشاهده جزئیات</a></p>
</div>
<div class="card-tools">
<div class="dropdown">
<a href="#" class="btn btn-primary btn-dim d-none d-sm-inline-flex" data-toggle="dropdown"><em class="icon ni ni-download-cloud"></em><span><span class="d-none d-md-inline">دانلود</span> گزارش</span></a>
<a href="#" class="btn btn-icon btn-primary btn-dim d-sm-none" data-toggle="dropdown"><em class="icon ni ni-download-cloud"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>دانلود نسخه کوچک</span></a></li>
<li><a href="#"><span>دانلود نسخه کامل</span></a></li>
<li class="divider"></li>
<li><a href="#"><em class="icon ni ni-opt-alt"></em><span>تنظیمات بیشتر</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="nk-sale-data-group align-center justify-between gy-3 gx-5">
<div class="nk-sale-data">
<span class="amount">82,944,000 تومان</span>
</div>
<div class="nk-sale-data">
<span class="amount sm">1,937 <small>مشترک</small></span>
</div>
</div>
<div class="nk-sales-ck large pt-4">
<canvas class="sales-overview-chart" id="salesOverview"></canvas>
</div>
</div>
</div><!-- .card -->
نمودار خطی تک رنگ
نمودار خطی روشی برای رسم نقاط داده روی یک خط است. اغلب، برای نمایش داده های روند یا مقایسه دو مجموعه داده استفاده می شود.
نمای کلی مخاطبان
روند کاربران، جلسات، معیارهای نرخ پرش شما چگونه بوده است.
کاربران
2.57هزار
12.37%
جلسات
3.98هزار
47.74%
کاربران
28.49%
12.37%
کاربران
7د 28ث
0.35%
01 فروردین 1402
15 فروردین 1402
30 فروردین 1402
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group pb-3 g-2">
<div class="card-title">
<h6 class="title">نمای کلی مخاطبان</h6>
<p>روند کاربران، جلسات، معیارهای نرخ پرش شما چگونه بوده است.</p>
</div>
<div class="card-tools shrink-0 d-none d-sm-block">
<ul class="nav nav-switch-s2 nav-tabs bg-white">
<li class="nav-item"><a href="#" class="nav-link">7 روز</a></li>
<li class="nav-item"><a href="#" class="nav-link active">1 ماه</a></li>
<li class="nav-item"><a href="#" class="nav-link">3 ماه</a></li>
</ul>
</div>
</div>
<div class="analytic-ov">
<div class="analytic-data-group analytic-ov-group g-3">
<div class="analytic-data analytic-ov-data">
<div class="title">کاربران</div>
<div class="amount">2.57هزار</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>12.37%</div>
</div>
<div class="analytic-data analytic-ov-data">
<div class="title">جلسات</div>
<div class="amount">3.98هزار</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>47.74%</div>
</div>
<div class="analytic-data analytic-ov-data">
<div class="title">کاربران</div>
<div class="amount">28.49%</div>
<div class="change down"><em class="icon ni ni-arrow-long-down"></em>12.37%</div>
</div>
<div class="analytic-data analytic-ov-data">
<div class="title">کاربران</div>
<div class="amount">7د 28ث</div>
<div class="change down"><em class="icon ni ni-arrow-long-down"></em>0.35%</div>
</div>
</div>
<div class="analytic-ov-ck">
<canvas class="analytics-line-large" id="analyticOvData"></canvas>
</div>
<div class="chart-label-group ms-5">
<div class="chart-label">01 فروردین 1402</div>
<div class="chart-label d-none d-sm-block">15 فروردین 1402</div>
<div class="chart-label">30 فروردین 1402</div>
</div>
</div>
</div>
</div><!-- .card -->
نمودار چند خطی
نمودار خطی روشی برای رسم نقاط داده روی یک خط است.
کانال ترافیک
معیارهای کانال های ترافیک بالا.
کانال
جلسات
جلسات قبلی
تغییر
روند
جستجوی ارگانیک
4,305
4,129
4.29%
شبکه های اجتماعی
859
936
15.8%
ارجاعات
482
793
41.3%
سایر
138
97
12.6%
مثال کد
<div class="card">
<div class="card-inner mb-n2">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">کانال ترافیک</h6>
<p>معیارهای کانال های ترافیک بالا.</p>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 روز</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 روز</span></a></li>
<li><a href="#"><span>15 روز</span></a></li>
<li><a href="#"><span>30 روز</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="nk-tb-list is-loose traffic-channel-table">
<div class="nk-tb-item nk-tb-head">
<div class="nk-tb-col nk-tb-channel"><span>کانال</span></div>
<div class="nk-tb-col nk-tb-sessions"><span>جلسات</span></div>
<div class="nk-tb-col nk-tb-prev-sessions"><span>جلسات قبلی</span></div>
<div class="nk-tb-col nk-tb-change"><span>تغییر</span></div>
<div class="nk-tb-col nk-tb-trend tb-col-sm text-end"><span>روند</span></div>
</div><!-- .nk-tb-head -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">جستجوی ارگانیک</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>4,305</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>4,129</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>4.29%</span> <span class="change up"><em class="icon ni ni-arrow-long-up"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="OrganicSearchData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">شبکه های اجتماعی</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>859</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>936</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>15.8%</span> <span class="change down"><em class="icon ni ni-arrow-long-down"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="SocialMediaData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">ارجاعات</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>482</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>793</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>41.3%</span> <span class="change down"><em class="icon ni ni-arrow-long-down"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="ReferralsData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">سایر</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>138</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>97</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>12.6%</span> <span class="change up"><em class="icon ni ni-arrow-long-up"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="OthersData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
</div><!-- .nk-tb-list -->
</div><!-- .card -->
نمودارهای دونات
نمودارهای دونات احتمالا پرکاربردترین نمودارها هستند. برای نشان دادن نسبت های رابطه ای بین داده ها استفاده می شود.
کانال ترافیک
جستجوی ارگانیک
4,305 58.63%
شبکه های اجتماعی
859 23.94%
ارجاعات
482 12.94%
سایر
138 4.49%
مثال کد
<div class="card">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title card-title-sm">
<h6 class="title">کانال ترافیک</h6>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 روز</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 روز</span></a></li>
<li><a href="#"><span>15 روز</span></a></li>
<li><a href="#"><span>30 روز</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="traffic-channel">
<div class="traffic-channel-doughnut-ck">
<canvas class="analytics-doughnut" id="TrafficChannelDoughnutData"></canvas>
</div>
<div class="traffic-channel-group g-2">
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#9cabff"></span><span>جستجوی ارگانیک</span></div>
<div class="amount">4,305 <small>58.63%</small></div>
</div>
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#b8acff"></span><span>شبکه های اجتماعی</span></div>
<div class="amount">859 <small>23.94%</small></div>
</div>
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#ffa9ce"></span><span>ارجاعات</span></div>
<div class="amount">482 <small>12.94%</small></div>
</div>
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#f9db7b"></span><span>سایر</span></div>
<div class="amount">138 <small>4.49%</small></div>
</div>
</div><!-- .traffic-channel-group -->
</div><!-- .traffic-channel -->
</div>
</div><!-- .card -->
نمودارهای دونات با آیکون
نمودارهای دونات احتمالا پرکاربردترین نمودارها هستند. برای نشان دادن نسبت های رابطه ای بین داده ها استفاده می شود.
جلسات بر اساس دستگاه
دسکتاپ
84.5%
4.5%
تلفن همراه
14.2%
133.2%
تبلت
1.3%
25.3%
مثال کد
<div class="card">
<div class="card-inner stretch flex-column">
<div class="card-title-group">
<div class="card-title card-title-sm">
<h6 class="title">جلسات بر اساس دستگاه</h6>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 روز</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 روز</span></a></li>
<li><a href="#"><span>15 روز</span></a></li>
<li><a href="#"><span>30 روز</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="device-status my-auto">
<div class="device-status-ck">
<canvas class="analytics-doughnut" id="deviceStatusData"></canvas>
</div>
<div class="device-status-group">
<div class="device-status-data">
<em data-color="#798bff" class="icon ni ni-monitor"></em>
<div class="title">دسکتاپ</div>
<div class="amount">84.5%</div>
<div class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>4.5%</div>
</div>
<div class="device-status-data">
<em data-color="#baaeff" class="icon ni ni-mobile"></em>
<div class="title">تلفن همراه</div>
<div class="amount">14.2%</div>
<div class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>133.2%</div>
</div>
<div class="device-status-data">
<em data-color="#7de1f8" class="icon ni ni-tablet"></em>
<div class="title">تبلت</div>
<div class="amount">1.3%</div>
<div class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>25.3%</div>
</div>
</div><!-- .device-status-group -->
</div><!-- .device-status -->
</div>
</div><!-- .card -->
