/cssCharts.js

jquery plugin to create donut and bar charts with css

Primary LanguageJavaScript

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.