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
| $(function() {
| var ctx, data, myLineChart, options;
| Chart.defaults.global.responsive = true;
| ctx = $('#jumbotron-line-chart').get(0).getContext('2d');
| options = {
| showScale: false,
| scaleShowGridLines: false,
| scaleGridLineColor: "rgba(0,0,0,.05)",
| scaleGridLineWidth: 0,
| scaleShowHorizontalLines: false,
| scaleShowVerticalLines: false,
| bezierCurve: false,
| bezierCurveTension: 0.4,
| pointDot: false,
| pointDotRadius: 0,
| pointDotStrokeWidth: 2,
| pointHitDetectionRadius: 20,
| datasetStroke: true,
| datasetStrokeWidth: 4,
| datasetFill: true,
| legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
| };
| data = {
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
| datasets: [
| {
| label: "My Second dataset",
| fillColor: "rgba(34, 167, 240,0.2)",
| strokeColor: "#22A7F0",
| pointColor: "#22A7F0",
| pointStrokeColor: "#fff",
| pointHighlightFill: "#fff",
| pointHighlightStroke: "#22A7F0",
| data: [28, 48, 40, 45, 76, 65, 90]
| }
| ]
| };
| myLineChart = new Chart(ctx).Line(data, options);
| });
|
| $(function() {
| var ctx, data, myBarChart, option_bars;
| Chart.defaults.global.responsive = true;
| ctx = $('#jumbotron-bar-chart').get(0).getContext('2d');
| option_bars = {
| showScale: false,
| scaleShowGridLines: false,
| scaleBeginAtZero: true,
| scaleShowGridLines: true,
| scaleGridLineColor: "rgba(0,0,0,.05)",
| scaleGridLineWidth: 1,
| scaleShowHorizontalLines: false,
| scaleShowVerticalLines: false,
| barShowStroke: true,
| barStrokeWidth: 1,
| barValueSpacing: 7,
| barDatasetSpacing: 3,
| legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
| };
| data = {
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
| datasets: [
| {
| label: "My First dataset",
| fillColor: "rgba(26, 188, 156,0.6)",
| strokeColor: "#1ABC9C",
| pointColor: "#1ABC9C",
| pointStrokeColor: "#fff",
| pointHighlightFill: "#fff",
| pointHighlightStroke: "#1ABC9C",
| data: [65, 59, 80, 81, 56, 55, 40]
| }, {
| label: "My Second dataset",
| fillColor: "rgba(34, 167, 240,0.6)",
| strokeColor: "#22A7F0",
| pointColor: "#22A7F0",
| pointStrokeColor: "#fff",
| pointHighlightFill: "#fff",
| pointHighlightStroke: "#22A7F0",
| data: [28, 48, 40, 19, 86, 27, 90]
| }
| ]
| };
| myBarChart = new Chart(ctx).Bar(data, option_bars);
| });
|
| $(function() {
| var ctx, data, myLineChart, options;
| Chart.defaults.global.responsive = true;
| ctx = $('#jumbotron-line-2-chart').get(0).getContext('2d');
| options = {
| showScale: false,
| scaleShowGridLines: false,
| scaleGridLineColor: "rgba(0,0,0,.05)",
| scaleGridLineWidth: 0,
| scaleShowHorizontalLines: false,
| scaleShowVerticalLines: false,
| bezierCurve: false,
| bezierCurveTension: 0.4,
| pointDot: false,
| pointDotRadius: 0,
| pointDotStrokeWidth: 2,
| pointHitDetectionRadius: 20,
| datasetStroke: true,
| datasetStrokeWidth: 3,
| datasetFill: true,
| legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].strokeColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>"
| };
| data = {
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
| datasets: [
| {
| label: "My First dataset",
| fillColor: "rgba(26, 188, 156,0.2)",
| strokeColor: "#1ABC9C",
| pointColor: "#1ABC9C",
| pointStrokeColor: "#fff",
| pointHighlightFill: "#fff",
| pointHighlightStroke: "#1ABC9C",
| data: [65, 59, 80, 81, 56, 55, 40]
| }, {
| label: "My Second dataset",
| fillColor: "rgba(34, 167, 240,0.2)",
| strokeColor: "#22A7F0",
| pointColor: "#22A7F0",
| pointStrokeColor: "#fff",
| pointHighlightFill: "#fff",
| pointHighlightStroke: "#22A7F0",
| data: [28, 48, 40, 19, 86, 27, 90]
| }
| ]
| };
| myLineChart = new Chart(ctx).Line(data, options);
| });
|
|
