Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-06-20 14:20:09 +04:00
Code Issues Projects Releases Wiki Activity
Files
68b8d71526680c0fd4b8bec48da97d260bd9bc49
tabler/dist/docs/charts.html
T
codecalm 0f316de5ef dist
2018-02-14 22:04:13 +01:00

467 lines
17 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Language" content="en" />
<meta name="msapplication-TileColor" content="#2d89ef">
<meta name="theme-color" content="#4188c9">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<title>Charts - Documentation - tabler.io - a responsive, flat and full featured admin template</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&amp;subset=latin-ext">
<script src="../assets/js/require.min.js"></script>
<script>
requirejs.config({
baseUrl: '..'
});
</script>
<!-- Dashboard Core -->
<link href="../assets/css/dashboard.css" rel="stylesheet" />
<script src="../assets/js/dashboard.js"></script>
<!-- c3.js Charts Plugin -->
<link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" />
<script src="../assets/plugins/charts-c3/plugin.js"></script>
</head>
<body class="">
<div class="page">
<div class="page-main">
<div class="header">
<div class="container">
<div class="navbar p-0">
<a class="navbar-brand" href="#">
<img src="./assets/images/logo.svg" class="navbar-brand-img" alt="tabler.io">
<span class="d-none d-lg-inline-block">Bootstrap</span>
</a>
<div class="nav order-lg-2">
<div class="nav-item">
<a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a>
</div>
<a class="nav-link icon">
<i class="fe fe-maximize"></i>
</a>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-message-square"></i>
<span class="badge badge-pill badge-danger">1</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<div class="dropdown d-none d-md-flex">
<a class="nav-link icon" data-toggle="dropdown">
<i class="fe fe-bell"></i>
<span class="badge badge-pill badge-danger">10</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium architecto asperiores dolorem, est fugiat in maxime natus officia velit voluptas! Ab asperiores
delectus dolore dolores maxime nesciunt qui quia totam.
</div>
</div>
<div class="dropdown">
<a href="#" class="nav-link" data-toggle="dropdown">
<span class="avatar" style="background-image: url(assets/images/faces/female/25.jpg)"></span>
<span class="ml-2 d-none d-lg-block">
<span class="text-default">Jane Pearson</span>
<small class="text-muted d-block mt-1">Administrator</small>
</span>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">
<span>Profile</span>
</a>
<a class="dropdown-item" href="#">
<span>Settings</span>
</a>
<a class="dropdown-item" href="#">
<span class="float-right"><span class="badge badge-primary">6</span></span>
<span>Inbox</span>
</a>
<a class="dropdown-item" href="#">
<span>Message</span>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Need help? </a>
<a class="dropdown-item" href="#">Sign out</a>
</div>
</div>
</div>
<div class="collapse navbar-collapse order-lg-1" id="navbarToggler">
<ul class="navbar-nav mt-2 mt-lg-0 mx-0 mx-lg-2">
<li class="nav-item"><a href="#" class="nav-link">Dashboard</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Projects</a>
<div class="dropdown-menu mt-2 text-color" role="menu">
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-tag"></i> Action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-pencil"></i> Another action </a>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-reply"></i> Something else here</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item"><i class="dropdown-icon fa fa-ellipsis-h"></i> Separated link</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="header-nav d-none d-lg-flex">
<div class="container">
<div class="row align-items-center">
<div class="col">
<ul class="nav nav-tabs">
<li class="nav-item">
<a href="../." class="nav-link"><i class="fe fe-home"></i> Home</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-box"></i> Interface</a>
<div class="nav-submenu nav">
<a href="../cards.html" class="nav-item ">Cards design</a>
<a href="../charts.html" class="nav-item ">Charts</a>
</div>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link"><i class="fe fe-calendar"></i> Components</a>
<div class="nav-submenu nav">
<a href="../maps.html" class="nav-item ">Maps</a>
<a href="../icons.html" class="nav-item ">Icons</a>
<a href="../store.html" class="nav-item ">Store</a>
<a href="../blog.html" class="nav-item ">Blog</a>
</div>
</li>
<li class="nav-item">
<a href="../profile.html" class="nav-link"><i class="fe fe-user"></i> Profile</a>
</li>
<li class="nav-item">
<a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a>
</li>
<li class="nav-item">
<a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a>
</li>
</ul>
</div>
<div class="col-3 ml-auto">
<form class="input-icon">
<input type="search" class="form-control header-search" placeholder="Search&hellip;" tabindex="1">
<div class="input-icon-addon">
<i class="fe fe-search"></i>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="page-content">
<div class="container">
<div class="page-header">
<h1 class="page-title">
<i class=" page-title-icon"></i>
Documentation
</h1>
</div>
<div class="row">
<div class="col-lg-3">
<div class="card">
<div class="card-body">
<ul class="list">
<li><a href="../docs/blog.html">Blog components</a></li>
<li><a href="../docs/buttons.html">Buttons</a></li>
<li><a href="../docs/charts.html">Charts</a></li>
<li><a href="../docs/form-components.html">Form components</a></li>
<li><a href="../docs/index.html">Getting started</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card">
<div class="card-body">
<div class="text-wrap">
<h2 class="mt-0 mb-4">Charts</h2>
<h3 id="c3js-charts">c3.js charts</h3>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="example example-bg">
<div class="example-column example-column-2">
<div class="card">
<div class="card-header">
<h3 class="card-title">Chart name</h3>
</div>
<div class="card-body">
<div id="chart-wrapper" style="height: 16rem"></div>
</div>
</div>
<script>
require(['c3', 'jquery'], function(c3, $) {
$(document).ready(function(){
var chart = c3.generate({
bindto: '#chart-wrapper', // id of chart wrapper
data: {
columns: [
// each columns data
['data1', 7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
['data2', 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
],
labels: true,
type: 'line', // default type of chart
colors: {
'data1': tabler.colors.blue,
'data2': tabler.colors.green
},
names: {
// name of each serie
'data1': 'Tokyo',
'data2': 'London'
}
},
axis: {
x: {
type: 'category',
// name of each category
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
},
legend: {
show: false, //hide legend
},
padding: {
bottom: 0,
top: 0
},
});
});
});
</script></div>
</div>
<div class="highlight"><pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-header"</span><span class="nt">&gt;</span>
<span class="nt">&lt;h3</span> <span class="na">class=</span><span class="s">"card-title"</span><span class="nt">&gt;</span>Chart name<span class="nt">&lt;/h3&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"card-body"</span><span class="nt">&gt;</span>
<span class="nt">&lt;div</span> <span class="na">id=</span><span class="s">"chart-wrapper"</span> <span class="na">style=</span><span class="s">"height: 16rem"</span><span class="nt">&gt;&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;script&gt;</span>
<span class="nx">require</span><span class="p">([</span><span class="s1">'c3'</span><span class="p">,</span> <span class="s1">'jquery'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">c3</span><span class="p">,</span> <span class="nx">$</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="nb">document</span><span class="p">).</span><span class="nx">ready</span><span class="p">(</span><span class="kd">function</span><span class="p">(){</span>
<span class="kd">var</span> <span class="nx">chart</span> <span class="o">=</span> <span class="nx">c3</span><span class="p">.</span><span class="nx">generate</span><span class="p">({</span>
<span class="na">bindto</span><span class="p">:</span> <span class="s1">'#chart-wrapper'</span><span class="p">,</span> <span class="c1">// id of chart wrapper</span>
<span class="na">data</span><span class="p">:</span> <span class="p">{</span>
<span class="na">columns</span><span class="p">:</span> <span class="p">[</span>
<span class="c1">// each columns data</span>
<span class="p">[</span><span class="s1">'data1'</span><span class="p">,</span> <span class="mf">7.0</span><span class="p">,</span> <span class="mf">6.9</span><span class="p">,</span> <span class="mf">9.5</span><span class="p">,</span> <span class="mf">14.5</span><span class="p">,</span> <span class="mf">18.4</span><span class="p">,</span> <span class="mf">21.5</span><span class="p">,</span> <span class="mf">25.2</span><span class="p">,</span> <span class="mf">26.5</span><span class="p">,</span> <span class="mf">23.3</span><span class="p">,</span> <span class="mf">18.3</span><span class="p">,</span> <span class="mf">13.9</span><span class="p">,</span> <span class="mf">9.6</span><span class="p">],</span>
<span class="p">[</span><span class="s1">'data2'</span><span class="p">,</span> <span class="mf">3.9</span><span class="p">,</span> <span class="mf">4.2</span><span class="p">,</span> <span class="mf">5.7</span><span class="p">,</span> <span class="mf">8.5</span><span class="p">,</span> <span class="mf">11.9</span><span class="p">,</span> <span class="mf">15.2</span><span class="p">,</span> <span class="mf">17.0</span><span class="p">,</span> <span class="mf">16.6</span><span class="p">,</span> <span class="mf">14.2</span><span class="p">,</span> <span class="mf">10.3</span><span class="p">,</span> <span class="mf">6.6</span><span class="p">,</span> <span class="mf">4.8</span><span class="p">]</span>
<span class="p">],</span>
<span class="na">labels</span><span class="p">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="na">type</span><span class="p">:</span> <span class="s1">'line'</span><span class="p">,</span> <span class="c1">// default type of chart</span>
<span class="na">colors</span><span class="p">:</span> <span class="p">{</span>
<span class="s1">'data1'</span><span class="p">:</span> <span class="nx">tabler</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">blue</span><span class="p">,</span>
<span class="s1">'data2'</span><span class="p">:</span> <span class="nx">tabler</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">green</span>
<span class="p">},</span>
<span class="na">names</span><span class="p">:</span> <span class="p">{</span>
<span class="c1">// name of each serie</span>
<span class="s1">'data1'</span><span class="p">:</span> <span class="s1">'Tokyo'</span><span class="p">,</span>
<span class="s1">'data2'</span><span class="p">:</span> <span class="s1">'London'</span>
<span class="p">}</span>
<span class="p">},</span>
<span class="na">axis</span><span class="p">:</span> <span class="p">{</span>
<span class="na">x</span><span class="p">:</span> <span class="p">{</span>
<span class="na">type</span><span class="p">:</span> <span class="s1">'category'</span><span class="p">,</span>
<span class="c1">// name of each category</span>
<span class="na">categories</span><span class="p">:</span> <span class="p">[</span><span class="s1">'Jan'</span><span class="p">,</span> <span class="s1">'Feb'</span><span class="p">,</span> <span class="s1">'Mar'</span><span class="p">,</span> <span class="s1">'Apr'</span><span class="p">,</span> <span class="s1">'May'</span><span class="p">,</span> <span class="s1">'Jun'</span><span class="p">]</span>
<span class="p">},</span>
<span class="p">},</span>
<span class="na">legend</span><span class="p">:</span> <span class="p">{</span>
<span class="na">show</span><span class="p">:</span> <span class="kc">false</span><span class="p">,</span> <span class="c1">//hide legend</span>
<span class="p">},</span>
<span class="na">padding</span><span class="p">:</span> <span class="p">{</span>
<span class="na">bottom</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">top</span><span class="p">:</span> <span class="mi">0</span>
<span class="p">},</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="p">});</span>
<span class="nt">&lt;/script&gt;</span></code></pre></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Advertise</a></li>
<li><a href="..">Help Center</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Invite friends</a></li>
<li><a href="..">Tag photos</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Stock photos</a></li>
<li><a href="..">Photobooks</a></li>
</ul>
</div>
<div class="col-6 col-md-3">
<ul class="list-unstyled mb-0">
<li><a href="..">Press Kit</a></li>
<li><a href="..">Contact</a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 mt-4 mt-lg-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequatur corporis debitis dolore doloribus esse.
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row align-items-center flex-row-reverse">
<div class="col-auto ml-auto">
<div class="row align-items-center">
<div class="col-auto">
<ul class="list-inline list-inline-dots mb-0">
<li class="list-inline-item"><a href="../docs/index.html">Documentation</a></li>
<li class="list-inline-item"><a href="../faq.html">FAQ</a></li>
</ul>
</div>
<div class="col-auto">
<a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source code</a>
</div>
</div>
</div>
<div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
Copyright © 2018 <a href="..">tabler.io</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a> All rights reserved.
</div>
</div>
</div>
</footer>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink