1
1
< section class ="content-header ">
2
- < h1 > ChartJS< small > Preview sample</ small > </ h1 >
3
- < ol class ="breadcrumb ">
4
- < li > < a ui-sref ="app.landing "> < i class ="fa fa-dashboard "> </ i > Home</ a > </ li >
5
- < li class ="active "> User Lists</ li >
6
- </ ol >
2
+ < h1 > ChartJS< small > Preview sample</ small > </ h1 >
3
+ < ol class ="breadcrumb ">
4
+ < li > < a ui-sref ="app.landing "> < i class ="fa fa-dashboard "> </ i > Home</ a > </ li >
5
+ < li class ="active "> User Lists</ li >
6
+ </ ol >
7
7
</ section >
8
8
< section class ="content ">
9
9
< div class ="row ">
@@ -16,35 +16,20 @@ <h3 class="box-title">Area Chart</h3>
16
16
< button type ="button " class ="btn btn-box-tool " data-widget ="remove "> < i class ="fa fa-times "> </ i > </ button >
17
17
</ div >
18
18
</ div >
19
- <!-- /.box-header -->
20
19
< div class ="box-body ">
21
20
< div class ="row ">
22
21
< div class ="col-md-12 ">
23
22
< p class ="text-center ">
24
23
< strong > Sales: 1 Jan, 2014 - 30 Jul, 2014</ strong >
25
24
</ p >
26
-
27
25
< div class ="chart ">
28
- <!-- Sales Chart Canvas -->
29
- < canvas id ="area "
30
- class ="chart chart-line "
31
- chart-data ="vm.areaChartData "
32
- chart-labels ="vm.areaChartLabels "
33
- chart-legend ="false "
34
- chart-series ="vm.areaChartSeries "
35
- chart-click ="vm.onClick "
36
- chart-colours ="vm.areaChartColours "
37
- style ="height: 180px; ">
26
+ < canvas id ="area " class ="chart chart-line " chart-data ="vm.areaChartData " chart-labels ="vm.areaChartLabels " chart-legend ="false " chart-series ="vm.areaChartSeries " chart-click ="vm.onClick " chart-colours ="vm.areaChartColours " style ="height: 180px; ">
38
27
</ canvas >
39
28
</ div >
40
- <!-- /.chart-responsive -->
41
29
</ div >
42
30
</ div >
43
- <!-- /.row -->
44
31
</ div >
45
- <!-- ./box-body -->
46
32
</ div >
47
- <!-- /.box -->
48
33
</ div >
49
34
< div class ="col-md-6 ">
50
35
< div class ="box box-info ">
@@ -55,64 +40,40 @@ <h3 class="box-title">Line Chart</h3>
55
40
< button type ="button " class ="btn btn-box-tool " data-widget ="remove "> < i class ="fa fa-times "> </ i > </ button >
56
41
</ div >
57
42
</ div >
58
- <!-- /.box-header -->
59
43
< div class ="box-body ">
60
44
< div class ="row ">
61
45
< div class ="col-md-12 ">
62
46
< p class ="text-center ">
63
47
< strong > Sales: 1 Jan, 2014 - 30 Jul, 2014</ strong >
64
48
</ p >
65
-
66
49
< div class ="chart ">
67
- <!-- Sales Chart Canvas -->
68
- < canvas id ="line "
69
- class ="chart chart-line "
70
- chart-data ="vm.lineChartData "
71
- chart-labels ="vm.lineChartLabels "
72
- chart-legend ="false "
73
- chart-series ="vm.lineChartSeries "
74
- chart-click ="vm.onClick "
75
- style ="height: 180px; ">
50
+ < canvas id ="line " class ="chart chart-line " chart-data ="vm.lineChartData " chart-labels ="vm.lineChartLabels " chart-legend ="false " chart-series ="vm.lineChartSeries " chart-click ="vm.onClick " style ="height: 180px; ">
76
51
</ canvas >
77
52
</ div >
78
- <!-- /.chart-responsive -->
79
53
</ div >
80
54
</ div >
81
- <!-- /.row -->
82
55
</ div >
83
- <!-- ./box-body -->
84
56
</ div >
85
- <!-- /.box -->
86
57
</ div >
87
- <!-- /.col -->
88
58
</ div >
89
- <!-- /.row -->
90
-
91
- <!-- Main row -->
92
59
< div class ="row ">
93
60
< div class ="col-md-6 ">
94
61
< div class ="box box-danger ">
95
62
< div class ="box-header with-border ">
96
63
< h3 class ="box-title "> Donut Chart</ h3 >
97
-
98
64
< div class ="box-tools pull-right ">
99
65
< button type ="button " class ="btn btn-box-tool " data-widget ="collapse "> < i class ="fa fa-minus "> </ i > </ button >
100
66
< button type ="button " class ="btn btn-box-tool " data-widget ="remove "> < i class ="fa fa-times "> </ i > </ button >
101
67
</ div >
102
68
</ div >
103
- <!-- /.box-header -->
104
69
< div class ="box-body ">
105
70
< div class ="row ">
106
71
< div class ="col-md-8 ">
107
72
< div class ="chart-responsive ">
108
- < canvas id ="doughnut " height ="200 " class ="chart chart-doughnut "
109
- chart-data ="vm.pieData " chart-labels ="vm.pieLabels ">
73
+ < canvas id ="doughnut " height ="200 " class ="chart chart-doughnut " chart-data ="vm.pieData " chart-labels ="vm.pieLabels ">
110
74
</ canvas >
111
- <!-- <canvas id="pieChart" height="150"></canvas> -->
112
75
</ div >
113
- <!-- ./chart-responsive -->
114
76
</ div >
115
- <!-- /.col -->
116
77
< div class ="col-md-4 ">
117
78
< ul class ="chart-legend clearfix ">
118
79
< li > < i class ="fa fa-circle-o text-red "> </ i > Chrome</ li >
@@ -123,21 +84,16 @@ <h3 class="box-title">Donut Chart</h3>
123
84
< li > < i class ="fa fa-circle-o text-gray "> </ i > Navigator</ li >
124
85
</ ul >
125
86
</ div >
126
- <!-- /.col -->
127
87
</ div >
128
- <!-- /.row -->
129
88
</ div >
130
- <!-- /.box-body -->
131
89
< div class ="box-footer no-padding ">
132
90
< ul class ="nav nav-pills nav-stacked ">
133
91
< li > < a > United States of America < span class ="pull-right text-red "> < i class ="fa fa-angle-down "> </ i > 12%</ span > </ a > </ li >
134
92
< li > < a > India < span class ="pull-right text-green "> < i class ="fa fa-angle-up "> </ i > 4%</ span > </ a > </ li >
135
93
< li > < a > China< span class ="pull-right text-yellow "> < i class ="fa fa-angle-left "> </ i > 0%</ span > </ a > </ li >
136
94
</ ul >
137
95
</ div >
138
- <!-- /.footer -->
139
96
</ div >
140
- <!-- /.box -->
141
97
</ div >
142
98
< div class ="col-md-6 ">
143
99
< div class ="box box-success ">
@@ -148,37 +104,20 @@ <h3 class="box-title">Bar Chart</h3>
148
104
< button type ="button " class ="btn btn-box-tool " data-widget ="remove "> < i class ="fa fa-times "> </ i > </ button >
149
105
</ div >
150
106
</ div >
151
- <!-- /.box-header -->
152
107
< div class ="box-body ">
153
108
< div class ="row ">
154
109
< div class ="col-md-12 ">
155
110
< p class ="text-center ">
156
111
< strong > Sales: 1 Jan, 2014 - 30 Jul, 2014</ strong >
157
112
</ p >
158
-
159
113
< div class ="chart ">
160
- <!-- Sales Chart Canvas -->
161
- < canvas id ="area "
162
- class ="chart chart-bar "
163
- chart-data ="vm.barChartData "
164
- chart-labels ="vm.barChartLabels "
165
- chart-legend ="false "
166
- chart-series ="vm.barChartSeries "
167
- chart-click ="vm.onClick "
168
- chart-colours ="vm.barChartColours "
169
- style ="height: 250px; ">
114
+ < canvas id ="area " class ="chart chart-bar " chart-data ="vm.barChartData " chart-labels ="vm.barChartLabels " chart-legend ="false " chart-series ="vm.barChartSeries " chart-click ="vm.onClick " chart-colours ="vm.barChartColours " style ="height: 250px; ">
170
115
</ canvas >
171
116
</ div >
172
- <!-- /.chart-responsive -->
173
117
</ div >
174
118
</ div >
175
- <!-- /.row -->
176
119
</ div >
177
- <!-- ./box-body -->
178
120
</ div >
179
- <!-- /.box -->
180
121
</ div >
181
- <!-- /.col -->
182
122
</ div >
183
- <!-- /.row -->
184
- </ section >
123
+ </ section >
0 commit comments