- var prism                 = true;
- var theme_customizer      = true;
- var tooltip               = true;
- var counter               = true;
- var clipboard             = true;
- var customcard            = true;
- var apex_widget           = true;
- var apex                  = true;
- var chart_widget          = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                      .page-header
                        .row
                          .col-sm-6
                            h3
                              | Chart
                            ol.breadcrumb
                              li.breadcrumb-item
                                a(href='index.html')
                                 | Home
                              li.breadcrumb-item Widgets
                              li.breadcrumb-item.active Chart
                          .col-sm-6
                            include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid.chart-widget
                      // Chart widget top Start
                      .row
                        .col-xl-4
                          .card.o-hidden
                            .chart-widget-top
                              .row.card-body
                                .col-5
                                  h6.f-w-600.font-primary SALE
                                  span.num
                                    span.counter 90
                                    | %
                                    i.icon-angle-up.f-12
                                .col-7.text-end
                                  h4.num.total-value
                                    | $ 
                                    span.counter 3654
                                    | .00
                              div
                                #chart-widget1
                        .col-xl-4
                          .card.o-hidden
                            .chart-widget-top
                              .row.card-body
                                .col-7
                                  h6.f-w-600.font-secondary PROJECTS
                                  span.num
                                    span.counter 30
                                    | %
                                    i.icon-angle-up.f-12
                                .col-5.text-end
                                  h4.num.total-value.counter 12569
                              div#chart-widget2
                                #chart-widget-top-second.flot-chart-placeholder
                        .col-xl-4
                          .card.o-hidden
                            .chart-widget-top
                              .row.card-body
                                .col-8
                                  h6.f-w-600.font-success PRODUCTS
                                  span.num
                                    span.counter 68
                                    | %
                                    i.icon-angle-up.f-12
                                .col-4.text-end
                                  h4.num.total-value
                                    span.counter 93
                                    | M
                              div#chart-widget3
                                #chart-widget-top-third.flot-chart-placeholder
                      // Chart widget top Ends
                      // Chart widget with bar chart Start
                      .row
                        .col-xl-7
                          .card.o-hidden
                            .card-header.pb-0
                              h5 Marketing Expenses
                            .bar-chart-widget
                              .bottom-content.card-body
                                .row
                                  .col-12
                                    div#chart-widget4
                        .col-xl-5
                          .card.o-hidden
                            .card-header.pb-0
                              h5 Total Earning
                            .bar-chart-widget
                              .top-content.bg-primary
                              .bottom-content.card-body
                                .row
                                  .col-12
                                    div#chart-widget5 
                                .row.text-center
                                  .col-4.b-r-light
                                    div
                                      span.font-primary
                                        | 12%
                                        i.icon-angle-up.f-12.ms-1
                                      span.text-muted.block-bottom Year
                                      h4.num.m-0
                                        span.counter.color-bottom 3659
                                        | M
                                  .col-4.b-r-light
                                    div
                                      span.font-primary
                                        | 15%
                                        i.icon-angle-up.f-12.ms-1
                                      span.text-muted.block-bottom Month
                                      h4.num.m-0
                                        span.counter.color-bottom 698
                                        | M
                                  .col-4
                                    div
                                      span.font-primary
                                        | 34%
                                        i.icon-angle-up.f-12.ms-1
                                      span.text-muted.block-bottom Today
                                      h4.num.m-0
                                        span.counter.color-bottom 9361
                                        | M
                        
                      // small widgets Start
                      .row
                        // Live Product chart widget Start
                        .xl-50.col-xl-7.box-col-6
                          .small-chart-widget.chart-widgets-small
                            .card
                              .card-header.pb-0
                                h5 Live Products
                                .setting-list
                                  ul.list-unstyled.setting-option
                                    li
                                      .setting-primary
                                       i.icon-settings
                                    li
                                      i.view-html.fa.fa-code.font-white
                                    li
                                      i.icofont.icofont-maximize.full-card.font-white
                                    li
                                      i.icofont.icofont-minus.minimize-card.font-white
                                    li
                                      i.icofont.icofont-refresh.reload-card.font-white
                                    li
                                      i.icofont.icofont-error.close-card.font-white
                              .card-body
                                .chart-container
                                  .row
                                    .col-12
                                      div#chart-widget6
                                .code-box-copy
                                  button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
                                    i.icofont.icofont-copy-alt
                                  pre
                                    code.language-html#example-head
                                      | <!-- Cod Box Copy begin -->
                                      | <div class="chart-container">
                                      |   <div class="row">
                                      |     <div class="col-12">
                                      |       <div id="chart-widget6"></div>
                                      |     </div>
                                      |   </div>
                                      | </div>
                                      | <!-- Cod Box Copy end -->
                        // Live Product chart widget Ends
                        // Turnover chart widget Start
                        .xl-50.col-xl-5.box-col-6
                          .small-chart-widget.chart-widgets-small
                            .card
                              .card-header.pb-0
                                h5 Turnover
                                .setting-list
                                  ul.list-unstyled.setting-option
                                    li
                                      .setting-primary
                                       i.icon-settings
                                    li
                                      i.view-html.fa.fa-code.font-white
                                    li
                                      i.icofont.icofont-maximize.full-card.font-white
                                    li
                                      i.icofont.icofont-minus.minimize-card.font-white
                                    li
                                      i.icofont.icofont-refresh.reload-card.font-white
                                    li
                                      i.icofont.icofont-error.close-card.font-white
                              .card-body
                                .chart-container
                                  .row
                                    .col-12
                                      div#chart-widget7
                                .code-box-copy
                                  button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
                                    i.icofont.icofont-copy-alt
                                  pre
                                    code.language-html#example-head1
                                      | <!-- Cod Box Copy begin -->
                                      | <div class="chart-container">
                                      |   <div class="row">
                                      |     <div class="col-12">
                                      |       <div id="chart-widget7"></div>
                                      |     </div>
                                      |   </div>
                                      | </div>
                                      | <!-- Cod Box Copy end -->
                        // Turnover chart widget Ends
                        // Monthly Sale chart widget Start
                        .xl-50.col-xl-5.box-col-6
                          .small-chart-widget.chart-widgets-small
                            .card
                              .card-header.pb-0
                                h5 Monthly Sales
                                .setting-list
                                  ul.list-unstyled.setting-option
                                    li
                                      .setting-primary
                                       i.icon-settings
                                    li
                                      i.view-html.fa.fa-code.font-white
                                    li
                                      i.icofont.icofont-maximize.full-card.font-white
                                    li
                                      i.icofont.icofont-minus.minimize-card.font-white
                                    li
                                      i.icofont.icofont-refresh.reload-card.font-white
                                    li
                                      i.icofont.icofont-error.close-card.font-white
                              .card-body
                                .chart-container
                                  .row
                                    .col-12
                                      div#chart-widget8
                                .code-box-copy
                                  button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
                                    i.icofont.icofont-copy-alt
                                  pre
                                    code.language-html#example-head2
                                      | <!-- Cod Box Copy begin -->
                                      | <div class="chart-container">
                                      |   <div class="row">
                                      |     <div class="col-12">
                                      |       <div id="chart-widget8"></div>
                                      |     </div>
                                      |   </div>
                                      | </div>
                                      | <!-- Cod Box Copy end -->
                        // Monthly Sale chart widget Ends
                        // Uses chart widget Start
                        .xl-50.col-xl-7.box-col-6
                          .small-chart-widget.chart-widgets-small
                            .card
                              .card-header.pb-0
                                h5 Uses
                                .setting-list
                                  ul.list-unstyled.setting-option
                                    li
                                      .setting-primary
                                       i.icon-settings
                                    li
                                      i.view-html.fa.fa-code.font-white
                                    li
                                      i.icofont.icofont-maximize.full-card.font-white
                                    li
                                      i.icofont.icofont-minus.minimize-card.font-white
                                    li
                                      i.icofont.icofont-refresh.reload-card.font-white
                                    li
                                      i.icofont.icofont-error.close-card.font-white
                              .card-body
                                .chart-container
                                  .row
                                    .col-12
                                      div#chart-widget9
                                .code-box-copy
                                  button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
                                    i.icofont.icofont-copy-alt
                                  pre
                                    code.language-html#example-head3
                                      | <!-- Cod Box Copy begin -->
                                      | <div class="chart-container">
                                      |   <div class="row">
                                      |     <div class="col-12">
                                      |       <div id="chart-widget9"></div>
                                      |     </div>
                                      |   </div>
                                      | </div>
                                      | <!-- Cod Box Copy end -->
                        // Uses chart widget Ends
                        // small widgets Ends
                        // Browser uses and website visiter widget Start
                      .row
                        // browser uses widget chart Start
                        .col-sm-12.box-col-12
                          .donut-chart-widget
                            .card
                              .card-header.pb-0
                                h5 Browser Uses
                                .setting-list
                                  ul.list-unstyled.setting-option
                                    li
                                      .setting-primary
                                       i.icon-settings
                                    li
                                      i.view-html.fa.fa-code.font-white
                                    li
                                      i.icofont.icofont-maximize.full-card.font-white
                                    li
                                      i.icofont.icofont-minus.minimize-card.font-white
                                    li
                                      i.icofont.icofont-refresh.reload-card.font-white
                                    li
                                      i.icofont.icofont-error.close-card.font-white
                              .card-body
                                #chart-widget13
                                .code-box-copy
                                  button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
                                    i.icofont.icofont-copy-alt
                                  pre
                                    code.language-html#example-head4
                                      | <!-- Cod Box Copy begin -->
                                      | <div id="#chart-widget13"></div>
                                      | <!-- Cod Box Copy end -->
                        // browser uses widget chart Endss
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files