jinql
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix doughnut chart become bigger when resizing

pull/85/head
christianesperar 2016-04-18 23:07:10 +08:00
parent c4be5d280d
commit b424ea012b
2 changed files with 160 additions and 167 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() {

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>