mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-31 08:23:12 +01:00
60 lines
1.3 KiB
Markdown
60 lines
1.3 KiB
Markdown
# 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.
|