-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
238 lines (221 loc) · 17 KB
/
index.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
<!doctype html>
<html lang="en-US">
<head>
<title>Chart.js | Open source HTML5 Charts for your website</title>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' www.google-analytics.com *.typekit.net">
<script src="https://use.typekit.net/kfx1lmb.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<script>
/*! modernizr 3.3.1 (Custom Build) | MIT *
* http://modernizr.com/download/?-cssanimations-setclasses-shiv !*/
!function(e,t,n){function r(e,t){return typeof e===t}function o(){var e,t,n,o,a,i,s;for(var l in C)if(C.hasOwnProperty(l)){if(e=[],t=C[l],t.name&&(e.push(t.name.toLowerCase()),t.options&&t.options.aliases&&t.options.aliases.length))for(n=0;n<t.options.aliases.length;n++)e.push(t.options.aliases[n].toLowerCase());for(o=r(t.fn,"function")?t.fn():t.fn,a=0;a<e.length;a++)i=e[a],s=i.split("."),1===s.length?Modernizr[s[0]]=o:(!Modernizr[s[0]]||Modernizr[s[0]]instanceof Boolean||(Modernizr[s[0]]=new Boolean(Modernizr[s[0]])),Modernizr[s[0]][s[1]]=o),y.push((o?"":"no-")+s.join("-"))}}function a(e){var t=S.className,n=Modernizr._config.classPrefix||"";if(b&&(t=t.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+n+"no-js(\\s|$)");t=t.replace(r,"$1"+n+"js$2")}Modernizr._config.enableClasses&&(t+=" "+n+e.join(" "+n),b?S.className.baseVal=t:S.className=t)}function i(e,t){return!!~(""+e).indexOf(t)}function s(){return"function"!=typeof t.createElement?t.createElement(arguments[0]):b?t.createElementNS.call(t,"http://www.w3.org/2000/svg",arguments[0]):t.createElement.apply(t,arguments)}function l(e){return e.replace(/([a-z])-([a-z])/g,function(e,t,n){return t+n.toUpperCase()}).replace(/^-/,"")}function c(e,t){return function(){return e.apply(t,arguments)}}function u(e,t,n){var o;for(var a in e)if(e[a]in t)return n===!1?e[a]:(o=t[e[a]],r(o,"function")?c(o,n||t):o);return!1}function f(e){return e.replace(/([A-Z])/g,function(e,t){return"-"+t.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(){var e=t.body;return e||(e=s(b?"svg":"body"),e.fake=!0),e}function m(e,n,r,o){var a,i,l,c,u="modernizr",f=s("div"),m=d();if(parseInt(r,10))for(;r--;)l=s("div"),l.id=o?o[r]:u+(r+1),f.appendChild(l);return a=s("style"),a.type="text/css",a.id="s"+u,(m.fake?m:f).appendChild(a),m.appendChild(f),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(t.createTextNode(e)),f.id=u,m.fake&&(m.style.background="",m.style.overflow="hidden",c=S.style.overflow,S.style.overflow="hidden",S.appendChild(m)),i=n(f,e),m.fake?(m.parentNode.removeChild(m),S.style.overflow=c,S.offsetHeight):f.parentNode.removeChild(f),!!i}function p(t,r){var o=t.length;if("CSS"in e&&"supports"in e.CSS){for(;o--;)if(e.CSS.supports(f(t[o]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var a=[];o--;)a.push("("+f(t[o])+":"+r+")");return a=a.join(" or "),m("@supports ("+a+") { #modernizr { position: absolute; } }",function(e){return"absolute"==getComputedStyle(e,null).position})}return n}function h(e,t,o,a){function c(){f&&(delete j.style,delete j.modElem)}if(a=r(a,"undefined")?!1:a,!r(o,"undefined")){var u=p(e,o);if(!r(u,"undefined"))return u}for(var f,d,m,h,g,v=["modernizr","tspan"];!j.style;)f=!0,j.modElem=s(v.shift()),j.style=j.modElem.style;for(m=e.length,d=0;m>d;d++)if(h=e[d],g=j.style[h],i(h,"-")&&(h=l(h)),j.style[h]!==n){if(a||r(o,"undefined"))return c(),"pfx"==t?h:!0;try{j.style[h]=o}catch(y){}if(j.style[h]!=g)return c(),"pfx"==t?h:!0}return c(),!1}function g(e,t,n,o,a){var i=e.charAt(0).toUpperCase()+e.slice(1),s=(e+" "+x.join(i+" ")+i).split(" ");return r(t,"string")||r(t,"undefined")?h(s,t,o,a):(s=(e+" "+_.join(i+" ")+i).split(" "),u(s,t,n))}function v(e,t,r){return g(e,n,n,t,r)}var y=[],C=[],E={_version:"3.3.1",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,t){var n=this;setTimeout(function(){t(n[e])},0)},addTest:function(e,t,n){C.push({name:e,fn:t,options:n})},addAsyncTest:function(e){C.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=E,Modernizr=new Modernizr;var S=t.documentElement,b="svg"===S.nodeName.toLowerCase();b||!function(e,t){function n(e,t){var n=e.createElement("p"),r=e.getElementsByTagName("head")[0]||e.documentElement;return n.innerHTML="x<style>"+t+"</style>",r.insertBefore(n.lastChild,r.firstChild)}function r(){var e=C.elements;return"string"==typeof e?e.split(" "):e}function o(e,t){var n=C.elements;"string"!=typeof n&&(n=n.join(" ")),"string"!=typeof e&&(e=e.join(" ")),C.elements=n+" "+e,c(t)}function a(e){var t=y[e[g]];return t||(t={},v++,e[g]=v,y[v]=t),t}function i(e,n,r){if(n||(n=t),f)return n.createElement(e);r||(r=a(n));var o;return o=r.cache[e]?r.cache[e].cloneNode():h.test(e)?(r.cache[e]=r.createElem(e)).cloneNode():r.createElem(e),!o.canHaveChildren||p.test(e)||o.tagUrn?o:r.frag.appendChild(o)}function s(e,n){if(e||(e=t),f)return e.createDocumentFragment();n=n||a(e);for(var o=n.frag.cloneNode(),i=0,s=r(),l=s.length;l>i;i++)o.createElement(s[i]);return o}function l(e,t){t.cache||(t.cache={},t.createElem=e.createElement,t.createFrag=e.createDocumentFragment,t.frag=t.createFrag()),e.createElement=function(n){return C.shivMethods?i(n,e,t):t.createElem(n)},e.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+r().join().replace(/[\w\-:]+/g,function(e){return t.createElem(e),t.frag.createElement(e),'c("'+e+'")'})+");return n}")(C,t.frag)}function c(e){e||(e=t);var r=a(e);return!C.shivCSS||u||r.hasCSS||(r.hasCSS=!!n(e,"article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")),f||l(e,r),e}var u,f,d="3.7.3",m=e.html5||{},p=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,h=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,g="_html5shiv",v=0,y={};!function(){try{var e=t.createElement("a");e.innerHTML="<xyz></xyz>",u="hidden"in e,f=1==e.childNodes.length||function(){t.createElement("a");var e=t.createDocumentFragment();return"undefined"==typeof e.cloneNode||"undefined"==typeof e.createDocumentFragment||"undefined"==typeof e.createElement}()}catch(n){u=!0,f=!0}}();var C={elements:m.elements||"abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video",version:d,shivCSS:m.shivCSS!==!1,supportsUnknownElements:f,shivMethods:m.shivMethods!==!1,type:"default",shivDocument:c,createElement:i,createDocumentFragment:s,addElements:o};e.html5=C,c(t),"object"==typeof module&&module.exports&&(module.exports=C)}("undefined"!=typeof e?e:this,t);var w="Moz O ms Webkit",x=E._config.usePrefixes?w.split(" "):[];E._cssomPrefixes=x;var _=E._config.usePrefixes?w.toLowerCase().split(" "):[];E._domPrefixes=_;var N={elem:s("modernizr")};Modernizr._q.push(function(){delete N.elem});var j={style:N.elem.style};Modernizr._q.unshift(function(){delete j.style}),E.testAllProps=g,E.testAllProps=v,Modernizr.addTest("cssanimations",v("animationName","a",!0)),o(),a(y),delete E.addTest,delete E.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);
</script>
<meta name="description" content="Simple yet flexible JavaScript charting library for the modern web"/>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:title" content="Chart.js">
<meta property="og:description" content="Simple yet flexible JavaScript charting library for the modern web">
<meta property="og:image" content="https://www.chartjs.org/img/cover.png">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Chart.js">
<meta property="twitter:description" content="Simple yet flexible JavaScript charting library for the modern web">
<meta property="twitter:image" content="https://www.chartjs.org/img/cover.png">
<link rel="icon" href="./favicon.ico"/>
<link rel="stylesheet" type="text/css" href="./styles.css">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-28909194-3', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class="homepage">
<div class="background-chart fade-in">
<canvas id="background-bar"></canvas>
</div>
<div class="content-overlay fade-in-up animation-delay__1">
<div class="hero-container">
<img class="chart-logo fade-in animation-delay__3" src="./img/chartjs-logo.svg" alt="logo" />
<div class="fade-in fade-in animation-delay__5">
<h1 class="hero-title">Chart.js</h1>
<h2 class="hero-subtitle">Simple yet flexible JavaScript charting library for the modern web</h2>
</div>
<div class="hero-button-wrapper fade-in animation-delay__6">
<a class="button button__red" href="./docs">Get Started</a>
<a class="button button__blue" href="./docs/latest/samples">Samples</a>
<a class="button button__green" href="https://github.com/chartjs/awesome" target="_blank">Ecosystem</a>
<a class="button button__black" href="https://github.com/chartjs/Chart.js" target="_blank">GitHub</a>
</div>
</div>
<div class="feature-container fade-in animation-delay__7">
<div class="feature">
<div class="feature-text feature-text__pull-right">
<h3 class="subtitle">
<span class="pill pill__new pill__v4">New in 4.0</span>
Colors plugin
</h3>
<p class="description"><a href="https://www.chartjs.org/docs/latest/general/colors.html#default-color-palette">Default palette</a> of Chart.js brand colors is available as a built-in time-saving zero-configuration plugin.</p>
</div>
<div class="feature-chart feature-chart__left feature-chart__pull-right">
<canvas id="v4colors" height="200" width="300"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text">
<h3 class="subtitle">
<span class="pill pill__new pill__v4">New in 4.0</span>
Tree-shaking
</h3>
<p class="description">JavaScript bundle size can be reduced by dozens of kilobytes by registering only <a href="https://www.chartjs.org/docs/latest/getting-started/integration.html#bundle-optimization" tagrtet="_blank">necessary components</a>.</p>
</div>
<div class="feature-chart feature-chart__right">
<img src="./img/tree-shaking.png" width="300" alt="Example of reduced bundle size from 48 KB to 14 KB" />
</div>
</div>
<div class="feature">
<div class="feature-text feature-text__pull-right">
<h3 class="subtitle">
<span class="pill pill__new pill__v3">New in 3.5</span>
Scale stacking
</h3>
<p class="description">Layout boxes can be stacked and weighted in groups.</p>
</div>
<div class="feature-chart feature-chart__left feature-chart__pull-right">
<canvas id="v35box" height="200" width="300" aria-label="Chart with stacked scales"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text">
<h3 class="subtitle">
<span class="pill pill__new pill__v3">New in 3.4</span>
Subtitle plugin
</h3>
<p class="description">A secondary title <a href="https://www.chartjs.org/docs/latest/configuration/subtitle.html">plugin</a> with all the same options as main title.</p>
</div>
<div class="feature-chart feature-chart__right">
<canvas id="v34subtitle" height="200" width="300" aria-label="Pie chart with subtitle"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text feature-text__pull-right">
<h3 class="subtitle">
<span class="pill pill__new pill__v3">New in 3.1</span>
Line segment styling
</h3>
<p class="description">Line segments can be styled by any user defined criteria.</p>
</div>
<div class="feature-chart feature-chart__left feature-chart__pull-right">
<canvas id="v31segments" height="200" width="300" aria-label="Line segments with different colors"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text">
<h3 class="subtitle">
<span class="pill pill__new pill__v3">New in 3.0</span>
Advanced animations
</h3>
<p class="description">Transitions of every property in every element can be configured individually and independently.</p>
</div>
<div class="feature-chart feature-chart__right">
<canvas id="v3anims" height="200" width="300" aria-label="Chart with lines that move and animate in different ways"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text feature-text__pull-right">
<h3 class="subtitle">
<span class="pill pill__new pill__v3">New in 3.0</span>
Performance!
</h3>
<p class="description">Numerous performance enhancements have been introduced. This example has 1M (2x500k) points with the new <a href="https://www.chartjs.org/docs/latest/configuration/decimation.html">decimation plugin</a> enabled.</p>
</div>
<div class="feature-chart feature-chart__left feature-chart__pull-right">
<canvas id="v3perf" height="200" width="300" aria-label="Chart with 1 million data point"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text">
<h3 class="subtitle">
<span class="pill pill__new">New in 2.0</span>
Mixed chart types
</h3>
<p class="description">Mix and match bar and line charts to provide a clear visual distinction between datasets.</p>
</div>
<div class="feature-chart feature-chart__right">
<canvas id="mixed-chart" height="200" width="300" aria-label="Bar chart overlayed on top of an area chart"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text feature-text__pull-right">
<h3 class="subtitle">
<span class="pill pill__new">New in 2.0</span>
New chart axis types
</h3>
<p class="description">Plot complex, sparse datasets on date time, logarithmic or even entirely custom scales with ease.</p>
</div>
<div class="feature-chart feature-chart__left feature-chart__pull-right">
<canvas id="axis-chart" height="200" width="300" aria-label="Area chart with a logarithmic x axis"></canvas>
</div>
</div>
<div class="feature">
<div class="feature-text">
<h3 class="subtitle">
<span class="pill pill__new">New in 2.0</span>
Animate everything!
</h3>
<p class="description">Out of the box stunning <a href="https://www.chartjs.org/docs/latest/configuration/animations.html">transitions</a> when changing data, updating colours and adding datasets.</p>
</div>
<div class="feature-chart feature-chart__right">
<canvas id="animate-chart" height="200" width="300" aria-label="Circles animate as they change position, size, and color"></canvas>
</div>
</div>
</div>
<hr/>
<div class="feature-small-container fade-in animation-delay__7">
<div class="feature-small">
<div class="feature-icon">
<img src="./img/open-source.svg" alt="" />
</div>
<h4 class="subtitle subtitle__small">Open source</h4>
<p class="description description__small">Chart.js is a community maintained project, contributions welcome!</p>
</div>
<div class="feature-small">
<div class="feature-icon">
<img src="./img/chart-types.svg" alt="" />
</div>
<h4 class="subtitle subtitle__small">8 Chart types</h4>
<p class="description description__small">Visualize your data in 8 different ways; each of them animated and customisable.</p>
</div>
<div class="feature-small">
<div class="feature-icon">
<img src="./img/canvas-icon.svg" alt="" />
</div>
<h4 class="subtitle subtitle__small">HTML5 Canvas</h4>
<p class="description description__small">Great rendering performance across all modern browsers (IE11+).</p>
</div>
<div class="feature-small">
<div class="feature-icon">
<img src="./img/responsive.svg" alt="" />
</div>
<h4 class="subtitle subtitle__small">Responsive</h4>
<p class="description description__small">Redraws charts on window resize for perfect scale granularity.</p>
</div>
</div>
<hr/>
<div class="link-container fade-in animation-delay__7">
<h2 class="subtitle">
<a href="https://github.com/chartjs/Chart.js" target="_blank">Find Chart.js on GitHub</a> or <a href="./docs"> Read detailed documentation</a>
</h2>
</div>
</div>
<footer class="fade-in animation-delay__8">
<div class="footer-logo">
<img src="./img/icon.svg" alt="" />
</div>
<p class="footer-note">Chart.js was built from the hard work of all <a href="https://github.com/chartjs/Chart.js/contributors" target="_blank">these contributors.</a>
</footer>
<script async src="./build.js"></script>
</body>
</html>