Develop Reference

Fullscreen bootstrap 4 card with highcharts

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"><i class="fas fa-expand"></i></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"><i class="fas fa-expand"></i></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%.

I've examined both examples and probably found the solution.
In your working example, all the elements are located in one container panel which has a height set to 100% and child panel-heading of height 94%.
In your example with the issue, there is a 'card' with height set to 100% and child container-fluid with rows inside without a fixed height set.
So as you can see rows doesn't know how to share the space on the screen. To fix it you have to set the CSS styles so that container-fluid is 100% height and rows for example 10% top row, 80% middle row, 10% bottom row. Then all the elements are rendered correctly as you can see below:

Highchart as a modal

I am currently working on a webpage with highchart. I need to show the same highchart as a modal on click of a button. I am using html bootstrap and javascript
This is what I have done
<div class="container" id = "container1" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
<div class="container" id = "container2" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
<div class="container" id = "container3" style = "width: 30%; height: 50%; margin: auto 0 0 0; position: relative; float: left"></div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#myModal">click to zoom</button>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal fade" role= "dialog" id = "myModal" style = "width: 50%; height: 70%; position: absolute; float: center">
</div>
JS:
$(document).ready(function() {
var title = {
text: 'Cycle Profile'
};
var subtitle = {
text: 'Source: cimtool'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var series = [{
name: 'Tokyo',
data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
26.5, 23.3, 18.3, 13.9, 9.6]
},
{
name: 'New York',
data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8,
24.1, 20.1, 14.1, 8.6, 2.5]
},
{
name: 'Berlin',
data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
17.9, 14.3, 9.0, 3.9, 1.0]
},
{
name: 'London',
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0,
16.6, 14.2, 10.3, 6.6, 4.8]
},
{
name: 'India',
data: [5.9, 2.2, 7.7, 6.5, 13.9, 13.2, 14.0,
14.6, 16.2, 8.3, 8.6, 6.8]
}
];
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container1').highcharts(json);
$('#container2').highcharts(json);
$('#container3').highcharts(json);
$('#container6').highcharts(json);
$('#myModal').highcharts(json);
});

Please show us what you have tried and your sample code. Any how I have created a fiddle including bootstarp and jquery aswell.
Where you can see one button please click on that, it will open modal popup. That model contains high chart (basic line).
HTML :
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="myBtn">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div id="container"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
JS :
$(document).ready(function(){
Highcharts.chart('container', {
title: {
text: 'Solar Employment Growth by Sector, 2010-2016'
},
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]
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
});
High chart as modal JS Fiddle

PieChart for every row in dynamically created table

I have a dynamically created table and on click of view button in each row a modal opens that have the pie chart with no of leaves taken by people till date in categories like sick, vacation, maternity, paternity for the particular year.on click of 1st button the pie chart shows up https://imgur.com/a/wpNa3 but but if I click on any button other than 1st then I get a blank page.https://imgur.com/a/jcZjE .Why blank page is appearing??please help me.
<td>
<button type="button" class="btn btn-default btn-sm view" data-toggle="modal" data-target="#{{pl.id}}_3"><i class="fa fa-eye" aria-hidden="true" style="color:black"></i></button>
<!-- Modal -->
<div class="modal fade" id= "{{pl.id}}_3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><b>{{pl.employee.emp_name|title }}</b> Leave Details</h4>
</div>
<div class="modal-body">
<p>Applied leave from {{pl.start_date}} to {{pl.end_date}} for {{ pl.end_date|timeuntil:pl.start_date }} </p>
<p>Leave applied on : {{pl.date_created}}</p>
<p><div id="container" class="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</td>
My jquery Code:
$(document).on('click','.view', function(e){
Highcharts.chart('container', {
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie'
},
title: {
text: 'Total number of leaves applied till now'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
name: 'Brands',
colorByPoint: true,
data: [{
name: 'Sick Leaves',
y: 56.33
}, {
name: 'Casual Leaves',
y: 24.03,
sliced: true,
selected: true
}, {
name: 'Vacation Leaves',
y: 10.3
}, {
name: 'Maternity Leaves',
y: 4.77
}, {
name: 'Paternity Leaves',
y: 0.91
}]
}]
});
});
I am using classname on click due to duplicacy in Id's but still its not workin g..Where am I doing wrong?

Bootstrap Modal on clicking a link on UI Grid

In my UI Grid here are the Column Defs in my myController.js file:
{ field: 'trans_typ_dsc', headerTooltip: 'Transaction Type Description', displayName: 'Transaction Type Description', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' },
{ field: 'trans_stat', displayName: 'Transaction Status' },
{ field: 'sub_trans_actn_typ', displayName: 'Sub Transaction Action Type', cellTemplate: '<div class="wordwrap">{{COL_FIELD}}</div>' , visible : false },
{ field: 'case_key', displayName: 'Case Key', visible: true, celltemplate: '<a class="text-center" ng-href="#" ng-click="grid.appScope.setAssociateCaseModal(row)">{{COL_FIELD}}</a>' },
{ field: 'approved_by', displayName: 'Approved By', visible: false }
Here on clicking the case_key link a UI Bootstrap modal should pop up .
How to do that ?
I know in a html file using a button click it is something like :
<h3>Search Transaction</h3>
<div style="float: right; margin-top: -35px"><button type="button" class="btn btn-default" data-toggle="modal" data-target="#recentSearchesModal">Recent Searches</button></div>
</div>
<div class="modal fade" id="recentSearchesModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Recent Searches</h4>
</div>
<div class="modal-body">
<div class="panel panel-default">
<div class="menu_simple" ng-repeat="obj in CaseRecentSearches" style="padding:8px;">
<ul>
<li>
{{obj | placeholderfunc}}
</li>
</ul>
</div>
<!-- /.panel-body -->
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
But here the click event is my controller.js file then how to get the modal opened ?

You need to modify the field's cellTemplate and then call grid.appScope.openModal(). openModal should live in your main controller under $scope.openModal. Do it like this:
Your template:
var myTemplate = "<a href='#' ng-click='grid.appScope.openModal($event, row)'>{{ row.entity.myFieldName }}</a>";
Use the template in gridOptions.
$scope.gridOptions = {
columnDefs: [{
field: 'myFieldName',
displayName: 'My Field Name',
cellTemplate: myTemplate;
}]
};
Function to call modal:
$scope.openModal = function (e, row) {
//in here, you can access the event object and row object
var myEvent = e;
var myRow = row;
//this is how you open a modal
var modalInstance = $uibModal.open({
templateUrl: '/path/to/modalTemplate.html',
controller: MyModalCtrl,
backdrop: 'static'
//disable the keyboard
//keyboard: false,
resolve {
//pass variables to the MyModalCtrl here
event: function() { return myEvent; },
row: function() { return myRow; }
}
});
//call the modal to open, then decide what to do with the promise
modalInstance.result.then(function() {
//blah blah the user clicked okay
},function(){
//blah blah the user clicked cancel
})
}

Add a class to highcharts pie chart section

I have a highchart pie chart and a table to the right of the pie chart which displays the data in table form.
I would like to link the table with the pie chart so that when I hover over a row in the table it will be as if I am hovering over the pie chart segment.
I believe to do this I would need to add a class to the pie chart segment/path that I can then call using JS when hovering over the table row.
What would be the best way to either achieve this?
(I know it's possible to have a basic legend attached to the pie chart but because I need the table to be in a bootstrap column to the right along with some other data the legend isn't enough :) ).
Here is the current chart setup:
<!-- in Page JS -->
<script>
$(function () {
$('#results_donut').highcharts({
chart: {
type: 'pie'
},
title: {
text: false
},
credits: {
enabled: false
},
plotOptions: {
pie: {
dataLabels: {
enabled: false
},
shadow: false,
},
series: {
states: {
hover: {
enabled: false
}
},
point: {
events: {
mouseOver: function () {
this.options.oldColor = this.color;
this.graphic.attr("fill", "#F8464A");
},
mouseOut: function () {
this.graphic.attr("fill", this.options.oldColor);
}
}
},
}
},
tooltip: {
enabled: false,
formatter: function() {
return this.point.name + ': ' + this.y +' %';
},
style: {
fontFamily: 'Open Sans',
fontWeight: '300',
letterSpacing: '0.03em',
fontSize: '14px'
},
},
series: [{
name: 'Failure Reasons',
innerSize: '50%',
data: [["Brakes",74.6],["Seatbelts", 19.4]],
}],
});
});
</script>
And here is the view code:
<div class="row">
<div class="col-xs-12 col-sm-6">
<div id="results_donut"></div>
</div>
<div class="col-xs-12 col-sm-6 result-figures">
<div class="row failure-reasons">
<div class="col-xs-12">
<h4>Failure Reasons</h4>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed table-hover">
<tbody>
<tr>
<td class="col-xs-6 text-uppercase failure-name">Brakes</td>
<td class="col-xs-2">74.6%</td>
<td class="col-xs-4 text-center">
<a class="transition" href="#">View Details</a>
</td>
</tr>
<tr>
<td class="col-xs-6 text-uppercase failure-name">Seatbelts</td>
<td class="col-xs-2">19.4%</td>
<td class="col-xs-4 text-center">
<a class="transition" href="#">View Details</a>
</td>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>