File size: 1.34Kb
# cssCharts.js
jquery plugin to create simple donut, bar or line charts with dom nodes. style with css.
[http://thysultan.com/projects/cssCharts/](http://thysultan.com/projects/cssCharts/)
### Include:
```html
<link rel="stylesheet" href="chart.css">
<script src="jquery.chart.js"></script>
```
### run:
```javascript
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"});
$('.line-chart').cssCharts({type:"line"});
```
### example donut/pie chart
optional: to trigger countUp counter for the donut chart as seen on the preview page.
```javascript
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
```
add "pie-chart" class to .donut-chart if you want to convert it to a pie chart, i.e
```html
<div class="donut-chart pie-chart" data-percent="0.61" data-title="uptime %"></div>
```
- - -
### example line chart
```html
<ul data-cord="[x1,x2,x3,x4],[y1,y2,y3,y4]" class="line-chart"></ul>
$('.line-chart').cssCharts({type:"line"});
```
* insure x cordinates are 0 - ascending.
* insure y cordinates are 0 or greater.
- - -
### example bar chart
```html
<ul class="bar-chart" data-bars="[x1,x2],[y1,y2]" data-max="10" data-unit="k" data-grid="1" data-width="24">
$('.bar-chart').cssCharts({type:"bar"});
```
- - -
style to your hearts content, see index.html for an example implementation.