| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en-US">
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
| 6 | <meta name="viewport" content="width=device-width, initial-scale=1">
|
| 7 | <link rel="stylesheet" type="text/css" href="style.css">
|
| 8 | <link rel="icon" href="favicon.ico">
|
| 9 | <script src="samples.js"></script>
|
| 10 | <script src="utils.js"></script>
|
| 11 | <title>Chart.js samples</title>
|
| 12 | </head>
|
| 13 | <body>
|
| 14 | <div class="content">
|
| 15 | <div class="header">
|
| 16 | <div class="chartjs-title">Samples</div>
|
| 17 | <div class="chartjs-caption">Simple yet flexible JavaScript charting for designers & developers</div>
|
| 18 | <div class="chartjs-links">
|
| 19 | <a class="btn btn-chartjs" href="http://www.chartjs.org">Website</a>
|
| 20 | <a class="btn btn-docs" href="http://www.chartjs.org/docs">Documentation</a>
|
| 21 | <a class="btn btn-gh" href="https://github.com/chartjs/Chart.js">GitHub</a>
|
| 22 | </div>
|
| 23 | </div>
|
| 24 |
|
| 25 | <div id="categories" class="samples-categories"></div>
|
| 26 | </div>
|
| 27 |
|
| 28 | <script>
|
| 29 | function createCategory(item) {
|
| 30 | var el = document.createElement('div');
|
| 31 | el.className = 'samples-category';
|
| 32 | el.innerHTML =
|
| 33 | '<div class="title">' + item.title + '</div>' +
|
| 34 | '<div class="items"></div>';
|
| 35 | return el;
|
| 36 | }
|
| 37 |
|
| 38 | function createEntry(item) {
|
| 39 | var el = document.createElement('div');
|
| 40 | el.className = 'samples-entry';
|
| 41 | el.innerHTML = '<a class="title" href="' + item.path + '">' + item.title + '</a>';
|
| 42 | return el;
|
| 43 | }
|
| 44 |
|
| 45 | var categories = document.getElementById('categories');
|
| 46 | Samples.items.forEach(function(item) {
|
| 47 | var category = createCategory(item);
|
| 48 | var children = category.getElementsByClassName('items')[0];
|
| 49 |
|
| 50 | (item.items || []).forEach(function(item) {
|
| 51 | children.appendChild(createEntry(item));
|
| 52 | });
|
| 53 |
|
| 54 | categories.appendChild(category);
|
| 55 | });
|
| 56 | </script>
|
| 57 | </body>
|
| 58 | </html>
|