DonutWidget jQuery Plugin
DonutWidget is a simple jquery donut widget
Installation
- Download the files
- Load jquery.DonutWidget.min.css and jquery.DonutWidget.min.js
Prerequisites
Since DonutWidget is a jquery plugin, jquery should be loaded before the plugin.
Initalization
DonutWidget can be initialized in 2 ways
jQuery Implementation
$(selector).DonutWidget(options);
Implemneting using function
var widget = DonutWidget.draw($(selector), options);
HTML implementation
HTML Structure
<div class="donut-widget" data-chart-max="<value>" data-chart-value="<value>" data-chart-text="<value>" data-chart-rotate="<value>" data-chart-caption="<value>" data-chart-primary="<value>" data-chart-background="<value>" data-chart-size="<value>"></div> The element should have class donut-widget
Redrawing widgets
You can update one or more properties and redraw the widget
Using jQuery
To update a property:
$(selector).data("$donut").options.value = 20;
To redraw the widget
$(selector).DonutWidget();
or you can pass the updated properties directly as
$(selector).DonutWidget(options);
Using variable
You can pass the updated property in redraw function widget.redraw(options);
Option parameters
| Parameter | type | Default Value | Description |
|---|---|---|---|
| max | integer | 100 | Maximum value of widget |
| value | integer | 0 | value of widget |
| text | string | % | Text to be displayed inside widget. Default will be % of max |
| rotate | integer | 0 | From where the widget mark should start |
| caption | string | empty string | Text to be shown below the widget |
| colors | json | The color property must have both primary and background color codes. | |
| size | string | normal | Size of widget. Possible values: tiny, small, normal, large, jumbo, huge |
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
License
MIT LICENSE
