I have several (bootstrap) cards where I would like to have the opportunity to show this fullscreen. Highcharts charts are present in these cards. The problem is that the height of the highcharts does not adapt when you are going in full screen mode.
A while ago I asked the same question with bootstrap panels and then "daniel_s" made this example for panels. Only now I have added a number of columns at the bottom and it has been converted from panels to cards. Unfortunately the example is not working anymore. Again "daniel_s" made an example but the height is still not 100%.
Is there a possibility to automatically adjust the scaling of the highcharts so that the ratio (columns at the bottom and header) remains the same as in this example?
In addition, I would also like to know how I get the header the text and icons on one line. So that the text is on the left and the icons are on the right.
HTML
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid" id="mainContainer">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel 1</h3>
<li class="list-inline-item"><a href="#" id="panel-fullscreen" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
<div id="container"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> text 1
</div>
<div class="col-sm text-center card_border2">
<br> text 2
</div>
<div class="col-sm text-center card_border2">
<br> text 3
</div>
<div class="col-sm text-center card_border2">
<br> text 4
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="card with-margin card_shadow card_border rounded">
<div class="container-fluid" id="mainContainer">
<div class="row border-bottom-0 card_border2" style="background: linear-gradient(to right, #eea849, #fa7921); justify-content: space-between">
<h3>Panel 2</h3>
<li class="list-inline-item"><a href="#" id="panel-fullscreen2" class="fullscreen-btn" role="button" title="Toggle fullscreen"><i class="fas fa-expand"></i></a></li>
</div>
<div class="row">
<div class="card-body border-top-0 border-bottom-0 card_border2 row-200">
<div id="container2"></div>
</div>
</div>
<div class="row bg-white justify-content-center card_border">
<div class="col-sm text-center card_border2">
<br> text 1
</div>
<div class="col-sm text-center card_border2">
<br> text 2
</div>
<div class="col-sm text-center card_border2">
<br> text 3
</div>
<div class="col-sm text-center card_border2">
<br> text 4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.panel-actions {
margin-bottom: 0;
text-align: right;
}
.panel-actions a {
color: #333;
}
#mainContainer {
height: 50%;
}
.panel-fullscreen {
display: block;
z-index: 9999;
position: fixed !important;
width: 100%;
height: 100%;
top: 0;
right: 0;
left: 0;
bottom: 0;
overflow: auto;
}
.full-height-row {
height: 100%;
width: 100%;
}
#container {
height: 100%;
}
#container2 {
height: 100%;
}
.row-200 {
height: 220px;
}
.card_border {
border: solid 0.75px #fa7921;
}
.card_border2 {
border: solid 2px #fa7921;
}
JavaScript
$(document).ready(function() {
var charts = [];
var chart1Info = {
containerId: "container",
definition: {
title: {
text: "Chart1 Title"
},
subtitle: {
text: "Source: thesolarfoundation.com"
},
yAxis: {
title: {
text: "Number of Employees"
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [
{
name: "Installation",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: "Manufacturing",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: "Sales & Distribution",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: "Project Development",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: "Other",
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
};
var chart2Info = {
containerId: "container2",
definition: {
title: {
text: "Chart2 Title"
},
subtitle: {
text: "Source: thesolarfoundation.com"
},
yAxis: {
title: {
text: "Number of Employees"
}
},
legend: {
layout: "vertical",
align: "right",
verticalAlign: "middle"
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2010
}
},
series: [
{
name: "Installation",
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
},
{
name: "Manufacturing",
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
},
{
name: "Sales & Distribution",
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
},
{
name: "Project Development",
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
},
{
name: "Other",
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}
]
}
};
function drawChart(chartInfo) {
// Properties that vary by chart should be defined in chartInfo
// Any properties that are the same for all charts are added here
chartInfo.responsive = {
rules: [
{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: "horizontal",
align: "center",
verticalAlign: "bottom"
}
}
}
]
};
if (chartInfo == chart1Info) {
charts[0] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
} else {
charts[1] = Highcharts.chart(chartInfo.containerId, chartInfo.definition);
}
}
//Toggle fullscreen
$(".fullscreen-btn").click(function(e) {
e.preventDefault();
var $this = $(this);
$this
.children("i")
.toggleClass("fa-expand")
.toggleClass("fa-arrows-alt");
$(this)
.closest(".card")
.toggleClass("panel-fullscreen");
$($(this).parents()[3])
.find(".card-body")
.toggleClass("row-200");
var chartInfo =
$this.attr("id") === "panel-fullscreen" ? chart1Info : chart2Info;
drawChart(chartInfo);
});
drawChart(chart1Info);
drawChart(chart2Info);
});
As can be seen in this example, the height is not 100%, while in this example the height is 100%. How do I manage that in the first example the height is always 100%.
from Fullscreen bootstrap 4 card with highcharts
No comments:
Post a Comment