Not able to call API data through Angular-controller

Not able to call API data through Angular-controller - javascript

I am calling data from my api using - my setup includes angularjs, so I am trying to call through a controller, but some of the data or events does not respond.
so here's my code:
myApp.controller('someAppController',['$scope', '$http','$state','apiUrl','$q','$timeout','$interval', function ($scope, $http, $state,apiUrl,$q,$timeout,$interval) {
var apiURL = apiUrl+"fetchData";
$scope=this;
$scope.fetchAppData = function(device,os){
$scope.dt = device;
$scope.platform = os;
$scope.startDate = $('#sDate').val();
$scope.endDate = $('#eDate').val();
var startDate = $scope.startDate;
var endDate = $scope.endDate;
var deviceType = $scope.dt;
var oSystem = $scope.platform;
var appKey = localStorage.getItem("appKey");
var i;
var dfrd = $q.defer();
$http.get(apiURL,
{
params:{type: deviceType, platform : oSystem, sd: startDate, ed: endDate, akey: appKey},
}
)
.then(function(response) {
$scope.users = response.data;
var data = response.data;
for(var i = 0; i<data.length; i++){
var tts = data[i].tts;
var ts = data[i].ts;
var nuu = data[i].nuu;
var atsps = data[i].tts / data[i].ts;
var atsbu = data[i].tts / data[i].nuu;
if ( isNaN(atsps)|| atsps == Number.POSITIVE_INFINITY || atsps == Number.NEGATIVE_INFINITY || atsps === null)
{ //console.log("false atsps" +atsps);
data[i].atsps = 0;
}
else{
data[i].atsps = atsps;
}
if ( isNaN(atsbu) || atsbu == Number.POSITIVE_INFINITY || atsbu == Number.NEGATIVE_INFINITY || atsbu === null)
{
//console.log("false atsbu" +atsbu);
data[i].atsbu = 0;
}
else{
data[i].atsbu = atsbu;
}
}
$scope.users = data;
}, function(x) {
dfrd.reject(true);
});
return dfrd.promise;
};
$scope.cb= function(start, end){
$('#dateRangescreenAnalytics span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
startDateCal = start;
endDateCal = end;
$scope.fetchAppData($scope.dt,$scope.platform);
}
$scope.cb(moment().subtract(29, 'days'), moment());
$('#dateRangescreenAnalytics').daterangepicker({
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'This Week': [moment().startOf('week'), moment().endOf('week')],
'Last Week': [moment().subtract(1, 'week').startOf('week'), moment().subtract(1, 'week').endOf('week')],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
locale: {
format: 'YYYY-MM-DD',
applyLabel: "Select"
},
startDate: startDateCal,
endDate: endDateCal
}, $scope.cb);
}]);
<div ng-controller="someAppController as deviceCtrl">
<div class="wrapper">
<div class="page">
<div class="row breadcrumb bg-white border-bottom paddl30">
<div class="col-md-6">
<ul>
<li>Voices</li>
<li> > </li>
<li>Datas</li>
</ul>
</div>
</div>
<div class="row bg-white border-bottom">
<div class="col-md-12">
<div class="photos" autofocus>
<img ng-repeat="user in deviceCtrl.users" class="cover" data-name="{{user.name}}" ng-src="{{user.path}}"/>
</div><!-- End of Photos -->
<div id="photos-info">
<div id="photos-name"></div>
</div>
</div> <!-- End of col md 12 -->
</div><!-- End of row -->
<div class="carousel-info text-right col-md-12">
<p>Use arrow < > keys or mouse scroll to view carousel.</p>
</div>
<div class="row">
<ul class="info-container" ng-repeat="user in users" style="display:none">
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Number of unique users</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.nuu}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>number of crashes</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.noc}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>total time spent</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.tts |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average Time spent by user</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.atsbu |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Total sessions</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.ts}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average time spent per sessions</h3></div>
<div class="col-xs-12"><p>{{ deviceCtrl.user.atsps |secondsToHHmmss}} </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
so basically
*
<div class="row">
<ul class="info-container" ng-repeat="user in users" style="display:none">
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Number of unique users</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.nuu}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>number of crashes</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.noc}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>total time spent</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.tts |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average Time spent by user</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.atsbu |secondsToHHmmss}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Total sessions</h3></div>
<div class="col-xs-12"><p>{{deviceCtrl.user.ts}}</p></div>
</div>
</li>
<li class="col-xs-12 col-sm-4 col-md-2">
<div class="info">
<div class="col-xs-12"><h3>Average time spent per sessions</h3></div>
<div class="col-xs-12"><p>{{ deviceCtrl.user.atsps |secondsToHHmmss}} </p>
</div>
</div>
</li>
</ul>
</div>
*
part of the code does not respond ?! While, it is supposed to show values.
Any help appreciated. Thanks

It seems that you missed to call your method.
At the end of your controller add this:
$scope.fetchAppData();

Related

Combine two filters with javascript

Hi I created an product page with two filter - price range and checkboxes. I am able to run both filter separately, but when I tried to combine both filters, one overlaps the others. I was searching in the internet but I couldn't really find a solution. Is there a way I can filter products with two different filters The codes below are my product page and my javascript codes
product.php
// CHECKBOXES
// CHECKBOXES
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
var $filteredResults = $('.productFilter');
$.each(selectedFilters, function(name, filterValues) {
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
$.each(currentFilterValues, function(_, currentFilterValue) {
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
return matched;
});
});
$('.productFilter').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
// CHECKBOXES
// CHECKBOXES
// PRICE RANGE
// PRICE RANGE
$('#price_range').slider({
range:true,
min:0,
max:1000,
values:[0, 1000],
step:50,
slide: function(e, ui) {
$('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
var min = Math.floor(ui.values[0]);
$('#hidden_minimum_price').html(min + 'm');
var max = Math.floor(ui.values[1]);
$('#hidden_maximum_price').html(max + '.');
$('.productFilter').each(function() {
var minPrice = (min);
var maxPrice = (max);
var value = $(this).data('start-price');
if ((parseInt(maxPrice) >= parseInt(value) && (parseInt(minPrice) <= parseInt(value))) ){
$(this).show();
} else {
$(this).hide();
}
});
}
});
// PRICE RANGE
// PRICE RANGE
<div class="list-group">
<h3>Price</h3>
<input type="hidden" id="hidden_minimum_price" value="0" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<input type="hidden" id="hidden_maximum_price" value="1000" /> <!-- 'value' will not display anything - is used for function at line 191 -->
<p id="price_show">0 - 1000</p>
<div id="price_range"></div>
</div>
<div class="list-group">
<h3>Type</h3>
<div style="height: 200px; overflow-y: auto; overflow-x: hidden;"> <!-- 'overflow-y' will create the vertical scroll effect when elements are outside the box/ 'overflow-x' will hide the horizontal elements outside the box -->
<div class="list-group-item checkbox">
<label><input type="checkbox"class="common_selector brand" value="Headphone_Speaker" id="Headphone_Speaker">Headphone & Speaker</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Chair" id="Chair">Chair</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Cabinet" id="Cabinet">Cabinet</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Table" id="Table">Table</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
<div class="list-group-item checkbox">
<label><input type="checkbox" class="common_selector brand" value="Box" id="Box">Box</label> <!-- 'value' is the value that will be sent to a server when a form is submitted -->
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="600">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-2.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>PAVILION SPEAKER</h3>
<span class="price">$600</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="780">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-3.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>LIGOMANCER</h3>
<span class="price">$780</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Cabinet" data-start-price="800">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-4.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ALATO CABINET</h3>
<span class="price">$800</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Headphone_Speaker" data-start-price="100">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-5.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>EARING WIRELESS</h3>
<span class="price">$100</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Table" data-start-price="960">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-6.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>SCULPTURAL COFFEE TABLE</h3>
<span class="price">$960</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="540">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-7.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>THE WW CHAIR</h3>
<span class="price">$540</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="55">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-8.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HIMITSU MONEY BOX</h3>
<span class="price">$55</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Box" data-start-price="99">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-9.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>ARIANE PRIN</h3>
<span class="price">$99</span>
</div>
</div>
</div>
<div class="productFilter col-md-4 text-center" data-category="Chair" data-start-price="350">
<div class="product">
<div class="product-grid" style="background-image:url(images/product-1.jpg);">
<div class="inner">
<p>
<i class="icon-shopping-cart"></i>
<i class="icon-eye"></i>
</p>
</div>
</div>
<div class="desc">
<h3>HAUTEVILLE CONCRETE ROCKING CHAIR</h3>
<span class="price">$350</span>
</div>
</div>
</div>
</div>
This is how my database/structure:

Auto Increment HTML class/ID to differentiate between divs

I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>

$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.

Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});

This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>

Spring, Thymeleaf and asynchronous data loading

Im right now facing a huge problem because i have a fragment containing a list with very big amount of data. What i do until now is the following:
When the user clicks a button I perform a javascript post like this:
function loadEvaluations() {
$.ajax({
url : "/evaluation/data",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : !1,
data : {
from: rangeFrom,
to: rangeTo
},
success : function(data) {
$("#portal_container").html(data);
},
error : function(data) {
$("#portal_container").html(data);
}
});
}
In the Spring backend i select the data from the database, put it inside the model and return the fragment:
#RequestMapping(HelperUrls.URL_WEB_EVALUATION_DATA)
public String data(Model model, HttpServletRequest request,
#RequestParam(value = Params.PARAM_FROM, required = true) long from,
#RequestParam(value = Params.PARAM_TO, required = true) long to) {
final IDM_USER user = this.idm_user_repository.findByEmail(request.getUserPrincipal().getName());
if (user != null) {
final int unit = user.getUnit();
final Locale locale = LocaleContextHolder.getLocale();
final String unitValue = HelperShortcuts.getUnitForShortcut(this.messageSource, locale, unit);
Set<IDM_BREAD> breads = this.idm_bread_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_FOOD> foods = this.idm_food_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_INSULIN> insulins = this.idm_insulin_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MEASURE> measures = this.idm_measure_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MOOD> moods = this.idm_mood_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_NOTE> notes = this.idm_note_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_SPORT> sports = this.idm_sport_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
List<DatatransferListEntry> entries = new ArrayList<>();
entries.addAll(breads);
entries.addAll(foods);
entries.addAll(insulins);
entries.addAll(measures);
entries.addAll(moods);
entries.addAll(notes);
entries.addAll(sports);
entries = this.initHeaders(entries, locale);
model.addAttribute(ReturnKeys.TIME, Helper.getDateTimePatternEvaluation(this.messageSource, locale, from, to));
model.addAttribute(ReturnKeys.ENTRIES, entries);
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, unitValue);
}
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
This is getting presented in the fragment like the following:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="fragment_evaluations_data" class="margin-top-100 margin-bottom-100">
<div th:each="entry: ${ENTRIES}">
<div class="container page-small page-small-header" th:if="${entry.type == 0}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small page-small-header-sub" th:if="${entry.type == 1}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 2}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.value} + ' ' + ${USER_UNIT_VALUE}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel} + ' '"></span>
<span th:if="${entry.mealtime == 0}" th:text="'- ' + #{label.meal_before}"></span>
<span th:if="${entry.mealtime == 1}" th:text="'- ' + #{label.meal_after}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 3}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.insulin_units}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 4}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.bread}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 5}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.sporttype.sporttype}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:if="${entry.intensity == 0}" th:text="#{label.intensity_easy}"></span>
<span th:if="${entry.intensity == 1}" th:text="#{label.intensity_moderate}"></span>
<span th:if="${entry.intensity == 2}" th:text="#{label.intensity_hard}"></span>
<span th:if="${entry.intensity == 3}" th:text="#{label.intensity_very_hard}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.duration} + ' ' + #{label.minutes}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 6}">
<script>
function loadFoodImage(id) {
$.ajax({
url : "/rest/evaluation/foodiamgeid",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : 1,
data : {
image_id: id
},
success : function(data) {
var image = JSON.parse(data).USER_IMAGE;
if (image != null) {
var selector = "#evaluation_food_image_" + id;
$(selector).attr("src", image);
}
},
error : function(data) {
}
});
}
</script>
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.food}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<img th:id="'evaluation_food_image_' + ${entry.imageId}" src="/img/ic_rolling.gif" class="center-block img-responsiv image-upload-image" th:onload="|loadFoodImage('${entry.imageId}')|" />
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 7}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.note}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.note}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 8}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.mood}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 text-center">
<img th:if="${entry.mood == 1}" class="image-mood" src="/img/ic_mood_very_bad_red.png"></img>
<img th:if="${entry.mood == 2}" class="image-mood" src="/img/ic_mood_bad_orange.png"></img>
<img th:if="${entry.mood == 3}" class="image-mood" src="/img/ic_mood_neutral_yellow.png"></img>
<img th:if="${entry.mood == 4}" class="image-mood" src="/img/ic_mood_good_green.png"></img>
<img th:if="${entry.mood == 5}" class="image-mood" src="/img/ic_mood_very_good_green.png"></img>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
</div>
</div>
</body>
</html>
The Problem
Loading the data this way is a very bad user experience because the loading takes round about 10 seconds and the ui freezes and the user is not able to do something. He stays on the old page, has to wait 10 seconds and after that gets "navigated" to the new fragment.
What i need
I need a thymeleaf/spring solution to load the data asynchronously. So i want the user to see the new page immediatley after he clicked the link and is then getting presented some kind of loading animation while the data is gathered from the server. When the server is done the view should get updated automatically.
Is that possible?

You can have two separate controllers so that when the button is clicked on the other page it just calls the url to display the page:
#RequestMapping(HelperUrls.URL_WEB_EVALUATION)
public String page(Model mode, HttpServletRequest request){
model.addAttribute(ReturnKeys.TIME, new Date());
model.addAttribute(ReturnKeys.ENTRIES, new ArrayList<>());
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, "");
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
#RequestMapping(HelperUrls.URL_WEB_EVALUATION_DATA)
public String data(Model model, HttpServletRequest request,
#RequestParam(value = Params.PARAM_FROM, required = true) long from,
#RequestParam(value = Params.PARAM_TO, required = true) long to) {
final IDM_USER user = this.idm_user_repository.findByEmail(request.getUserPrincipal().getName());
if (user != null) {
final int unit = user.getUnit();
final Locale locale = LocaleContextHolder.getLocale();
final String unitValue = HelperShortcuts.getUnitForShortcut(this.messageSource, locale, unit);
Set<IDM_BREAD> breads = this.idm_bread_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_FOOD> foods = this.idm_food_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_INSULIN> insulins = this.idm_insulin_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MEASURE> measures = this.idm_measure_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_MOOD> moods = this.idm_mood_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_NOTE> notes = this.idm_note_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
Set<IDM_SPORT> sports = this.idm_sport_repository.findByDatesBetweenAndUser(new Date(from), new Date(to), user);
List<DatatransferListEntry> entries = new ArrayList<>();
entries.addAll(breads);
entries.addAll(foods);
entries.addAll(insulins);
entries.addAll(measures);
entries.addAll(moods);
entries.addAll(notes);
entries.addAll(sports);
entries = this.initHeaders(entries, locale);
model.addAttribute(ReturnKeys.TIME, Helper.getDateTimePatternEvaluation(this.messageSource, locale, from, to));
model.addAttribute(ReturnKeys.ENTRIES, entries);
model.addAttribute(ReturnKeys.USER_UNIT_VALUE, unitValue);
}
return Htmls.WEB_FRAGMENT_EVALUATION_DATA_F;
}
then when the page loads you can have an onload function in the body tag or somewhere in the page that calls your javascript function and display an animation image somewhere in the page and hide it when the ajax call returns thus:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<body onload="loadEvaluations()">
<img src="animation-image.jpg" style="display:none" id="animationImage"/>
<div th:fragment="fragment_evaluations_data" class="margin-top-100 margin-bottom-100">
<div th:each="entry: ${ENTRIES}">
<div class="container page-small page-small-header" th:if="${entry.type == 0}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small page-small-header-sub" th:if="${entry.type == 1}">
<div class="row page-row-evaluation">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 2}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.value} + ' ' + ${USER_UNIT_VALUE}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel} + ' '"></span>
<span th:if="${entry.mealtime == 0}" th:text="'- ' + #{label.meal_before}"></span>
<span th:if="${entry.mealtime == 1}" th:text="'- ' + #{label.meal_after}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 3}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.insulin_units}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 4}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.units} + ' ' + #{label.bread}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 5}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="${entry.sporttype.sporttype}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:if="${entry.intensity == 0}" th:text="#{label.intensity_easy}"></span>
<span th:if="${entry.intensity == 1}" th:text="#{label.intensity_moderate}"></span>
<span th:if="${entry.intensity == 2}" th:text="#{label.intensity_hard}"></span>
<span th:if="${entry.intensity == 3}" th:text="#{label.intensity_very_hard}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.duration} + ' ' + #{label.minutes}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 6}">
<script>
function loadFoodImage(id) {
$.ajax({
url : "/rest/evaluation/foodiamgeid",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : 1,
data : {
image_id: id
},
success : function(data) {
var image = JSON.parse(data).USER_IMAGE;
if (image != null) {
var selector = "#evaluation_food_image_" + id;
$(selector).attr("src", image);
}
},
error : function(data) {
}
});
}
</script>
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.food}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<img th:id="'evaluation_food_image_' + ${entry.imageId}" src="/img/ic_rolling.gif" class="center-block img-responsiv image-upload-image" th:onload="|loadFoodImage('${entry.imageId}')|" />
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 7}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.note}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.note}"></span>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
<div class="container page-small" th:if="${entry.type == 8}">
<div class="row page-row-evaluation">
<div class="col-md-12">
<span class="evaluation-font" th:text="#{label.mood}"></span>
</div>
<div class="col-md-12 margin-top-5">
<span th:text="${entry.timestampLabel}"></span>
</div>
<div class="col-md-12 text-center">
<img th:if="${entry.mood == 1}" class="image-mood" src="/img/ic_mood_very_bad_red.png"></img>
<img th:if="${entry.mood == 2}" class="image-mood" src="/img/ic_mood_bad_orange.png"></img>
<img th:if="${entry.mood == 3}" class="image-mood" src="/img/ic_mood_neutral_yellow.png"></img>
<img th:if="${entry.mood == 4}" class="image-mood" src="/img/ic_mood_good_green.png"></img>
<img th:if="${entry.mood == 5}" class="image-mood" src="/img/ic_mood_very_good_green.png"></img>
</div>
</div>
<div class="row page-row-evaluation"></div>
</div>
</div>
</div>
</body>
</html>
then your javascript can do:
function loadEvaluations() {
$('#animationImage').show();
$.ajax({
url : "/evaluation/data",
type : "POST",
headers : createAuthorizationTokenHeader(),
async : !1,
data : {
from: rangeFrom,
to: rangeTo
},
success : function(data) {
$('#animationImage').hide();
$("#portal_container").html(data);
},
error : function(data) {
$('#animationImage').hide();
$("#portal_container").html(data);
}
});
}

piechart using google API throwing "length null " error

I am trying to draw piechart using google API on bootstrap slider. The first four graphs are perfectly fine. But the next four graphs are giving this error:"cannot read property length of null". I googled a lot to solve this issue but couldn't succeed. May I know what the issue is?
Code:
<body onload = onLoading()>
<div class="container">
<div class="col-xs-12">
<div class="page-header">
<h3>Test</h3>
</div>
<div class="carousel slide" id="myCarousel">
<nav>
<ul class="control-box pager">
<li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
<li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
</ul>
</nav>
<!-- /.control-box -->
<div class="carousel-inner">
<div class="item active">
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i1">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i2">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i3">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i4">
</div>
</div>
</div>
</div><!-- /Slide1 -->
<!-- Slide2 -->
<div class="item">
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i5">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i6">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i7">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="fff">
<div class="thumbnail" id="i8">
</div>
</div>
</div>
</div><!-- /Slide2 -->
</div><!-- /Carousel inner -->
</div><!-- /#myCarousel -->
</div><!-- /.col-xs-12 -->
</div><!-- /.container -->
<script type="text/javascript">
// Carousel Auto-Cycle
$(document).ready(function() {
$('.carousel').carousel({
interval: 6000
})
});
google.load("visualization", "1", {packages:["corechart"]});
function onLoading()
{
for(i=0;i<8;i++)
{
google.setOnLoadCallback(drawChart(i));
}
}
function drawChart(i)
{
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var tmp = "i";
var ele_id = tmp.concat(i+1);
alert(ele_id);
var chart = new google.visualization.PieChart(document.getElementById(ele_id));
chart.draw(data, options);
}
</script>
</body>

Highcharts and HighMaps are overLapping

I am using highChart and highMap with div's created as slides.We are using jquery cycle 2 for the slide effect.
After certain time, the charts are overlapping in Mozilla. But in Chrome hidden slides chart disappears,but legend are present.
Image Link is given below.
https://www.facebook.com/photo.php?fbid=709625395825970&set=a.709625732492603.1073741832.100003355489549&type=1&theater
Sample Code:
jsp code:
<div id="cycle-slideshow" style="width: 100%;">
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for map
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
<div class="container-fluid animated" id="container_<%=i%>" style="opacity: 0.01;width: 100%;">
<div class="row">
<div class="container-fluid" id="container">
<div class="row border-bottom">
<nav class="navbar navbar-static-top white-bg main_header" role="navigation" style="margin-bottom: 0">
<div class="header" id="header">
<div class="col-lg-12" style="max-height:25px">
<div class="col-lg-6">
<h2 >
<s:property value="name" escape="false"/>
</h2>
</div>
<div class="col-lg-6">
<h4 class="pull-right push-bottom" style="margin-top:25px;">
<span class="timeData" style="text-align:center;"></span>
</h4>
</div>
</div>
</div>
</nav>
</div>
<!-------------------header end------------------------>
<!-------------------------graph and stream area---------------------------->
<!----------------------left panel start-------------------->
<div class="wrapper wrapper-content" style="padding: 6px 5px 20px !important;">
<div class="row">
<div class="col-lg-9" id="graph_area">
<div class="row_custom">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins" style="margin-bottom:14px;">
<div class="ibox-title graph_header">
<h5><s:property value="settings[1].elementName" escape="false"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;" id="<s:property value="settings[1].elementId"/>_<s:property value="settings[1].id"/>_<s:property value="id"/>" >
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" >
<div class="col-lg-6">
<div class="row" style="margin-left:1px!important;">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[3].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:4px;">
<div class="row" >
<div class="col-lg-12" id="<s:property value="settings[3].elementId"/>_<s:property value="settings[3].id"/>_<s:property value="id"/>" style="display:inline-block;">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[4].elementName"/></h5>
</div>
<div class="ibox-content" style="padding-bottom:14px;">
<div class="row">
<div class="col-lg-12" style="padding:4px;display:inline-block;" id="<s:property value="settings[4].elementId"/>_<s:property value="settings[4].id"/>_<s:property value="id"/>" >
//area for piechart
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------left panel End-------------------->
<!----------------------right panel start-------------------->
<div class="col-lg-3" id="data_stream_div" >
<div class="row">
<div class="ibox float-e-margins">
<div class="ibox-title graph_header">
<h5><s:property value="settings[2].elementName"/></h5>
</div>
<div class="ibox-content" id="temp_1_stream" style="padding-left:1px!important;">
<div>
<div class="feed-activity-list" style="padding:4px;" id="<s:property value="settings[2].elementId"/>_<s:property value="settings[2].id"/>_<s:property value="id"/>" >
//area for table
</div>
</div>
</div>
</div>
</div>
</div>
<!----------------------right panel End---------------------->
</div>
</div>
<!---------------------graph area------------------>
</div>
</div>
</div>
</div>
code for slider:
function getslider(){
$('#cycle-slideshow').cycle({
timeout: 90000,
slides: '> div',
fx:'fade'
});
$( '#cycle-slideshow' ).on( 'cycle-after', function( event, opts ) {
console.log("lastRunTime "+lastRunTime);
console.log("timedifference "+((lastRunTime-event.timeStamp)/1000));
lastRunTime=event.timeStamp;
});
}
code for piechart:
function getShareOfVoice() {
$.ajax({
type:"POST",
dataType:"json",
url:'<s:url value="XXXXXX',
data:{sampledata : sampledate},
cache: false,
async:"false",
success:function(data) {
console.log("in success for share of voice");
var vals = JSON.parse(JSON.stringify(data));
if(vals.data.length>0){
var dataArray = vals.data;
var overallseries = [];
overallShareOfVoiceOptions.chart.renderTo = divid;
for ( var pos = 0; pos < dataArray.length; pos++) {
var d = dataArray[pos];
var dd = {};
var legend_icon = " ";
if (d.pic != null
&& typeof d.pic !== "undefined"
&& d.pic.length > 0) {
legend_icon = '<img style="width: 45px; height: 30px" src="'+d.pic+'" >';
} else {
legend_icon = d.name;
}
dd.color = d.cssStyle;
dd.y = d.count;
dd.name = legend_icon;
overallseries.push(dd);
}
overallShareOfVoiceOptions.series[0].data = overallseries;
if (overallseries.length > 0) {
var shareOfVoiceOverallGraph = new Highcharts.Chart(
overallShareOfVoiceOptions);
}
if (draw !== true) {
progressbar(divid);
}
setTimeout(function() {
getShareOfVoice();
}, 5 * 60 * 1000);
}
},error:function(data){
setTimeout(function() {
getShareOfVoice();
}, 2 * 60 * 1000);
}
});
}
code for highMap:
function getRegionChart() {
$.ajax({
type:"POST",
url:'XXXXXXXXXXXXXXXX',
dataType:'json',
data : {sampledata : sampledata},
success : function(data){
var regions = JSON.parse(JSON.stringify(data));
if(regions.length > 0){
$('#' + divid).highcharts('Map',{
title : {
text : null
},
subtitle : {
text : null
},
mapNavigation : {
enabled : false,
buttonOptions : {
verticalAlign : 'bottom'
}
},
legend : {
align : 'left',
layout : 'vertical',
verticalAlign : 'middle',
y : 10,
floating : true,
borderWidth : 0,
backgroundColor : 'white',
},
colorAxis : {
min : 0,
minColor : '#cccc00',
maxColor : '#666600'
},
navigation : {
menuItemStyle : {
fontSize : '10px'
},
buttonOptions : {
enabled : false
}
},
credits : {
enabled : false
},
series : [ {
data : regions,
mapData : Highcharts.maps['countries/in/custom/in-all-disputed'],
joinBy : 'hc-key',
name : 'State',
states : {
hover : {
color : '#BADA55'
}
},
dataLabels : {
enabled : true,
formatter : function() {
if(!(this.point.options["show"]))
return;
return this.point.value+ "%";
}
}
} ]
});
setTimeout(function() {
getRegionChart();
}, 5*60 *1000);
}
},error : function(data) {
setTimeout(function() {
getRegionChart();
},2*60 * 1000);
}
});
}

Develop Reference

JavaScript is the programming language of the Web.

Not able to call API data through Angular-controller - javascript

It seems that you missed to call your method. At the end of your controller add this: $scope.fetchAppData();

Related

Combine two filters with javascript

Auto Increment HTML class/ID to differentiate between divs

Spring, Thymeleaf and asynchronous data loading

piechart using google API throwing "length null " error

Highcharts and HighMaps are overLapping

Categories

Resources