-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcharts.php
206 lines (206 loc) · 9.27 KB
/
charts.php
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
<?php include("./includes/header.php"); ?>
<div class="main-panel">
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent">
<div class="container-fluid">
<div class="navbar-wrapper">
<div class="navbar-minimize d-inline">
<button class="minimize-sidebar btn btn-link btn-just-icon" rel="tooltip" data-original-title="Sidebar toggle" data-placement="right">
<i class="tim-icons icon-align-center visible-on-sidebar-regular"></i>
<i class="tim-icons icon-bullet-list-67 visible-on-sidebar-mini"></i>
</button>
</div>
<div class="navbar-toggle d-inline">
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</button>
</div>
<a class="navbar-brand" href="javascript:void(0)">Charts</a>
</div>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
<span class="navbar-toggler-bar navbar-kebab"></span>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav ml-auto">
<li class="search-bar input-group">
<button class="btn btn-link" id="search-button" data-toggle="modal" data-target="#searchModal"><i class="tim-icons icon-zoom-split"></i>
<span class="d-lg-none d-md-block">Search</span>
</button>
</li>
<li class="dropdown nav-item">
<a href="javascript:void(0)" class="dropdown-toggle nav-link" data-toggle="dropdown">
<div class="notification d-none d-lg-block d-xl-block"></div>
<i class="tim-icons icon-sound-wave"></i>
<p class="d-lg-none">
Notifications
</p>
</a>
<ul class="dropdown-menu dropdown-menu-right dropdown-navbar">
<li class="nav-link">
<a href="charts.html#" class="nav-item dropdown-item">Mike John responded to your email</a>
</li>
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">You have 5 more tasks</a>
</li>
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">Your friend Michael is in town</a>
</li>
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">Another notification</a>
</li>
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">Another one</a>
</li>
</ul>
</li>
<li class="dropdown nav-item">
<a href="charts.html#" class="dropdown-toggle nav-link" data-toggle="dropdown">
<div class="photo">
<img src="../assets/img/mike.jpg" alt="Profile Photo">
</div>
<b class="caret d-none d-lg-block d-xl-block"></b>
<p class="d-lg-none">
Log out
</p>
</a>
<ul class="dropdown-menu dropdown-navbar">
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">Profile</a>
</li>
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">Settings</a>
</li>
<li class="dropdown-divider"></li>
<li class="nav-link">
<a href="javascript:void(0)" class="nav-item dropdown-item">Log out</a>
</li>
</ul>
</li>
<li class="separator d-lg-none"></li>
</ul>
</div>
</div>
</nav>
<div class="modal modal-search fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="SEARCH">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<i class="tim-icons icon-simple-remove"></i>
</button>
</div>
</div>
</div>
</div>
<!-- End Navbar -->
<div class="content">
<h2 class="text-center">Charts.js</h2>
<p class="category text-center">Simple yet flexible JavaScript charting for designers & developers. Made by our friends from
<a target="_blank" href="http://www.chartjs.org">Charts.js</a>. Please check
<a target="_blank" href="http://www.chartjs.org/docs/latest/">the full documentation</a>.</p>
<div class="row mt-5">
<div class="col-md-5 ml-auto">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Simple With Gradient</h5>
<h3 class="card-title"><i class="tim-icons icon-chart-bar-32 text-primary "></i> 10,000</h3>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="chartSimpleWithGradient"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">With Numbers and Grid</h5>
<h3 class="card-title"><i class="tim-icons icon-send text-info "></i> 750,000€</h3>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="chartWithNumbersAndGrid"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 ml-auto">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Gradient Bar Chart</h5>
<h3 class="card-title"><i class="tim-icons icon-shape-star text-danger "></i> 1,000,000£
</h3>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="BarChart"></canvas>
</div>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="card card-chart">
<div class="card-header">
<h5 class="card-category">Multiple Bars Chart With Grid</h5>
<h3 class="card-title"><i class="tim-icons icon-time-alarm text-warning "></i> 130,000$</h3>
</div>
<div class="card-body">
<div class="chart-area">
<canvas id="MultipleBarsChart"></canvas>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-5 ml-auto">
<div class="card card-chart card-chart-pie">
<div class="card-header">
<h5 class="card-category">Simple Pie Chart</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="chart-area">
<canvas id="PieChart"></canvas>
</div>
</div>
<div class="col-6">
<h4 class="card-title"><i class="tim-icons icon-trophy text-success "></i> 10.000$</h4>
<p class="category">A total of $54000</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5 mr-auto">
<div class="card card-chart card-chart-pie">
<div class="card-header">
<h5 class="card-category">Multiple Pie Chart</h5>
</div>
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="chart-area">
<canvas id="PieChartGradient"></canvas>
</div>
</div>
<div class="col-6">
<h4 class="card-title"><i class="tim-icons icon-tag text-warning "></i> 130,000</h4>
<p class="category">Feedback from 20.000 users</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include("./includes/footer.php"); ?>