forked from xriley/PrettyDocs-Theme
-
Notifications
You must be signed in to change notification settings - Fork 0
/
charts.html
393 lines (327 loc) · 25.8 KB
/
charts.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 project documentation theme for developers</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- FontAwesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.1.1/js/all.js" integrity="sha384-BtvRZcyfv4r0x/phJt9Y9HhnN5ur1Z+kZbKVgzVBAlQZX4jvAuImlIz+bG7TS00a" crossorigin="anonymous"></script>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/prism/prism.css">
<link rel="stylesheet" href="assets/plugins/lightbox/dist/ekko-lightbox.css">
<link rel="stylesheet" href="assets/plugins/elegant_font/css/style.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
</head>
<body class="body-blue">
<div class="page-wrapper">
<!-- ******Header****** -->
<header id="header" class="header">
<div class="container">
<div class="branding">
<h1 class="logo">
<a href="index.html">
<span aria-hidden="true" class="icon_documents_alt icon"></span>
<span class="text-highlight">Pretty</span><span class="text-bold">Docs</span>
</a>
</h1>
</div><!--//branding-->
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="index.html">Home</a></li>
<li class="breadcrumb-item active">Charts</li>
</ol>
</div><!--//container-->
</header><!--//header-->
<div class="doc-wrapper">
<div class="container">
<div id="doc-header" class="doc-header text-center">
<h1 class="doc-title"><span aria-hidden="true" class="icon icon_datareport_alt"></span> Charts</h1>
<div class="meta"><i class="far fa-clock"></i> Last updated: July 18th, 2018</div>
</div><!--//doc-header-->
<div class="doc-body row">
<div class="doc-content col-md-9 col-12 order-1">
<div class="content-inner">
<section id="chartjs" class="doc-section">
<h2 class="section-title">Chart.js</h2>
<div class="section-block">
<h3 class="block-title">1. Screenshot</h3>
<p>The screenshots used in this page are taken from <a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank">AppKit</a>. AppKit is a Bootstrap Angular admin theme.</p>
<div class="screenshot-holder">
<a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-fluid" src="assets/images/demo/appkit-chart-chartjs.jpg" alt="screenshot" /></a>
<a class="mask" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
</div>
</div><!--//section-block-->
<div class="section-block">
<h3 class="block-title">2. Global Configurations</h3>
<p><strong><i class="fas fa-external-link-square-alt"></i> Source:</strong> <a href="https://www.chartjs.org/docs/" target="_blank">https://www.chartjs.org/docs/</a></p>
<div class="code-block">
<pre><code class="language-javascript">Chart.defaults.global = {
// Boolean - Whether to animate the chart
animation: true,
// Number - Number of animation steps
animationSteps: 60,
// String - Animation easing effect
// Possible effects are:
// [easeInOutQuart, linear, easeOutBounce, easeInBack, easeInOutQuad,
// easeOutQuart, easeOutQuad, easeInOutBounce, easeOutSine, easeInOutCubic,
// easeInExpo, easeInOutBack, easeInCirc, easeInOutElastic, easeOutBack,
// easeInQuad, easeInOutExpo, easeInQuart, easeOutQuint, easeInOutCirc,
// easeInSine, easeOutExpo, easeOutCirc, easeOutCubic, easeInQuint,
// easeInElastic, easeInOutSine, easeInOutQuint, easeInBounce,
// easeOutElastic, easeInCubic]
animationEasing: "easeOutQuart",
// Boolean - If we should show the scale at all
showScale: true,
// Boolean - If we want to override with a hard coded scale
scaleOverride: false,
// ** Required if scaleOverride is true **
// Number - The number of steps in a hard coded scale
scaleSteps: null,
// Number - The value jump in the hard coded scale
scaleStepWidth: null,
// Number - The scale starting value
scaleStartValue: null,
// String - Colour of the scale line
scaleLineColor: "rgba(0,0,0,.1)",
// Number - Pixel width of the scale line
scaleLineWidth: 1,
// Boolean - Whether to show labels on the scale
scaleShowLabels: true,
// Interpolated JS string - can access value
scaleLabel: "<%=value%>",
// Boolean - Whether the scale should stick to integers, not floats even if drawing space is there
scaleIntegersOnly: true,
// Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: false,
// String - Scale label font declaration for the scale label
scaleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Scale label font size in pixels
scaleFontSize: 12,
// String - Scale label font weight style
scaleFontStyle: "normal",
// String - Scale label font colour
scaleFontColor: "#666",
// Boolean - whether or not the chart should be responsive and resize when the browser does.
responsive: false,
// Boolean - whether to maintain the starting aspect ratio or not when responsive, if set to false, will take up entire container
maintainAspectRatio: true,
// Boolean - Determines whether to draw tooltips on the canvas or not
showTooltips: true,
// Function - Determines whether to execute the customTooltips function instead of drawing the built in tooltips (See [Advanced - External Tooltips](#advanced-usage-custom-tooltips))
customTooltips: false,
// Array - Array of string names to attach tooltip events
tooltipEvents: ["mousemove", "touchstart", "touchmove"],
// String - Tooltip background colour
tooltipFillColor: "rgba(0,0,0,0.8)",
// String - Tooltip label font declaration for the scale label
tooltipFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip label font size in pixels
tooltipFontSize: 14,
// String - Tooltip font weight style
tooltipFontStyle: "normal",
// String - Tooltip label font colour
tooltipFontColor: "#fff",
// String - Tooltip title font declaration for the scale label
tooltipTitleFontFamily: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif",
// Number - Tooltip title font size in pixels
tooltipTitleFontSize: 14,
// String - Tooltip title font weight style
tooltipTitleFontStyle: "bold",
// String - Tooltip title font colour
tooltipTitleFontColor: "#fff",
// Number - pixel width of padding around tooltip text
tooltipYPadding: 6,
// Number - pixel width of padding around tooltip text
tooltipXPadding: 6,
// Number - Size of the caret on the tooltip
tooltipCaretSize: 8,
// Number - Pixel radius of the tooltip border
tooltipCornerRadius: 6,
// Number - Pixel offset from point x to tooltip edge
tooltipXOffset: 10,
// String - Template string for single tooltips
tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>",
// String - Template string for multiple tooltips
multiTooltipTemplate: "<%= value %>",
// Function - Will fire on animation progression.
onAnimationProgress: function(){},
// Function - Will fire on animation completion.
onAnimationComplete: function(){}
}</code></pre>
</div><!--//code-block-->
</div><!--//section-block-->
</section><!--//doc-section-->
<section id="flot" class="doc-section">
<h2 class="section-title">Flot Charts</h2>
<div class="section-block">
<h3 class="block-title">1. Screenshot</h3>
<div class="screenshot-holder">
<a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-fluid" src="assets/images/demo/appkit-chart-flot.jpg" alt="screenshot" /></a>
<a class="mask" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
</div>
</div><!--//section-block-->
<div class="section-block">
<h3 class="block-title">2. Basic Usage</h3>
<p><strong><i class="fas fa-external-link-square-alt"></i> Source:</strong> <a href="https://github.com/flot/flot/blob/master/README.md" target="_blank">https://github.com/flot/flot/blob/master/README.md</a></p>
<p>Create a placeholder div to put the graph in:</p>
<p><pre><code class="language-markup"><div id="placeholder"></div></code></pre></p>
<p>You need to set the width and height of this div, otherwise the plot library doesn't know how to scale the graph. You can do it inline like this:</p>
<p><pre><code class="language-markup"><div id="placeholder" style="width:600px;height:300px"></div></code></pre></p>
<p>You can also do it with an external stylesheet. Make sure that the placeholder isn't within something with a display:none CSS property - in that case, Flot has trouble measuring label dimensions which results in garbled looks and might have trouble measuring the placeholder dimensions which is fatal (it'll throw an exception).</p>
<p>Then when the div is ready in the DOM, which is usually on document ready, run the plot function:</p>
<p><pre><code class="language-javascript">$.plot($("#placeholder"), data, options);</code></pre></p>
<p>Here, data is an array of data series and options is an object with settings if you want to customize the plot. Take a look at the examples for some ideas of what to put in or look at the <a href="#">API reference</a>. Here's a quick example that'll draw a line from (0, 0) to (1, 1):</p>
<p><pre><code class="language-javascript">$.plot($("#placeholder"), [ [[0, 0], [1, 1]] ], { yaxis: { max: 1 } });</code></pre></p>
<p>The plot function immediately draws the chart and then returns a plot object with a couple of methods.</p>
</div><!--//section-block-->
</section><!--//doc-section-->
<section id="morris" class="doc-section">
<h2 class="section-title">Morris.js</h2>
<div class="section-block">
<h3 class="block-title">1. Screenshot</h3>
<div class="screenshot-holder">
<a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-fluid" src="assets/images/demo/appkit-chart-flot.jpg" alt="screenshot" /></a>
<a class="mask" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
</div>
</div><!--//section-block-->
<div class="section-block">
<h3 class="block-title">2. Getting Started</h3>
<p>Add <strong>morris.js</strong> and its dependencies (<a href="#">jQuery</a> & <a href="#">Raphaël</a>) to your page.</p>
<p><pre><code class="language-markup">1 <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
2 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
3 <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
4 <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script></code></pre></p>
</div><!--//section-block-->
<div class="section-block">
<h3 class="block-title">3. Your first chart</h3>
<p>Start by adding a <code><div></code> to your page that will contain your chart. Make
sure it has an ID so you can refer to it in your Javascript later.</p>
<p><pre><code class="language-markup"><div id="myfirstchart" style="height: 250px;"></div></code></pre></p>
<div class="callout-block callout-info">
<div class="icon-holder">
<i class="fas fa-info-circle"></i>
</div><!--//icon-holder-->
<div class="content">
<h4 class="callout-title">Note:</h4>
<p>in order to display something, you’ll need to have given the div some dimensions. Here I’ve used inline CSS just for illustration.</p>
</div><!--//content-->
</div>
<p>Next add a <code><script></code> block to the end of your page, containing the following
javascript code:</p>
<p><pre><code class="language-javascript">new Morris.Line({
// ID of the element in which to draw the chart.
element: 'myfirstchart',
// Chart data records -- each entry in this array corresponds to a point on
// the chart.
data: [
{ year: '2008', value: 20 },
{ year: '2009', value: 10 },
{ year: '2010', value: 5 },
{ year: '2011', value: 5 },
{ year: '2012', value: 20 }
],
// The name of the data record attribute that contains x-values.
xkey: 'year',
// A list of names of data record attributes that contain y-values.
ykeys: ['value'],
// Labels for the ykeys -- will be displayed when you hover over the
// chart.
labels: ['Value']
});</code></pre></p>
</div><!--//section-block-->
</section><!--//doc-section-->
<section id="inline" class="doc-section">
<h2 class="section-title">Inline Charts</h2>
<div class="section-block">
<h3 class="block-title">1. Screenshot</h3>
<div class="screenshot-holder">
<a href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><img class="img-fluid" src="assets/images/demo/appkit-chart-inline.jpg" alt="screenshot" /></a>
<a class="mask" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="icon fa fa-link"></i></a>
</div>
</div><!--//section-block-->
<div class="section-block">
<h3 class="block-title">2. Charts Used</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<ul class="list list-unstyled">
<li><a href="#" target="_blank"><i class="fas fa-external-link-square-alt"></i> Peity</a></li>
<li><a href="#" target="_blank"><i class="fas fa-external-link-square-alt"></i> Easy Pie Chart</a></li>
<li><a href="#" target="_blank"><i class="fas fa-external-link-square-alt"></i> Sparklines</a></li>
</ul>
</div><!--//section-block-->
<div class="section-block">
<div class="jumbotron text-center">
<h1>Jumbotron Example</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<ul class="list list-inline center-block">
<li class="list-inline-item"><a class="btn btn-cta btn-pink" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="fas fa-external-link-alt"></i> AppKit Details</a></li>
<li class="list-inline-item"><a class="btn btn-cta btn-primary" href="https://wrapbootstrap.com/theme/admin-appkit-admin-theme-angularjs-WB051SCJ1?ref=3wm" target="_blank"><i class="fas fa-eye"></i> AppKit Demo</a></li>
</ul>
</div><!--//jumbotron-->
</div><!--//section-->
</section><!--//doc-section-->
</div><!--//content-inner-->
</div><!--//doc-content-->
<div class="doc-sidebar col-md-3 col-12 order-0 d-none d-md-flex">
<div id="doc-nav" class="doc-nav">
<nav id="doc-menu" class="nav doc-menu flex-column sticky">
<a class="nav-link scrollto" href="#chartjs">Chart.js</a>
<a class="nav-link scrollto" href="#flot">Flot Charts</a>
<a class="nav-link scrollto" href="#morris">Morris.js</a>
<a class="nav-link scrollto" href="#inline">Inline Charts</a>
</nav><!--//doc-menu-->
</div>
</div><!--//doc-sidebar-->
</div><!--//doc-body-->
</div><!--//container-->
</div><!--//doc-wrapper-->
<div id="promo-block" class="promo-block">
<div class="container">
<div class="promo-block-inner">
<h3 class="promo-title text-center"><i class="fas fa-heart"></i> <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">Are you an ambitious and entrepreneurial developer?</a></h3>
<div class="row">
<div class="figure-holder col-lg-5 col-md-6 col-12">
<div class="figure-holder-inner">
<a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank"><img class="img-fluid" src="assets/images/demo/instance-promo.jpg" alt="Instance Theme" /></a>
<a class="mask" href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/"><i class="icon fa fa-heart pink"></i></a>
</div>
</div><!--//figure-holder-->
<div class="content-holder col-lg-7 col-md-6 col-12">
<div class="content-holder-inner">
<div class="desc">
<h4 class="content-title"><strong> Instance - Bootstrap 4 Portfolio Theme for Aspiring Developers</strong></h4>
<p>Check out <a href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank">Instance</a> - a Bootstrap personal portfolio theme I created for developers. The UX design is focused on selling a developer’s skills and experience to potential employers or clients, and has <strong class="highlight">all the winning ingredients to get you hired</strong>. It’s not only a HTML site template but also a marketing framework for you to <strong class="highlight">build an impressive online presence with a high conversion rate</strong>. </p>
<p><strong class="highlight">[Tip for developers]:</strong> If your project is Open Source, you can use this area to promote your other projects or hold third party adverts like Bootstrap and FontAwesome do!</p>
<a class="btn btn-cta" href="https://themes.3rdwavemedia.com/bootstrap-templates/portfolio/instance-bootstrap-portfolio-theme-for-developers/" target="_blank"><i class="fas fa-external-link-alt"></i> View Demo</a>
</div><!--//desc-->
<div class="author"><a href="https://themes.3rdwavemedia.com">Xiaoying Riley</a></div>
</div><!--//content-holder-inner-->
</div><!--//content-holder-->
</div><!--//row-->
</div><!--//promo-block-inner-->
</div><!--//container-->
</div><!--//promo-block-->
</div><!--//page-wrapper-->
<footer id="footer" class="footer text-center">
<div class="container">
<!--/* This template is released under the Creative Commons Attribution 3.0 License. Please keep the attribution link below when using for your own project. Thank you for your support. :) If you'd like to use the template without the attribution, you can buy the commercial license via our website: themes.3rdwavemedia.com */-->
<small class="copyright">Designed with <i class="fas fa-heart"></i> by <a href="https://themes.3rdwavemedia.com/" target="_blank">Xiaoying Riley</a> for developers</small>
</div><!--//container-->
</footer><!--//footer-->
<!-- Main Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/prism/prism.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="assets/plugins/lightbox/dist/ekko-lightbox.min.js"></script>
<script type="text/javascript" src="assets/plugins/stickyfill/dist/stickyfill.min.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>