Make morris.js responsive
This commit is contained in:
christianesperar
parent
6bb1ae621d
commit
a172918f23
|
|
@ -4234,17 +4234,12 @@ ul.project_files li a i {
|
|||
}
|
||||
.avatar-view {
|
||||
display: block;
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
border: 3px solid #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, .15);
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar-view img {
|
||||
width: 100%;
|
||||
}
|
||||
.avatar-body {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
|
|
|
|||
|
|
@ -869,8 +869,9 @@
|
|||
<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>
|
||||
|
|
@ -879,6 +880,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- footer content -->
|
||||
<footer>
|
||||
|
|
@ -1143,39 +1145,38 @@
|
|||
<!-- moris js -->
|
||||
<script src="js/moris/raphael-min.js"></script>
|
||||
<script src="js/moris/morris.min.js"></script>
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
var day_data = [{
|
||||
"period": "Jan",
|
||||
"Hours worked": 80
|
||||
}, {
|
||||
"period": "Feb",
|
||||
"Hours worked": 125
|
||||
}, {
|
||||
"period": "Mar",
|
||||
"Hours worked": 176
|
||||
}, {
|
||||
"period": "Apr",
|
||||
"Hours worked": 224
|
||||
}, {
|
||||
"period": "May",
|
||||
"Hours worked": 265
|
||||
}, {
|
||||
"period": "Jun",
|
||||
"Hours worked": 314
|
||||
}];
|
||||
Morris.Bar({
|
||||
element: 'graph_bar',
|
||||
data: day_data,
|
||||
hideHover: 'always',
|
||||
data: [
|
||||
{ "period": "Jan", "Hours worked": 80 },
|
||||
{ "period": "Feb", "Hours worked": 125 },
|
||||
{ "period": "Mar", "Hours worked": 176 },
|
||||
{ "period": "Apr", "Hours worked": 224 },
|
||||
{ "period": "May", "Hours worked": 265 },
|
||||
{ "period": "Jun", "Hours worked": 314 },
|
||||
{ "period": "Jul", "Hours worked": 347 },
|
||||
{ "period": "Aug", "Hours worked": 287 },
|
||||
{ "period": "Sep", "Hours worked": 240 },
|
||||
{ "period": "Oct", "Hours worked": 211 }
|
||||
],
|
||||
xkey: 'period',
|
||||
hideHover: 'auto',
|
||||
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
ykeys: ['Hours worked', 'sorned'],
|
||||
labels: ['Hours worked', 'SORN'],
|
||||
xLabelAngle: 60
|
||||
xLabelAngle: 60,
|
||||
resize: true
|
||||
});
|
||||
|
||||
$MENU_TOGGLE.on('click', function() {
|
||||
$(window).resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- skycons -->
|
||||
<script>
|
||||
var icons = new Skycons({
|
||||
|
|
|
|||
|
|
@ -4,15 +4,18 @@
|
|||
* and open the template in the editor.
|
||||
*/
|
||||
|
||||
var URL = window.location,
|
||||
$BODY = $('body'),
|
||||
$MENU_TOGGLE = $('#menu_toggle'),
|
||||
$SIDEBAR_MENU = $('#sidebar-menu'),
|
||||
$SIDEBAR_FOOTER = $('.sidebar-footer'),
|
||||
$LEFT_COL = $('.left_col'),
|
||||
$RIGHT_COL = $('.right_col'),
|
||||
$NAV_MENU = $('.nav_menu'),
|
||||
$FOOTER = $('footer');
|
||||
|
||||
// Sidebar
|
||||
$(function () {
|
||||
var URL = window.location,
|
||||
$BODY = $('body'),
|
||||
$SIDEBAR_MENU = $('#sidebar-menu'),
|
||||
$MENU_TOGGLE = $('#menu_toggle');
|
||||
$SIDEBAR_FOOTER = $('.sidebar-footer');
|
||||
$LEFT_COL = $('.left_col');
|
||||
|
||||
$SIDEBAR_MENU.find('li ul').slideUp();
|
||||
$SIDEBAR_MENU.find('li').removeClass('active');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,29 +1,5 @@
|
|||
$(function () {
|
||||
|
||||
/* data stolen from http://howmanyleft.co.uk/vehicle/jaguar_'e'_type */
|
||||
var day_data = [
|
||||
{"period": "2016-10-01", "licensed": 807, "sorned": 660},
|
||||
{"period": "2016-09-30", "licensed": 1251, "sorned": 729},
|
||||
{"period": "2016-09-29", "licensed": 1769, "sorned": 1018},
|
||||
{"period": "2016-09-20", "licensed": 2246, "sorned": 1461},
|
||||
{"period": "2016-09-19", "licensed": 2657, "sorned": 1967},
|
||||
{"period": "2016-09-18", "licensed": 3148, "sorned": 2627},
|
||||
{"period": "2016-09-17", "licensed": 3471, "sorned": 3740},
|
||||
{"period": "2016-09-16", "licensed": 2871, "sorned": 2216},
|
||||
{"period": "2016-09-15", "licensed": 2401, "sorned": 1656},
|
||||
{"period": "2016-09-10", "licensed": 2115, "sorned": 1022}
|
||||
];
|
||||
Morris.Bar({
|
||||
element: 'graph_bar_group',
|
||||
data: day_data,
|
||||
xkey: 'period',
|
||||
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
hideHover: 'auto',
|
||||
xLabelAngle: 60
|
||||
});
|
||||
|
||||
Morris.Bar({
|
||||
element: 'graph_bar',
|
||||
data: [
|
||||
|
|
@ -44,7 +20,31 @@ $(function () {
|
|||
barRatio: 0.4,
|
||||
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
xLabelAngle: 35,
|
||||
hideHover: 'auto'
|
||||
hideHover: 'auto',
|
||||
resize: true
|
||||
});
|
||||
|
||||
Morris.Bar({
|
||||
element: 'graph_bar_group',
|
||||
data: [
|
||||
{"period": "2016-10-01", "licensed": 807, "sorned": 660},
|
||||
{"period": "2016-09-30", "licensed": 1251, "sorned": 729},
|
||||
{"period": "2016-09-29", "licensed": 1769, "sorned": 1018},
|
||||
{"period": "2016-09-20", "licensed": 2246, "sorned": 1461},
|
||||
{"period": "2016-09-19", "licensed": 2657, "sorned": 1967},
|
||||
{"period": "2016-09-18", "licensed": 3148, "sorned": 2627},
|
||||
{"period": "2016-09-17", "licensed": 3471, "sorned": 3740},
|
||||
{"period": "2016-09-16", "licensed": 2871, "sorned": 2216},
|
||||
{"period": "2016-09-15", "licensed": 2401, "sorned": 1656},
|
||||
{"period": "2016-09-10", "licensed": 2115, "sorned": 1022}
|
||||
],
|
||||
xkey: 'period',
|
||||
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
ykeys: ['licensed', 'sorned'],
|
||||
labels: ['Licensed', 'SORN'],
|
||||
hideHover: 'auto',
|
||||
xLabelAngle: 60,
|
||||
resize: true
|
||||
});
|
||||
|
||||
Morris.Bar({
|
||||
|
|
@ -59,7 +59,8 @@ $(function () {
|
|||
ykeys: ['y', 'z', 'a'],
|
||||
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
hideHover: 'auto',
|
||||
labels: ['Y', 'Z', 'A']
|
||||
labels: ['Y', 'Z', 'A'],
|
||||
resize: true
|
||||
}).on('click', function (i, row) {
|
||||
console.log(i, row);
|
||||
});
|
||||
|
|
@ -83,7 +84,8 @@ $(function () {
|
|||
lineColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
labels: ['iPhone', 'iPad', 'iPod Touch'],
|
||||
pointSize: 2,
|
||||
hideHover: 'auto'
|
||||
hideHover: 'auto',
|
||||
resize: true
|
||||
});
|
||||
|
||||
|
||||
|
|
@ -97,11 +99,12 @@ $(function () {
|
|||
],
|
||||
colors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
formatter: function (y) {
|
||||
return y + "%"
|
||||
}
|
||||
return y + "%";
|
||||
},
|
||||
resize: true
|
||||
});
|
||||
|
||||
new Morris.Line({
|
||||
Morris.Line({
|
||||
element: 'graph_line',
|
||||
xkey: 'year',
|
||||
ykeys: ['value'],
|
||||
|
|
@ -114,7 +117,11 @@ $(function () {
|
|||
{year: '2014', value: 5},
|
||||
{year: '2015', value: 5},
|
||||
{year: '2016', value: 20}
|
||||
]
|
||||
],
|
||||
resize: true
|
||||
});
|
||||
|
||||
$MENU_TOGGLE.on('click', function() {
|
||||
$(window).resize();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -368,9 +368,7 @@
|
|||
<!-- end of image cropping -->
|
||||
<div id="crop-avatar">
|
||||
<!-- Current avatar -->
|
||||
<div class="avatar-view" title="Change the avatar">
|
||||
<img src="images/picture.jpg" alt="Avatar">
|
||||
</div>
|
||||
<img class="img-responsive avatar-view" src="images/picture.jpg" alt="Avatar" title="Change the avatar">
|
||||
|
||||
<!-- Cropping modal -->
|
||||
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
|
||||
|
|
@ -717,49 +715,35 @@
|
|||
|
||||
<script>
|
||||
$(function() {
|
||||
var day_data = [{
|
||||
"period": "Jan",
|
||||
"Hours worked": 80
|
||||
}, {
|
||||
"period": "Feb",
|
||||
"Hours worked": 125
|
||||
}, {
|
||||
"period": "Mar",
|
||||
"Hours worked": 176
|
||||
}, {
|
||||
"period": "Apr",
|
||||
"Hours worked": 224
|
||||
}, {
|
||||
"period": "May",
|
||||
"Hours worked": 265
|
||||
}, {
|
||||
"period": "Jun",
|
||||
"Hours worked": 314
|
||||
}, {
|
||||
"period": "Jul",
|
||||
"Hours worked": 347
|
||||
}, {
|
||||
"period": "Aug",
|
||||
"Hours worked": 287
|
||||
}, {
|
||||
"period": "Sep",
|
||||
"Hours worked": 240
|
||||
}, {
|
||||
"period": "Oct",
|
||||
"Hours worked": 211
|
||||
}];
|
||||
Morris.Bar({
|
||||
element: 'graph_bar',
|
||||
data: day_data,
|
||||
data: [
|
||||
{ "period": "Jan", "Hours worked": 80 },
|
||||
{ "period": "Feb", "Hours worked": 125 },
|
||||
{ "period": "Mar", "Hours worked": 176 },
|
||||
{ "period": "Apr", "Hours worked": 224 },
|
||||
{ "period": "May", "Hours worked": 265 },
|
||||
{ "period": "Jun", "Hours worked": 314 },
|
||||
{ "period": "Jul", "Hours worked": 347 },
|
||||
{ "period": "Aug", "Hours worked": 287 },
|
||||
{ "period": "Sep", "Hours worked": 240 },
|
||||
{ "period": "Oct", "Hours worked": 211 }
|
||||
],
|
||||
xkey: 'period',
|
||||
hideHover: 'auto',
|
||||
barColors: ['#26B99A', '#34495E', '#ACADAC', '#3498DB'],
|
||||
ykeys: ['Hours worked', 'sorned'],
|
||||
labels: ['Hours worked', 'SORN'],
|
||||
xLabelAngle: 60
|
||||
xLabelAngle: 60,
|
||||
resize: true
|
||||
});
|
||||
|
||||
$MENU_TOGGLE.on('click', function() {
|
||||
$(window).resize();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- datepicker -->
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
|
|
|
|||
Loading…
Reference in a new issue