@@include("partials/title-meta.html", {"title": "Sparklines Charts"}) @@include('./partials/head-css.html') @@include("partials/body.html")
@@include('./partials/topbar.html', {"pagetitle": "Sparklines Charts"}) @@include('./partials/left-sidebar.html')

#### Line Charts

#### Bar Chart

#### Pie Chart

#### Custom Line Chart

#### Mouse Speed Chart Example

#### Composite bar Chart

#### Jquery Knob

##### Disable display input

##### Cursor mode

##### Display previous value

##### Angle offset and arc

##### Angle offset

##### 5-digit values, step 1000

##### Readonly

##### Angle offset and arc

#### Pie Charts

Graph | Code
--- | ---
1/5 | `<span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1/5</span>`
226/360 | `<span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226/360</span>`
0.52/1.561 | `<span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>`
1,4 | `<span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1,4</span>`
226,134 | `<span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226,134</span>`
0.52,1.041 | `<span data-plugin="peity-pie" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">0.52,1.041</span>`

#### Donut Charts

Graph | Code
--- | ---
1/5 | `<span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1/5</span>`
226/360 | `<span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226/360</span>`
0.52/1.561 | `<span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">0.52/1.561</span>`
1,4 | `<span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1/4</span>`
226,134 | `<span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">226,134</span>`
1,2,3,2,2 | `<span data-plugin="peity-donut" data-colors="#71b6f9,#ebeff2" data-width="30" data-height="30">1,2,3,2,2</span>`

#### Line and Bars Charts

Graph | Code
--- | ---
5,3,9,6,5,9,7,3,5,2 | `<span data-plugin="peity-line" data-fill="#71b6f9" data-stroke="#169c81" data-width="100" data-height="40">5,3,9,6,5,9,7,3,5,2</span>`
5,3,2,-1,-3,-2,2,3,5,2 | `<span data-plugin="peity-line" data-fill="#71b6f9" data-stroke="#169c81" data-width="100" data-height="100">5,3,2,-1,-3,-2,2,3,5,2</span>`
0,-3,-6,-4,-5,-4,-7,-3,-5,-2 | `<span data-plugin="peity-line" data-fill="#71b6f9" data-stroke="#169c81" data-width="100" data-height="100">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span>`
5,3,9,6,5,9,7,3,5,2 | `<span data-plugin="peity-bar" data-colors="#71b6f9,#ebeff2" data-width="100" data-height="30">5,3,9,6,5,9,7,3,5,2</span>`
5,3,2,-1,-3,-2,2,3,5,2 | `<span data-plugin="peity-bar" data-colors="#71b6f9,#ebeff2" data-width="100" data-height="30">5,3,2,-1,-3,-2,2,3,5,2</span>`

#### Data-attributes charts

Graph | Code
--- | ---
6/7 | `<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#4c5667", "#ebeff2"], "innerRadius": 24, "radius": 30 }'">6/7</span>`
4/7 | `<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#71b6f9`", "#ebeff2"], "innerRadius": 18, "radius": 28 }'">4/7</span>`
5/7 | `<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#5d9cec", "#ebeff2"], "innerRadius": 20, "radius": 24 }'">5/7</span>`
6/7 | `<span data-plugin="peity-donut-alt" data-peity='{ "fill": ["#fb6d9d", "#ebeff2"], "innerRadius": 18, "radius": 20 }'">6/7</span>`

@@include('./partials/footer.html')
@@include('./partials/right-sidebar.html') @@include('./partials/vendor.html')