valitydev/gentelella
14
0
Fork 0
mirror of https://github.com/valitydev/gentelella.git synced 2024-11-06 08:15:17 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #85 from christianesperar/master

Browse Source 
Chart.js and Sample data enhancement
This commit is contained in:
Aigars Silkalns 2016-04-18 18:10:35 +03:00
commit 6bb1ae621d
5 changed files with 211 additions and 253 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
production/index.html
View File

@ -583,7 +583,6 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<table class="" style="width:100%"> <table class="" style="width:100%">
<tr> <tr>
<th style="width:37%;"> <th style="width:37%;">
@ -1228,47 +1227,49 @@
icons.play(); icons.play();
</script> </script>
<!-- dashbord linegraph --> <!-- Doughnut Chart -->
<script> <script>
Chart.defaults.global.legend = { $('document').ready(function() {
enabled: false var options = {
}; legend: false,
responsive: false
};
var data = { new Chart(document.getElementById("canvas1"), {
labels: [ type: 'doughnut',
"Symbian", tooltipFillColor: "rgba(51, 51, 51, 0.55)",
"Blackberry", data: {
"Other", labels: [
"Android", "Symbian",
"IOS" "Blackberry",
], "Other",
datasets: [{ "Android",
data: [15, 20, 30, 10, 30], "IOS"
backgroundColor: [ ],
"#BDC3C7", datasets: [{
"#9B59B6", data: [15, 20, 30, 10, 30],
"#455C73", backgroundColor: [
"#26B99A", "#BDC3C7",
"#3498DB" "#9B59B6",
], "#E74C3C",
hoverBackgroundColor: [ "#26B99A",
"#CFD4D8", "#3498DB"
"#B370CF", ],
"#34495E", hoverBackgroundColor: [
"#36CAAB", "#CFD4D8",
"#49A9EA" "#B370CF",
] "#E95E4F",
"#36CAAB",
}] "#49A9EA"
}; ]
}]
var canvasDoughnut = new Chart(document.getElementById("canvas1"), { },
type: 'doughnut', options: options
tooltipFillColor: "rgba(51, 51, 51, 0.55)", });
data: data
}); });
</script> </script>
<!-- /dashbord linegraph --> <!-- /Doughnut Chart -->
<!-- datepicker --> <!-- datepicker -->
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {

95
production/index2.html
View File

@ -584,7 +584,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item One Tittle</a> <a class="title" href="#">Item One Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -594,7 +594,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -604,7 +604,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -614,7 +614,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -624,7 +624,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Three Tittle</a> <a class="title" href="#">Item Three Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -660,7 +660,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item One Tittle</a> <a class="title" href="#">Item One Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -670,7 +670,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -680,7 +680,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -690,7 +690,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -700,7 +700,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Three Tittle</a> <a class="title" href="#">Item Three Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -736,7 +736,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item One Tittle</a> <a class="title" href="#">Item One Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -746,7 +746,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -756,7 +756,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -766,7 +766,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Two Tittle</a> <a class="title" href="#">Item Two Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -776,7 +776,7 @@
<p class="day">23</p> <p class="day">23</p>
</a> </a>
<div class="media-body"> <div class="media-body">
<a class="title" href="#">Item Three Tittle</a> <a class="title" href="#">Item Three Title</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div> </div>
</article> </article>
@ -977,31 +977,20 @@
spotColor: '#34495E', spotColor: '#34495E',
minSpotColor: '#34495E' minSpotColor: '#34495E'
}); });
});
</script>
var doughnutData = [{ <!-- Doughnut Chart -->
value: 30, <script>
color: "#455C73" $('document').ready(function() {
}, { var canvasDoughnut,
value: 30, options = {
color: "#9B59B6" legend: false,
}, { responsive: false
value: 60, };
color: "#BDC3C7"
}, {
value: 100,
color: "#26B99A"
}, {
value: 120,
color: "#3498DB"
}];
Chart.defaults.global.legend = { new Chart(document.getElementById("canvas1i"), {
enabled: false
};
var canvasDoughnut = new Chart(document.getElementById("canvas1i"), {
type: 'doughnut', type: 'doughnut',
showTooltips: false,
tooltipFillColor: "rgba(51, 51, 51, 0.55)", tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: { data: {
labels: [ labels: [
@ -1016,25 +1005,25 @@
backgroundColor: [ backgroundColor: [
"#BDC3C7", "#BDC3C7",
"#9B59B6", "#9B59B6",
"#455C73", "#E74C3C",
"#26B99A", "#26B99A",
"#3498DB" "#3498DB"
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
"#CFD4D8", "#CFD4D8",
"#B370CF", "#B370CF",
"#34495E", "#E95E4F",
"#36CAAB", "#36CAAB",
"#49A9EA" "#49A9EA"
] ]
}] }]
} },
options: options
}); });
var canvasDoughnut = new Chart(document.getElementById("canvas1i2"), { new Chart(document.getElementById("canvas1i2"), {
type: 'doughnut', type: 'doughnut',
showTooltips: false,
tooltipFillColor: "rgba(51, 51, 51, 0.55)", tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: { data: {
labels: [ labels: [
@ -1049,25 +1038,25 @@
backgroundColor: [ backgroundColor: [
"#BDC3C7", "#BDC3C7",
"#9B59B6", "#9B59B6",
"#455C73", "#E74C3C",
"#26B99A", "#26B99A",
"#3498DB" "#3498DB"
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
"#CFD4D8", "#CFD4D8",
"#B370CF", "#B370CF",
"#34495E", "#E95E4F",
"#36CAAB", "#36CAAB",
"#49A9EA" "#49A9EA"
] ]
}] }]
} },
options: options
}); });
var canvasDoughnut = new Chart(document.getElementById("canvas1i3"), { new Chart(document.getElementById("canvas1i3"), {
type: 'doughnut', type: 'doughnut',
showTooltips: false,
tooltipFillColor: "rgba(51, 51, 51, 0.55)", tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: { data: {
labels: [ labels: [
@ -1082,24 +1071,26 @@
backgroundColor: [ backgroundColor: [
"#BDC3C7", "#BDC3C7",
"#9B59B6", "#9B59B6",
"#455C73", "#E74C3C",
"#26B99A", "#26B99A",
"#3498DB" "#3498DB"
], ],
hoverBackgroundColor: [ hoverBackgroundColor: [
"#CFD4D8", "#CFD4D8",
"#B370CF", "#B370CF",
"#34495E", "#E95E4F",
"#36CAAB", "#36CAAB",
"#49A9EA" "#49A9EA"
] ]
}] }]
} },
options: options
}); });
}); });
</script> </script>
<!-- --> <!-- /Doughnut Chart -->
<!-- datepicker --> <!-- datepicker -->
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
@ -1108,7 +1099,7 @@
console.log(start.toISOString(), end.toISOString(), label); console.log(start.toISOString(), end.toISOString(), label);
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY')); $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
//alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]"); //alert("Callback has fired: [" + start.format('MMMM D, YYYY') + " to " + end.format('MMMM D, YYYY') + ", label = " + label + "]");
} };
var optionSet1 = { var optionSet1 = {
startDate: moment().subtract(29, 'days'), startDate: moment().subtract(29, 'days'),

250
production/index3.html
View File

@ -384,7 +384,7 @@
<div class="col-md-4 col-sm-6 col-xs-12"> <div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320"> <div class="x_panel fixed_height_320">
<div class="x_title"> <div class="x_title">
<h2>Application Devices <small>Sessions</small></h2> <h2>App Devices <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
@ -493,7 +493,7 @@
<div class="col-md-4 col-sm-6 col-xs-12"> <div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320"> <div class="x_panel fixed_height_320">
<div class="x_title"> <div class="x_title">
<h2>Daily active users <small>Sessions</small></h2> <h2>Daily users <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
@ -512,70 +512,68 @@
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div class="x_content"> <div class="x_content">
<table class="" style="width:100%">
<table class="tile" style="width:100%"> <tr>
<tr> <th style="width:37%;">
<th style="width:37%;"> <p>Top 5</p>
<span>Top 5</span> </th>
</th> <th>
<th> <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> <p class="">Device</p>
<span class="hidden-small">Disbursement</span> </div>
</div> <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"> <p class="">Progress</p>
<span class="hidden-small">Progress</span> </div>
</div> </th>
</th> </tr>
</tr> <tr>
<tr> <td>
<td> <canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
<canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas> </td>
</td> <td>
<td> <table class="tile_info">
<table class="tile_info"> <tr>
<tr> <td>
<td> <p><i class="fa fa-square blue"></i>IOS </p>
<p><i class="fa fa-square blue"></i>IOS </p> </td>
</td> <td>30%</td>
<td>30%</td> </tr>
</tr> <tr>
<tr> <td>
<td> <p><i class="fa fa-square green"></i>Android </p>
<p><i class="fa fa-square green"></i>Android </p> </td>
</td> <td>10%</td>
<td>10%</td> </tr>
</tr> <tr>
<tr> <td>
<td> <p><i class="fa fa-square purple"></i>Blackberry </p>
<p><i class="fa fa-square purple"></i>Blackberry </p> </td>
</td> <td>20%</td>
<td>20%</td> </tr>
</tr> <tr>
<tr> <td>
<td> <p><i class="fa fa-square aero"></i>Symbian </p>
<p><i class="fa fa-square aero"></i>Symbian </p> </td>
</td> <td>15%</td>
<td>15%</td> </tr>
</tr> <tr>
<tr> <td>
<td> <p><i class="fa fa-square red"></i>Others </p>
<p><i class="fa fa-square red"></i>Others </p> </td>
</td> <td>30%</td>
<td>30%</td> </tr>
</tr> </table>
</table> </td>
</td> </tr>
</tr> </table>
</table>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4 col-sm-6 col-xs-12"> <div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320"> <div class="x_panel fixed_height_320">
<div class="x_title"> <div class="x_title">
<h2>Daily active users <small>Sessions</small></h2> <h2>Profile Settings <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
@ -596,27 +594,20 @@
<div class="x_content"> <div class="x_content">
<div class="dashboard-widget-content"> <div class="dashboard-widget-content">
<ul class="quick-list"> <ul class="quick-list">
<li><i class="fa fa-calendar-o"></i><a href="#">Settings</a> <li><i class="fa fa-line-chart"></i><a href="#">Achievements</a></li>
</li> <li><i class="fa fa-thumbs-up"></i><a href="#">Favorites</a></li>
<li><i class="fa fa-bars"></i><a href="#">Subscription</a> <li><i class="fa fa-calendar-o"></i><a href="#">Activities</a></li>
</li> <li><i class="fa fa-cog"></i><a href="#">Settings</a></li>
<li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li> <li><i class="fa fa-area-chart"></i><a href="#">Logout</a></li>
<li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
</li>
<li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
<li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
</li>
<li><i class="fa fa-area-chart"></i><a href="#">Logout</a>
</li>
</ul> </ul>
<div class="sidebar-widget"> <div class="sidebar-widget">
<h4>Profile Completion</h4> <h4>Profile Completion</h4>
<canvas width="150" height="80" id="foo" class="" style="width: 160px; height: 100px;"></canvas> <canvas width="150" height="80" id="foo" class="" style="width: 160px; height: 100px;"></canvas>
<div class="goal-wrapper"> <div class="goal-wrapper">
<span class="gauge-value pull-left">$</span> <span id="gauge-text" class="gauge-value pull-left">0</span>
<span id="gauge-text" class="gauge-value pull-left">3,200</span> <span class="gauge-value pull-left">%</span>
<span id="goal-text" class="goal-value pull-right">$5,000</span> <span id="goal-text" class="goal-value pull-right">100%</span>
</div> </div>
</div> </div>
</div> </div>
@ -718,7 +709,7 @@
<div class="col-md-4 col-sm-6 col-xs-12"> <div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel"> <div class="x_panel">
<div class="x_title"> <div class="x_title">
<h2>Daily active users <small>Sessions</small></h2> <h2>Today's Weather <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
@ -844,11 +835,10 @@
</div> </div>
<!-- end of weather widget --> <!-- end of weather widget -->
<div class="col-md-4 col-sm-6 col-xs-12"> <div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320"> <div class="x_panel fixed_height_320">
<div class="x_title"> <div class="x_title">
<h2>Daily active users <small>Sessions</small></h2> <h2>Incomes <small>Sessions</small></h2>
<ul class="nav navbar-right panel_toolbox"> <ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li> </li>
@ -869,27 +859,18 @@
<div class="x_content"> <div class="x_content">
<div class="dashboard-widget-content"> <div class="dashboard-widget-content">
<ul class="quick-list"> <ul class="quick-list">
<li><i class="fa fa-calendar-o"></i><a href="#">Settings</a> <li><i class="fa fa-bars"></i><a href="#">Subscription</a></li>
</li>
<li><i class="fa fa-bars"></i><a href="#">Subscription</a>
</li>
<li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li> <li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
<li><i class="fa fa-line-chart"></i><a href="#">Achievements</a> <li><i class="fa fa-support"></i><a href="#">Help Desk</a> </li>
</li> <li><i class="fa fa-heart"></i><a href="#">Donations</a> </li>
<li><i class="fa fa-bar-chart"></i><a href="#">Auto Renewal</a> </li>
<li><i class="fa fa-line-chart"></i><a href="#">Achievements</a>
</li>
<li><i class="fa fa-area-chart"></i><a href="#">Logout</a>
</li>
</ul> </ul>
<div class="sidebar-widget"> <div class="sidebar-widget">
<h4>Profile Completion</h4> <h4>Goal</h4>
<canvas width="150" height="80" id="foo2" class="" style="width: 160px; height: 100px;"></canvas> <canvas width="150" height="80" id="foo2" class="" style="width: 160px; height: 100px;"></canvas>
<div class="goal-wrapper"> <div class="goal-wrapper">
<span class="gauge-value pull-left">$</span>
<span id="gauge-text2" class="gauge-value pull-left">3,200</span> <span id="gauge-text2" class="gauge-value pull-left">3,200</span>
<span id="goal-text2" class="goal-value pull-right">$5,000</span> <span id="goal-text2" class="goal-value pull-right">5,000</span>
</div> </div>
</div> </div>
</div> </div>
@ -930,7 +911,6 @@
<script src="js/icheck/icheck.min.js"></script> <script src="js/icheck/icheck.min.js"></script>
<!-- gauge js --> <!-- gauge js -->
<script type="text/javascript" src="js/gauge/gauge.min.js"></script> <script type="text/javascript" src="js/gauge/gauge.min.js"></script>
<script type="text/javascript" src="js/gauge/gauge_demo.js"></script>
<!-- daterangepicker --> <!-- daterangepicker -->
<script type="text/javascript" src="js/moment/moment.min.js"></script> <script type="text/javascript" src="js/moment/moment.min.js"></script>
<script type="text/javascript" src="js/datepicker/daterangepicker.js"></script> <script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
@ -1015,7 +995,7 @@
}], options); }], options);
</script> </script>
<!-- /flot --> <!-- /flot -->
<!-- -->
<script> <script>
$('document').ready(function() { $('document').ready(function() {
$(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], { $(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {
@ -1039,47 +1019,52 @@
spotColor: '#26B99A', spotColor: '#26B99A',
minSpotColor: '#26B99A' minSpotColor: '#26B99A'
}); });
});
</script>
Chart.defaults.global.legend = { <!-- Doughnut Chart -->
enabled: false <script>
$('document').ready(function() {
var options = {
legend: false,
responsive: false
}; };
var data = { new Chart(document.getElementById("canvas1"), {
labels: [
"Symbian",
"Blackberry",
"Other",
"Android",
"IOS"
],
datasets: [{
data: [15, 20, 30, 10, 30],
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#455C73",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#34495E",
"#36CAAB",
"#49A9EA"
]
}]
};
var canvasDoughnut = new Chart(document.getElementById("canvas1"), {
type: 'doughnut', type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)", tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: data data: {
labels: [
"Symbian",
"Blackberry",
"Other",
"Android",
"IOS"
],
datasets: [{
data: [15, 20, 30, 10, 30],
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#E74C3C",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#E95E4F",
"#36CAAB",
"#49A9EA"
]
}]
},
options: options
}); });
}); });
</script> </script>
<!-- --> <!-- /Doughnut Chart -->
<!-- datepicker --> <!-- datepicker -->
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
@ -1224,11 +1209,18 @@
strokeColor: '#F0F3F3', // to see which ones work best for you strokeColor: '#F0F3F3', // to see which ones work best for you
generateGradient: true generateGradient: true
}; };
var target = document.getElementById('foo2'); // your canvas element var target = document.getElementById('foo'), // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge! gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 100; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(80); // set actual value
gauge.setTextField(document.getElementById("gauge-text"));
var target = document.getElementById('foo2'), // your canvas element
gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
gauge.maxValue = 5000; // set max gauge value gauge.maxValue = 5000; // set max gauge value
gauge.animationSpeed = 32; // set animation speed (32 is default value) gauge.animationSpeed = 32; // set animation speed (32 is default value)
gauge.set(3200); // set actual value gauge.set(4200); // set actual value
gauge.setTextField(document.getElementById("gauge-text2")); gauge.setTextField(document.getElementById("gauge-text2"));
</script> </script>
</body> </body>

41
production/js/chartjs/chart.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
production/widgets.html
View File

@ -1135,6 +1135,7 @@
}); });
}); });
</script> </script>
<script> <script>
$('document').ready(function() { $('document').ready(function() {
$(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], { $(".sparkline_one").sparkline([2, 4, 3, 4, 5, 4, 5, 4, 3, 4, 5, 6, 7, 5, 4, 3, 5, 6], {