<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="A jquery plugin to create simple donut, bar or line charts with dom nodes, style with css.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>cssCharts.js - jquery css charts</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="cssCharts.css">
<script src="jquery.chart.js"></script>
<style>
/* page specific styles*/
h1{text-align:center;font-family:sans-serif;font-size:28px;color:#333;padding:40px 0 0 0;}
h2{text-align:center;font-family:sans-serif;font-size:18px;color:#333;padding:40px 0 0 0;}
hr{width:60%;height:1px;background:none;border:none;border-bottom:1px dashed rgba(0,0,0,0.1);outline:none;margin:40px auto 60px auto;}
.desc p{text-align:center;font-size:16px;color:rgba(0,0,0,0.6);padding:20px 0 0 0;font-family:sans-serif;}
.desc a{color:blue;}
.wrap{margin:0 auto;width:640px;padding-bottom:100px;}
#line{width:400px;}
/* page specific styles*/
</style>
</head>
<body>
<div class="wrap">
<div class="desc">
<h1>cssCharts.js plugin</h1><p>by
<a href="http://twitter.com/thysultan">@thysultan</a> on
<a href="https://github.com/sultantarimo/cssCharts.js">github</a>
</p>
</div>
<h2>bar chart</h2>
<hr>
<div class="chart">
<ul class="bar-chart" data-bars="[4,2],[4,5],[8,3],[4,2],[4,2]" data-max="10" data-unit="k" data-width="24"></ul>
</div>
<!-- data max is the 100% point of the graph -->
<!-- set data-grid to 0 for no grid -->
<!-- data-width is the individual bars width -->
<h2>donut chart v1</h2>
<hr>
<div class="chart">
<div class="donut-chart" data-percent="0.61" data-title="uptime %"></div>
</div>
<h2>donut chart v2</h2>
<hr>
<div class="chart">
<div class="donut-chart fill" data-percent="0.61" data-title="uptime %"></div>
</div>
<h2>donut chart v2</h2>
<hr>
<div class="chart">
<div class="donut-chart pie-chart fill" data-percent="0.61" data-title="uptime %"></div>
</div>
<!-- pie-chart class for pie chart -->
<!-- fill class for default donut fill enabled-->
<h2>line chart v1</h2>
<hr>
<div class="chart">
<ul data-cord="[[0,70,120,160,200,262,280,340,380,420,460],[140,150,40,90,40,60,120,20,60,90,10]],[[0,70,120,160,200,262,280,340,380,420,460],[200,190,80,130,80,100,160,60,100,130,50]]" class="line-chart"></ul>
</div>
<!-- multiple graphs [[x cords],[y cords]] [[x cords],[y cords]] -->
<h2>line chart v2</h2>
<hr>
<div class="chart" id="line">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
</div>
<h2>line chart v3</h2>
<hr>
<div class="chart dotted">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" class="line-chart"></ul>
</div>
<h2>line chart v4</h2>
<hr>
<div class="chart dotted">
<ul data-cord="[0,90,120,160,200,262,280,340,380,420,460],[40,150,40,90,40,60,120,20,60,90,10]" data-fill="1" class="line-chart no-points"></ul>
</div>
<!-- single graph [x cords],[y cords] -->
<br><br><br>
<h2>pie chart v1</h2>
<hr>
<div class="chart">
<div class="pie-thychart" data-set='[["people", 20], ["countries",30], ["developers",60]]' data-colors="#FBE4DB,#F17F49,#BD380F"></div>
</div>
</div>
<script>
$(function() {
$('.bar-chart').cssCharts({type:"bar"});
$('.donut-chart').cssCharts({type:"donut"}).trigger('show-donut-chart');
$('.line-chart').cssCharts({type:"line"});
$('.pie-thychart').cssCharts({type:"pie"});
});
</script>
</body>
</html>