mirror of https://github.com/ColorlibHQ/gentelella
Merge pull request #85 from christianesperar/master
Chart.js and Sample data enhancementpull/87/head
Aigars Silkalns
commit
6bb1ae621d
|
|
@ -583,7 +583,6 @@
|
|||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
|
||||
<table class="" style="width:100%">
|
||||
<tr>
|
||||
<th style="width:37%;">
|
||||
|
|
@ -1228,13 +1227,18 @@
|
|||
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 = {
|
||||
new Chart(document.getElementById("canvas1"), {
|
||||
type: 'doughnut',
|
||||
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
||||
data: {
|
||||
labels: [
|
||||
"Symbian",
|
||||
"Blackberry",
|
||||
|
|
@ -1247,28 +1251,25 @@
|
|||
backgroundColor: [
|
||||
"#BDC3C7",
|
||||
"#9B59B6",
|
||||
"#455C73",
|
||||
"#E74C3C",
|
||||
"#26B99A",
|
||||
"#3498DB"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#CFD4D8",
|
||||
"#B370CF",
|
||||
"#34495E",
|
||||
"#E95E4F",
|
||||
"#36CAAB",
|
||||
"#49A9EA"
|
||||
]
|
||||
|
||||
}]
|
||||
};
|
||||
|
||||
var canvasDoughnut = new Chart(document.getElementById("canvas1"), {
|
||||
type: 'doughnut',
|
||||
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
||||
data: data
|
||||
},
|
||||
options: options
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!-- /dashbord linegraph -->
|
||||
<!-- /Doughnut Chart -->
|
||||
|
||||
<!-- datepicker -->
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}];
|
||||
|
||||
Chart.defaults.global.legend = {
|
||||
enabled: false
|
||||
<!-- Doughnut Chart -->
|
||||
<script>
|
||||
$('document').ready(function() {
|
||||
var canvasDoughnut,
|
||||
options = {
|
||||
legend: false,
|
||||
responsive: 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'),
|
||||
|
|
|
|||
|
|
@ -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,18 +512,17 @@
|
|||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="x_content">
|
||||
|
||||
<table class="tile" style="width:100%">
|
||||
<table class="" style="width:100%">
|
||||
<tr>
|
||||
<th style="width:37%;">
|
||||
<span>Top 5</span>
|
||||
<p>Top 5</p>
|
||||
</th>
|
||||
<th>
|
||||
<div class="col-lg-7 col-md-7 col-sm-7 col-xs-7">
|
||||
<span class="hidden-small">Disbursement</span>
|
||||
<p class="">Device</p>
|
||||
</div>
|
||||
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
|
||||
<span class="hidden-small">Progress</span>
|
||||
<p class="">Progress</p>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
|
|
@ -571,11 +570,10 @@
|
|||
</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,12 +1019,21 @@
|
|||
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 = {
|
||||
new Chart(document.getElementById("canvas1"), {
|
||||
type: 'doughnut',
|
||||
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
||||
data: {
|
||||
labels: [
|
||||
"Symbian",
|
||||
"Blackberry",
|
||||
|
|
@ -1057,29 +1046,25 @@
|
|||
backgroundColor: [
|
||||
"#BDC3C7",
|
||||
"#9B59B6",
|
||||
"#455C73",
|
||||
"#E74C3C",
|
||||
"#26B99A",
|
||||
"#3498DB"
|
||||
],
|
||||
hoverBackgroundColor: [
|
||||
"#CFD4D8",
|
||||
"#B370CF",
|
||||
"#34495E",
|
||||
"#E95E4F",
|
||||
"#36CAAB",
|
||||
"#49A9EA"
|
||||
]
|
||||
|
||||
}]
|
||||
};
|
||||
|
||||
var canvasDoughnut = new Chart(document.getElementById("canvas1"), {
|
||||
type: 'doughnut',
|
||||
tooltipFillColor: "rgba(51, 51, 51, 0.55)",
|
||||
data: data
|
||||
},
|
||||
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
|
|
@ -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], {
|
||||
|
|
|
|||
Loading…
Reference in New Issue