I'm using chart.js to draw multiple line charts. And when the user clicks on one of these charts, I need to know which chart it was. In order to catch the click of the user, I've added events: ['click'] in the options of the chart, as well as a onClick: clicked to call the function clicked when the user has clicked on the chart. Now I have this:
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [
{
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b'
}
]
}
if (chLine) {
new Chart(chLine,{
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
}
);
}
function clicked(c, i) {
console.log(c, i)
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="test.js"></script>
</body>
</html>
And every time I click on a chart, it gives an array containing information about each chart and also an object containing information about the click event. But I can't seem to find information to conclude which chart was clicked. How can I do this?
Inside the clicked function you can use getElementAtEvent(c) & _datasetIndex; to get the index of the chart data.After that use that index to get the data which is used to draw that line chart. In this example another field is added to the data and on click that name field is consoled. In this case you need to click on the chart circle
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
let chLine = document.getElementById("chLine");
let chartData = {
labels: ['l1', 'l2', 'l3', 'l4', 'l5', 'l6', 'l7', 'l8', 'l9'],
datasets: [{
name: 'First Chart',
label: 'c1',
data: [0.3, 0.4, 0.5, 0.35, 0.2, 0.5, 0.4, 0.55, 0.6],
backgroundColor: 'transparent',
borderColor: '#e6194b',
borderWidth: 1,
pointBackgroundColor: '#e6194b'
},
{
name: 'Second Chart',
label: 'c2',
data: [0.7, 0.5, 0.2, 0.4, 0.6, 0.1, 0.88, 0.35, 0.45],
backgroundColor: 'transparent',
borderColor: '#3cb44b',
borderWidth: 1,
pointBackgroundColor: '#3cb44b',
id: '1',
}
]
}
if (chLine) {
var myLineChart = new Chart(chLine, {
type: 'line',
data: chartData,
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
position: 'top',
labels: {
boxWidth: 5
}
},
events: ['click'],
onClick: clicked
}
});
}
function clicked(c, i, x) {
let getDataSetIndex = this.getElementAtEvent(c)[0]._datasetIndex;
console.log(chartData.datasets[getDataSetIndex].name)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<div class="container">
<div class="row my-3">
<div class="col">
<h4>Chart</h4>
</div>
</div>
<div class="row my-2">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<canvas id="chLine" height="100"></canvas>
</div>
</div>
</div>
</div>
</div>
Related
Thank you for viewing my question.
I have multiple charts I need to display on a single page, the values need to be in the HTML, hence the JavaScript retrieving them.
The issue I have is both charts are retrieving the same data, caused by querySelectorAll('.myChart-values .value') I need to fetch only the values in the bulleted list under the chart, I found the following question: Chart.js: One function for multiple graphs but the code is slightly different to mine. I believe I need to iterate over each chart which I'm doing here for (const chart of Array.from(charts)) { then could I do something like closest or children to retrieve the relevant values? or perhaps I need to put a data attribute on the <canvas class="myChart"></canvas>.
Help with this would be most grateful.
let chartDataValues = [];
const chartValues = document.querySelectorAll('.myChart-values .value');
for (const chartValue of Array.from(chartValues)) {
chartDataValues.push(chartValue.innerHTML);
}
const labels = [
'January',
'February',
'March',
'April',
'May',
'June',
];
const data = {
labels: labels,
datasets: [{
data: chartDataValues,
backgroundColor: [
'rgba(17, 39, 61, 1)',
'rgba(2, 113, 184, 1)',
'rgba(196, 226, 247, 1)',
'rgba(0, 159, 227, 1)',
'rgba(0, 130, 180, 1)',
'rgba(234, 236, 236, 1)'
]
}]
};
const config = {
type: 'bar',
data: data,
options: {
plugins: {
legend: {
display: false
},
},
scales: {
x: {
grid: {
display: false
}
},
y: {
beginAtZero: true,
grid: {
display: false
}
}
}
}
};
const charts = document.querySelectorAll('.myChart');
for (const chart of Array.from(charts)) {
const myChart = new Chart(
chart,
config
)
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#3.7.1/dist/chart.min.js"></script>
<!-- Chart JS -->
<section class="section--padding">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="content">
<canvas class="myChart"></canvas>
</div>
</div>
<div class="col-md-4">
<div class="content">
<ul class="myChart-values">
<li>
<span class="value">10</span>%
</li>
<li>
<span class="value">16</span>%
<li>
<span class="value">10</span>%
</li>
<li>
<span class="value">10</span>%
</li>
<li>
<span class="value">14</span>%
</li>
<li>
<span class="value">18</span>%
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Chart JS -->
<section class="section--padding">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="content">
<canvas class="myChart"></canvas>
</div>
</div>
<div class="col-md-6">
<div class="content">
<ul class="myChart-values">
<li>
<span class="value">2</span>%
</li>
<li>
<span class="value">10</span>%
<li>
<span class="value">10</span>%
</li>
<li>
<span class="value">20</span>%
</li>
<li>
<span class="value">30</span>%
</li>
<li>
<span class="value">15</span>%
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
As you said you would to have differents data, you can say
const data1 = {
labels: labels,
datasets: [{
data: chartDataValues,
backgroundColor: [
'rgba(17, 39, 61, 1)',
'rgba(2, 113, 184, 1)',
'rgba(196, 226, 247, 1)',
'rgba(0, 159, 227, 1)',
'rgba(0, 130, 180, 1)',
'rgba(234, 236, 236, 1)'
]
}]
};
and
const data2 = {
labels: labels,
datasets: [];
Then what you need is to make two config. Config1 and Config2.
With data: data1 for Config1, and data: data2 for config2.
I created a system with Django. I need some charts for my project and I am using chart.js library.
I get data from an API address, I can get the data correctly with Json and display it in a table, but I can not display it in the radar chart.
I think I cannot write Javascript code correctly because Radar chart does not show anything.
views.py
def Radar(request):
response = requests.get('https://api.f-rayscoring.com/company/ADESE/radar')
data = response.json()
return render(request, 'radar.html', {'data': data})
radar.html
<div class="content">
<div class="page-inner">
<h4 class="page-title">Radar Chart</h4>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<div class="card-title">Radar Chart</div>
</div>
<div class="card-body">
<div class="chart-container">
<canvas id="radarChart"></canvas>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock content %}
{% block javascripts %}
<script src="/static/assets/js/setting-demo2.js"></script>
<script>
radarChart = document.getElementById('radarChart').getContext('2d')
{% for dt in data %}
var myRadarChart= new Chart(radarChart, {
type: 'radar',
data: {
labels: [{{ dt.title }}],
datasets: [{
data: [{{ dt.value }}],
borderColor: '#1d7af3',
backgroundColor : 'rgba(29, 122, 243, 0.25)',
pointBackgroundColor: "#1d7af3",
pointHoverRadius: 4,
pointRadius: 3,
label: 'Team 1'
}, {
data: [],
borderColor: '#716aca',
backgroundColor: 'rgba(113, 106, 202, 0.25)',
pointBackgroundColor: "#716aca",
pointHoverRadius: 4,
pointRadius: 3,
label: 'Team 2'
},
]
},
options : {
responsive: true,
maintainAspectRatio: false,
legend : {
position: 'bottom'
}
}
});
{% endfor %}
my api
[{"title":"Verimlilik","value":0.5},{"title":"Likidite","value":0.7},{"title":"Kaldıraç","value":2.7},{"title":"Karlılık","value":1.55},{"title":"Büyüme","value":1.5}]
All data in this api should display in 1 radar chart.
I've been working on a reporting engine, have all the graphs working using Ajax and jquery to update the page. I wanted to add a date range picker and went to Date Range Picker Examples
I am able to get it so it has the icon and the dates populate when the page loads. But when I click on the field it doesn't open to giving the option to select. I took the sample code and was able to get it to work with only it on the page. In the console, I don't see any errors. I'm just getting into jquery etc so I'm perplexed at why this isn't working.
HTML Content
<div class="row justify-content-center">
<div class="col-auto">
<h1>Report for {{ $labels['Company'] }}</h1>
</div>
</div>
<div class="col-4 float-right">
<div id="reportrange" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="fa fa-calendar"></i>
<span></span> <i class="fa fa-caret-down"></i>
</div>
</div>
<div class=" justify-content-around bg-white">
<div class="d-flex justify-content-around bg-white">
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="impressions"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Impressions</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body ">
<div class="test rounded-circle font-weight-bolder col-xs" id="clicks"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Clicks</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpm"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">eCPM</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cost"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">Cost</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="cpc"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CPC</h6>
</div>
</div>
<div class="card text-center border-0">
<div class="card-body">
<div class="test rounded-circle font-weight-bolder col-xs" id="ctr"></div>
<h6 class="card-subtitle mb-2 text-muted pt-2 align-content-center">CTR</h6>
</div>
</div>
</div>
</div>
<div class="card-body">
<canvas id="myAreaChart" width="100%" height="30"></canvas>
</div>
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">Dashboard</div>
<div class="card-body">
</div>
</div>
</div>
</div>
Script section
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" >
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" ></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script type="text/javascript">
$(function () {
var start = moment().subtract(29, 'days');
var end = moment();
function cb(start, end) {
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}
$(".rangeArea").load("reportRange", function() {
$('#reportrange').daterangepicker({
startDate: start,
endDate: end,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
}
}, cb);
})
cb(start, end);
});
( function ( $ ) {
var charts = {
init: function () {
// -- Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#292b2c';
this.ajaxGetPostMonthlyData();
},
ajaxGetPostMonthlyData: function () {
var urlPath = 'http://' + window.location.hostname + ':8000/admin/comp/get-post-chart-data/'+{{$labels['orgid']}};
var request = $.ajax( {
method: 'GET',
url: urlPath
} );
request.done( function ( response ) {
$("#ctr").html(response.totals.ctr);
$("#cpc").html(response.totals.cpc);
$("#cost").html(response.totals.cost);
$("#cpm").html(response.totals.cpm);
$("#clicks").html(response.totals.clicks);
$("#impressions").html(response.totals.impressions);
charts.createCompletedJobsChart( response );
});
},
/**
* Created the Completed Jobs Chart
*/
createCompletedJobsChart: function ( response ) {
console.log(response);
var days = new Array();
var clicks = new Array();
var impressions = new Array();
$.each(response.totalByDate, function (index, value){
days.push(value['days']);
clicks.push(value['clicks']);
impressions.push(value['impressions']);
});
var daysFiltered = days.filter(e => e != null);
var clicksFiltered = clicks.filter(e => e != null);
var impressionsFiltered = impressions.filter(e => e != null);
console.log(impressions);
var data = {
labels: daysFiltered,
datasets: [{
fill: false,
type: 'bar',
label: 'Impressions',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'impressionID',
data: impressionsFiltered,
borderColor: "#993333",
// borderDash: [5, 5],
backgroundColor: "#993333",
pointBackgroundColor: "#993333",
pointBorderColor: "#993333",
pointHoverBackgroundColor: "#993333",
pointHoverBorderColor: "#993333",
order:2
}, {
fill: false,
type: 'line',
pointHoverRadius: 5,
pointHitRadius: 5,
lineTension: 0,
yAxisID: 'clicksID',
label: 'Clicks',
data: clicksFiltered,
borderColor: "#55bae7",
// borderDash: [5, 5],
backgroundColor: "#55bae7",
pointBackgroundColor: "#55bae7",
pointBorderColor: "#55bae7",
pointHoverBackgroundColor: "#55bae7",
pointHoverBorderColor: "#e755ba",
order: 1
}]
};
var option = {
maintainAspectRatio: true,
responsive: true,
bezierCurveTension: 0,
scales: {
xAxes: [{
display: true,
ticks: {
maxTicksLimit: 3,
fontSize: 10
}
}],
yAxes: [{
position: 'left',
'id': 'impressionID',
display: true,
ticks: {
steps: 100,
stepValue: 5,
max: 800,
callback: (label, index, labels) => {
return label ;
}
}
}, {
position: 'right',
'id': 'clicksID',
display: true,
ticks: {
steps: 1,
stepValue: 1,
precision: 0,
max: 5,
callback: (label, index, labels) => {
return label ;
}
}
},
]
}
};
var ctx = document.getElementById("myAreaChart");
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: option
});
}
};
charts.init();
} )( jQuery );
</script>
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:
I'm using waitMe (http://vadimsva.github.io/waitMe/) loading for my angular js application. Here's how I have added it into my project.
<link href="lib/css/waitMe.css" rel="stylesheet"> <script src="lib/js/waitMe.js"></script>
And here the javascript code for the waiting message.
$('#login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
And this is the div which i have used in the javascript message generator.
<div class="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">
But when I press the button, nothing appears, no error message too. What's the reason for this ? Am i missing something here ?
Issue is here $('#login-box-body').waitMe({. You can fix it in below two ways:
Change #login-box-body to .login-box-body in JavaScript
JavaScript:
$('.login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
HTML:
<div class="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">
Change <div class="login-box-body"> to <div id="login-box-body">
JavaScript:
$('#login-box-body').waitMe({
effect: 'bounce',
text: '',
bg: 'rgba(255,255,255,0.7)',
color: '#000',
maxSize: '',
waitTime: -1,
source: 'img.svg',
textPos: 'vertical',
fontSize: '',
onClose: function (el) {
}
});
HTML:
<div id="login-box-body">
<div class="wrapper">
<form class="form-signin">
<h2 class="form-signin-heading">Sign In</h2>
<div style="text-align: center">