- var theme_customizer      = true;
- var peitychart            = true;
- var page_peitychart       = 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
                                      | Peity Chart
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Charts
                                      li.breadcrumb-item.active peity Chart 
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row
                        .col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Updating Chart
                            .card-body.peity-charts.peity-chart-primary
                              span.updating-chart 4,3,5,4,5,10,2,3,9,1,2,8
                        .col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Line Chart 1
                            .card-body.peity-charts.peity-chart-primary
                              span.line 5,3,9,6,5,9,7,3,5,2
                        .col-xl-4
                          .card
                            .card-header.pb-0
                              h5 Line Chart 2
                            .card-body.peity-charts.peity-chart-primary
                              span.line 0,-3,-6,-4,-5,-4,-7,-3,-5,-2
                        .col-xl-6.box-col-6
                          .card
                            .card-header.pb-0
                              h5 Bar Chart 1
                            .card-body.peity-charts
                              span.bar(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 5,3,9,6,5,9,7,3,5,2
                        .col-xl-6.box-col-6
                          .card
                            .card-header.pb-0
                              h5 Bar Chart 2
                            .card-body.peity-charts.peity-chart-primary
                              span.bar(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 5,3,2,-1,-3,-2,2,3,5,2
                        .col-xl-6.box-col-6
                          .card
                            .card-header.pb-0
                              h5 Donut Chart 1
                            .card-body.peity-charts
                              span.donut(data-peity='{ "fill": ["#24695c", "#efefef"]}') 226/360
                        .col-xl-6.box-col-6
                          .card
                            .card-header.pb-0
                              h5 Donut Chart 2
                            .card-body.peity-charts
                              span.donut(data-peity='{ "fill": ["#24695c", "#efefef"]}') 1,2,3,2,2
                        .col-xl-6.box-col-6
                          .card
                            .card-header.pb-0
                              h5 Pie Chart 1
                            .card-body.peity-charts
                              span.pie(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 226,134
                        .col-xl-6.box-col-6
                          .card
                            .card-header.pb-0
                              h5 Pie Chart 2
                            .card-body.peity-charts
                              span.pie(data-peity='{ "fill": ["#24695c", "#ba895d"]}') 1,2,3,2,2
                        .col-xl-6.xl-100.box-col-12
                          .card
                            .card-header.pb-0
                              h5 Donut Charts with Radius
                            .card-body
                              p.data-attributes
                                span(data-peity='{ "fill": ["#24695c", "#efefef"],    "innerRadius": 10, "radius": 40 }') 1/7
                                span(data-peity='{ "fill": ["#ba895d", "#efefef"], "innerRadius": 14, "radius": 36 }') 2/7
                                span(data-peity='{ "fill": ["#222222", "#efefef"], "innerRadius": 16, "radius": 32 }') 3/7
                                span(data-peity='{ "fill": ["#717171", "#efefef"],  "innerRadius": 18, "radius": 28 }') 4/7
                                span(data-peity='{ "fill": ["#e2c636", "#efefef"],   "innerRadius": 20, "radius": 24 }') 5/7
                                span(data-peity='{ "fill": ["#d22d3d", "#efefef"], "innerRadius": 18, "radius": 20 }') 6/7
                                span(data-peity='{ "fill": ["#e6edef", "#efefef"], "innerRadius": 15, "radius": 16 }') 7/7
                        .col-xl-6.xl-100.box-col-12
                          .card
                            .card-header.pb-0
                              h5 Peity Charts With Different Colors
                            .card-body
                              .row
                                .col-sm-3.text-center.col-6
                                  .xm-mb-peity
                                    span.bar-colours-1 5,3,9,6,5,9,7,3,5,2
                                .col-sm-3.text-center.col-6
                                  .xm-mb-peity
                                    span.bar-colours-2 5,3,2,-1,-3,-2,2,3,5,2
                                .col-sm-3.text-center.col-6
                                  span.bar-colours-3 0,-3,-6,-4,-5,-4,-7,-3,-5,-2
                                .col-sm-3.text-center.col-6
                                  span.pie-colours-1 4,7,6,5
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files