Merge pull request #85 from christianesperar/master

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

View File

@ -583,7 +583,6 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="" style="width:100%">
<tr>
<th style="width:37%;">
@ -1228,47 +1227,49 @@
icons.play();
</script>
<!-- dashbord linegraph -->
<!-- Doughnut Chart -->
<script>
Chart.defaults.global.legend = {
enabled: false
};
$('document').ready(function() {
var options = {
legend: false,
responsive: false
};
var data = {
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',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: data
new Chart(document.getElementById("canvas1"), {
type: 'doughnut',
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
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>
<!-- /dashbord linegraph -->
<!-- /Doughnut Chart -->
<!-- datepicker -->
<script type="text/javascript">
$(document).ready(function() {

View File

@ -584,7 +584,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -594,7 +594,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -604,7 +604,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -614,7 +614,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -624,7 +624,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -660,7 +660,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -670,7 +670,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -680,7 +680,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -690,7 +690,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -700,7 +700,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -736,7 +736,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -746,7 +746,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -756,7 +756,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -766,7 +766,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -776,7 +776,7 @@
<p class="day">23</p>
</a>
<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>
</div>
</article>
@ -977,31 +977,20 @@
spotColor: '#34495E',
minSpotColor: '#34495E'
});
});
</script>
var doughnutData = [{
value: 30,
color: "#455C73"
}, {
value: 30,
color: "#9B59B6"
}, {
value: 60,
color: "#BDC3C7"
}, {
value: 100,
color: "#26B99A"
}, {
value: 120,
color: "#3498DB"
}];
<!-- Doughnut Chart -->
<script>
$('document').ready(function() {
var canvasDoughnut,
options = {
legend: false,
responsive: false
};
Chart.defaults.global.legend = {
enabled: false
};
var canvasDoughnut = new Chart(document.getElementById("canvas1i"), {
new Chart(document.getElementById("canvas1i"), {
type: 'doughnut',
showTooltips: false,
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: [
@ -1016,25 +1005,25 @@
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#455C73",
"#E74C3C",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#34495E",
"#E95E4F",
"#36CAAB",
"#49A9EA"
]
}]
}
},
options: options
});
var canvasDoughnut = new Chart(document.getElementById("canvas1i2"), {
new Chart(document.getElementById("canvas1i2"), {
type: 'doughnut',
showTooltips: false,
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: [
@ -1049,25 +1038,25 @@
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#455C73",
"#E74C3C",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#34495E",
"#E95E4F",
"#36CAAB",
"#49A9EA"
]
}]
}
},
options: options
});
var canvasDoughnut = new Chart(document.getElementById("canvas1i3"), {
new Chart(document.getElementById("canvas1i3"), {
type: 'doughnut',
showTooltips: false,
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
data: {
labels: [
@ -1082,24 +1071,26 @@
backgroundColor: [
"#BDC3C7",
"#9B59B6",
"#455C73",
"#E74C3C",
"#26B99A",
"#3498DB"
],
hoverBackgroundColor: [
"#CFD4D8",
"#B370CF",
"#34495E",
"#E95E4F",
"#36CAAB",
"#49A9EA"
]
}]
}
},
options: options
});
});
</script>
<!-- -->
<!-- /Doughnut Chart -->
<!-- datepicker -->
<script type="text/javascript">
$(document).ready(function() {
@ -1108,7 +1099,7 @@
console.log(start.toISOString(), end.toISOString(), label);
$('#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 + "]");
}
};
var optionSet1 = {
startDate: moment().subtract(29, 'days'),

View File

@ -384,7 +384,7 @@
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
@ -493,7 +493,7 @@
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
@ -512,70 +512,68 @@
<div class="clearfix"></div>
</div>
<div class="x_content">
<table class="tile" style="width:100%">
<tr>
<th style="width:37%;">
<span>Top 5</span>
</th>
<th>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<span class="hidden-small">Disbursement</span>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<span class="hidden-small">Progress</span>
</div>
</th>
</tr>
<tr>
<td>
<canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
</td>
<td>
<table class="tile_info">
<tr>
<td>
<p><i class="fa fa-square blue"></i>IOS </p>
</td>
<td>30%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square green"></i>Android </p>
</td>
<td>10%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square purple"></i>Blackberry </p>
</td>
<td>20%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square aero"></i>Symbian </p>
</td>
<td>15%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square red"></i>Others </p>
</td>
<td>30%</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="" style="width:100%">
<tr>
<th style="width:37%;">
<p>Top 5</p>
</th>
<th>
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
<p class="">Device</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<p class="">Progress</p>
</div>
</th>
</tr>
<tr>
<td>
<canvas id="canvas1" height="140" width="140" style="margin: 15px 10px 10px 0"></canvas>
</td>
<td>
<table class="tile_info">
<tr>
<td>
<p><i class="fa fa-square blue"></i>IOS </p>
</td>
<td>30%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square green"></i>Android </p>
</td>
<td>10%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square purple"></i>Blackberry </p>
</td>
<td>20%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square aero"></i>Symbian </p>
</td>
<td>15%</td>
</tr>
<tr>
<td>
<p><i class="fa fa-square red"></i>Others </p>
</td>
<td>30%</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
@ -596,27 +594,20 @@
<div class="x_content">
<div class="dashboard-widget-content">
<ul class="quick-list">
<li><i class="fa fa-calendar-o"></i><a href="#">Settings</a>
</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-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>
<li><i class="fa fa-line-chart"></i><a href="#">Achievements</a></li>
<li><i class="fa fa-thumbs-up"></i><a href="#">Favorites</a></li>
<li><i class="fa fa-calendar-o"></i><a href="#">Activities</a></li>
<li><i class="fa fa-cog"></i><a href="#">Settings</a></li>
<li><i class="fa fa-area-chart"></i><a href="#">Logout</a></li>
</ul>
<div class="sidebar-widget">
<h4>Profile Completion</h4>
<canvas width="150" height="80" id="foo" class="" style="width: 160px; height: 100px;"></canvas>
<div class="goal-wrapper">
<span class="gauge-value pull-left">$</span>
<span id="gauge-text" class="gauge-value pull-left">3,200</span>
<span id="goal-text" class="goal-value pull-right">$5,000</span>
<span id="gauge-text" class="gauge-value pull-left">0</span>
<span class="gauge-value pull-left">%</span>
<span id="goal-text" class="goal-value pull-right">100%</span>
</div>
</div>
</div>
@ -718,7 +709,7 @@
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
@ -844,11 +835,10 @@
</div>
<!-- end of weather widget -->
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="x_panel fixed_height_320">
<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">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
</li>
@ -869,27 +859,18 @@
<div class="x_content">
<div class="dashboard-widget-content">
<ul class="quick-list">
<li><i class="fa fa-calendar-o"></i><a href="#">Settings</a>
</li>
<li><i class="fa fa-bars"></i><a href="#">Subscription</a>
</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-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>
<li><i class="fa fa-support"></i><a href="#">Help Desk</a> </li>
<li><i class="fa fa-heart"></i><a href="#">Donations</a> </li>
</ul>
<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>
<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="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>
@ -930,7 +911,6 @@
<script src="js/icheck/icheck.min.js"></script>
<!-- gauge js -->
<script type="text/javascript" src="js/gauge/gauge.min.js"></script>
<script type="text/javascript" src="js/gauge/gauge_demo.js"></script>
<!-- daterangepicker -->
<script type="text/javascript" src="js/moment/moment.min.js"></script>
<script type="text/javascript" src="js/datepicker/daterangepicker.js"></script>
@ -1015,7 +995,7 @@
}], options);
</script>
<!-- /flot -->
<!-- -->
<script>
$('document').ready(function() {
$(".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',
minSpotColor: '#26B99A'
});
});
</script>
Chart.defaults.global.legend = {
enabled: false
<!-- Doughnut Chart -->
<script>
$('document').ready(function() {
var options = {
legend: false,
responsive: false
};
var data = {
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"), {
new Chart(document.getElementById("canvas1"), {
type: 'doughnut',
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>
<!-- -->
<!-- /Doughnut Chart -->
<!-- datepicker -->
<script type="text/javascript">
$(document).ready(function() {
@ -1224,11 +1209,18 @@
strokeColor: '#F0F3F3', // to see which ones work best for you
generateGradient: true
};
var target = document.getElementById('foo2'); // your canvas element
var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
var target = document.getElementById('foo'), // your canvas element
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.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"));
</script>
</body>

File diff suppressed because one or more lines are too long

View File

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