1 | <html> |
2 | <head> |
3 | <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script> |
4 | </head> |
5 | <body> |
6 | <div style="width:75%;"><canvas id="canvas"></canvas> |
7 | <script> |
8 | |
9 | window.chartColors = {
|
10 | red: 'rgb(255, 99, 132)', |
11 | orange: 'rgb(255, 159, 64)', |
12 | yellow: 'rgb(255, 205, 86)', |
13 | green: 'rgb(75, 192, 192)', |
14 | blue: 'rgb(54, 162, 235)', |
15 | purple: 'rgb(153, 102, 255)', |
16 | grey: 'rgb(201, 203, 207)' |
17 | }; |
18 | |
19 | // INITIALIZATION |
20 | |
21 | function randomScalingFactor() { return 5; }
|
22 | |
23 | var config = {
|
24 | type: 'line', |
25 | data: {
|
26 | labels: ['1:00'], |
27 | datasets: [{
|
28 | label: 'Frames calculated', |
29 | backgroundColor: window.chartColors.red, |
30 | borderColor: window.chartColors.red, |
31 | data: [ |
32 | 0 |
33 | ], |
34 | fill: false, |
35 | }] |
36 | }, |
37 | options: {
|
38 | responsive: true, |
39 | title: {
|
40 | display: true, |
41 | text: 'Distributed Mandelbrot' |
42 | }, |
43 | tooltips: {
|
44 | mode: 'index', |
45 | intersect: false, |
46 | }, |
47 | hover: {
|
48 | mode: 'nearest', |
49 | intersect: true |
50 | }, |
51 | scales: {
|
52 | xAxes: [{
|
53 | display: true, |
54 | scaleLabel: {
|
55 | display: true, |
56 | labelString: 'Time' |
57 | } |
58 | }], |
59 | yAxes: [{
|
60 | display: true, |
61 | scaleLabel: {
|
62 | display: true, |
63 | labelString: 'Value' |
64 | } |
65 | }] |
66 | } |
67 | } |
68 | }; |
69 | |
70 | window.onload = function() {
|
71 | var ctx = document.getElementById('canvas').getContext('2d');
|
72 | window.myLine = new Chart(ctx, config); |
73 | }; |
74 | |
75 | setInterval(function() {
|
76 | if (config.data.datasets.length > 0) {
|
77 | config.data.labels.push('?');
|
78 | config.data.datasets[0].data.push(Math.random()*5); |
79 | window.myLine.update(); |
80 | } |
81 | }, 1000); |
82 | </script> |
83 | </body> |
84 | </html> |
download render html show line numbers
Travelled to 12 computer(s): aoiabmzegqzx, bhatertpkbcr, cbybwowwnfue, gwrvuhgaqvyk, ishqpsrjomds, lpdgvwnxivlt, mqqgnosmbjvj, pyentgdyhuwx, pzhvpgtvlbxg, tslmcundralx, tvejysmllsmz, vouqrxazstgt
No comments. add comment
| Snippet ID: | #1013912 |
| Snippet name: | Dummy Line Chart |
| Eternal ID of this version: | #1013912/6 |
| Text MD5: | 26a61c0f22e483718962c7f971eebd6b |
| Author: | stefan |
| Category: | javax / web |
| Type: | HTML |
| Public (visible to everyone): | Yes |
| Archived (hidden from active list): | No |
| Created/modified: | 2018-03-15 16:42:36 |
| Source code size: | 1728 bytes / 84 lines |
| Pitched / IR pitched: | No / No |
| Views / Downloads: | 400 / 248 |
| Version history: | 5 change(s) |
| Referenced in: | [show references] |