mirror of
https://github.com/dawidolko/Website-Templates.git
synced 2025-10-31 00:13:11 +01:00
120 lines
4.2 KiB
HTML
120 lines
4.2 KiB
HTML
<!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> |