Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

cssCharts.js

jquery plugin to create simple donut, bar or line charts with dom nodes. style with css.

http://thysultan.com/projects/cssCharts/


###Install with bower

bower install csscharts

Include:

<link rel="stylesheet" href="chart.css">
<script src="jquery.chart.js"></script>

run:

$('.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.

$('.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

<div class="donut-chart pie-chart" data-percent="0.61" data-title="uptime %"></div>

example line chart

<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

<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.

About

jquery plugin to create donut and bar charts with css

Resources

Stars

Watchers

Forks

Packages

No packages published