I am currently facing a problem. I have a HTML page which contains multiple div to load highcharts. Same page have all the jquery script.
I am using angularJS to route the page. Index page, Chart1Page and Chart2Page. When i am loading chart1page 1st time all charts load but if i come back from chart2page to chart1page some charts does not load. Below code is one of the chart which not load. If i replace with some other chart like pie the result is same. Do i need to check the sequence?
<script>
function freecapacity() {
$(function () {
// Set up the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'freecapacity',
type: 'column',
margin: 75
},
title: {
text: 'Free Capacity'
},
subtitle: {
text: ''
},
plotOptions: {
column: {
depth: 25
}
},
xAxis: {
categories: ['A', 'B', 'C', 'S', 'D', 'DD', 'PD']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6]
}]
});
});
}
freecapacity();
</script>
<html>
<div class="row">
<h5 class="form-control" style="background-color:#D2D7D3"><label>Hub and GSA Information</label></h5>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
<div class="form-control" style="height: 350px;" id="freecapacity"></div>
</div>
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-6 small">
<div class="form-control" style="height: 350px;" id="gsanomination"></div>
</div>
</div>
</html
I recommend you use the Angularjs directive for Highcharts: https://github.com/pablojim/highcharts-ng
Than set up the Highchart object in the view controller instead of using script tags in the html file.
Related
I want to make an angular attribute directive for Google line charts rather than manually load the chart in controllers because the first time when the page loads the chart draws easily and navigate to another page and controller and return back previous page so its not draw chart. Here I am drawing the chart like below but I want to make an angular directive because its not working with page navigation
<ion-view title="Select Medicines" catch-view="false">
<ion-content>
<div class="list med-select inven-l">
<div class="list" style="background-color:52487B;">
<div class="row item item-icon-left item-icon-right item-stable">
<div curve_chart style="width:100%; height: 250px" > </div>
</div>
<div class="row item item-icon-left item-icon-right item-stable" style="margin-bottom: 5px;" ng-click="gotoDetail(weekSales.OrderNo)" ng-repeat="weekSales in WeeklyData.orders | orderBy:'CreatedOn'">
<div class="col col-70">
<h2>{{weekSales.Customer.FName}} {{weekSales.Customer.LName}} </h2>
<p>Order No: MY-{{weekSales.OrderNo}} - {{weekSales.CreatedOn| date : 'dd'}}/{{weekSales.CreatedOn| date : 'MM'}}/{{weekSales.CreatedOn| date : 'yyyy'}}</p>
</div>
<div class="col col-20">
<span style="color:#d5d1e7">₹ {{weekSales.Amount}}</span>
</div>
<div class="col col-10">
<i class="icon ion-chevron-right"></i>
</div>
</div>
</div>
</div>
</ion-content>
angular.module('controllers.Chemist_sales_monthlyCtrl', [])
.controller('Chemist_sales_monthlyCtrl', function($scope, $state, $ionicHistory,serverRepo,$ionicLoading,profileInfo) {
$scope.data = {};
$scope.gotoDetail = function(orderNo){
//alert(orderNo)
profileInfo.orderId=orderNo
$state.go('pannel.chem_order_history_Detail');
}
$scope.myGoBack= function(){
$ionicHistory.goBack()
}
$scope.$on('$ionicView.enter', function() {
$ionicLoading.show({
template: '<ion-spinner icon="spiral"></ion-spinner>',
noBackdrop:false
});
serverRepo.salesMonthly().then(function(objS){
console.log(objS)
$scope.monthlyData=objS.data;
angular.forEach(objS.data.orders, function(value, key) {
objS.data.orders[key].CreatedOn=new Date(objS.data.orders[key].CreatedOn)
})
var options = {
legend: { position: 'bottom' },
curveType: 'function',
titlePosition: 'in',
axisTitlesPosition: 'in',
hAxis: {
textPosition: 'in',
minValue: 0,
textStyle:{color: "#fff"}
},
vAxis: {
minValue: 0,
maxValue: 13,
textPosition: 'in',
textStyle:{color: "#fff"},
minorGridlines:{color: "#ccc"}
},
lineWidth: 6,
fontSize:11,
chartArea:{left:0,top:0,width: '100%', height: '100%',backgroundColor: '#43396D'},
colors: ['#32BD76'],
animation:{
duration: 1500,
easing: 'out',
startup: true
}
};
google.charts.setOnLoadCallback( function () {
// Create and populate the data table.
console.log(objS.data.labels)
console.log(objS.data.datasets.data)
var data = new google.visualization.DataTable();
data.addColumn('string', 'labels');
data.addColumn('number', 'data');
for(i = 0; i < objS.data.labels.length; i++)
data.addRow([objS.data.labels[i], objS.data.datasets.data[i]]);
// Create and draw the visualization.
var chart = new google.visualization.LineChart(document.getElementById('curve_chartmonthly')).
chart.draw(data, options);
});
$ionicLoading.hide();
},function(objE){
// alert(JSON.stringify(objE));
console.log("Error:-\n"+JSON.stringify(objE));
$ionicLoading.hide();
});
});
})
Actually,I'm able to load 3 images(open,new&save icons) into a div using angularjs.Now,I'm trying to place the related text of those images into the same div just below those 3 images.
Like,"open" text should be written just below "open" image.Simialrly,for the remaining images too.How can I achieve this?
Can anyone please help me out regarding this issue ...
My js code:
angular.module('Sample', []).controller('Home', function($scope) {
$scope.imageSources = [];
$scope.imageSources.push('images/open.png');
$scope.imageSources.push('images/new.jpg');
$scope.imageSources.push('images/save.png');
});
My html code:
<div style="margin-top: 15px;">
<img width=40 height=50 style="margin-left: 12px;"
ng-repeat="imageSource in imageSources track by $index"
ng-src="{{imageSource}}"> </img>
</div>
This will work but is not the right way to do it.
I leave the styling up to you.
View:
<div style="margin-top: 15px;" ng-repeat="imageSource in imageSources">
<img width=40 height=50 style="margin-left: 12px;" ng-src="{{imageSource}}" />
<br>
<span style="margin-left: 12px;">{{getFilenameFromPath(imageSource)}}</span>
</div>
Controller:
$scope.imageSources = [];
$scope.imageSources.push('images/open.png');
$scope.imageSources.push('images/new.jpg');
$scope.imageSources.push('images/save.png');
$scope.getFilenameFromPath = function(filename) {
return filename.split("/")[1].split(".")[0];
}
Here is a jsfiddle.
The right way as it has been mentioned in the contents, is to have a collection of object and each objects should have a name and a src property. In your case you should do:
$scope.imageSources = [];
$scope.imageSources.push({
name:"open",
src: "images/open.png"
});
$scope.imageSources.push({
name:"new",
src: "images/new.png"
});
$scope.imageSources.push({
name:"save",
src: "images/save.png"
});
So you will end up with this collection:
[
{
"name": "open",
"src": "images/open.png"
},
{
"name": "new",
"src": "images/new.png"
},
{
"name": "save",
"src": "images/save.png"
}
]
Here is an jsfiddle.
I have multiple tabs and each is having angular ui-grid inside it. Each grid should display different data. But i'm facing problem like in one tab data is coming in the grid on page load but in another tab ui-grid itself is not loading. Not getting what is the problem. Please help.
Below is the sample of the code:
<uib-tabset class="nav">
<uib-tab heading="User">
<div ng-include="'./public/partials/tabs/user.html'">
</div>
</uib-tab>
<uib-tab heading="Notes">
<div ng-include="'./public/partials/tabs/notifications.html'">
</div>
</uib-tab>
<uib-tab heading="Assets">
<div ng-include="'./public/partials/tabs/assetsList.html'"></div>
</uib-tab>
<uib-tab heading="Audit Logs">
<div ng-include="'./public/partials/tabs/audit.html'" >
</div>
</uib-tab>
</uib-tabset>
Html for tabs:
<div class="container-fluid">
<form name="assetsForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="assetsOptions" data-ui-grid-pagination></div>
</div>
</form>
</div>
<div class="container-fluid">
<form name="userForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="userOptions" data-ui-grid-pagination></div>
</div>
</form>
</div>
Controller part:
$scope.data = [
{ name: 'Alex', car: 'Toyota' },
{ name: 'Sam', car: 'Lexus' },
{ name: 'Joe', car: 'Dodge' },
{ name: 'Bob', car: 'Buick' },
{ name: 'Cindy', car: 'Ford' },
];
$scope.userOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
};
$scope.assetsData = [
{ table: 'Brian', class: 'Audi' },
{ table: 'Malcom', class: 'Mercedes Benz' },
{ table: 'Dave', class: 'Ford' },
{ table: 'Stacey', class: 'Audi' },
{ table: 'Amy', class: 'Acura' },
{ table: 'Scott', class: 'Toyota' },
{ table: 'Ryan', class: 'BMW' },
];
$scope.assetsOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
columnDefs: [
{name: 'table'},
{name: 'class'}
]
};
If one grid is loading on page load and others are not, it basically means A) other tabs are not initialized on page load B) grid initializing code should be in tab switch instead of page load C) file or data is not available at specified location.
I hope this will help.
My code is as follows (the fiddle):
<div ng-controller="myCtrl">
<div ng-model="currentTab" ng-init="currentTab='Tab1'"/>
<div ng-init="popovers = [
{ name: 'Popover1',
displayName: 'Pop over with two tabs',
tabs: [
{ name: 'Tab1',
displayName: 'First tab',
description: ['First tab description']
},
{ name: 'Tab2',
displayName: 'Second tab',
description: ['Second tab description']
}
]
}
]"/>
<b>Tabs in popover</b>
<div
class="popover"
ng-repeat="p in popovers"
>
Popover name: {{p.displayName}}
<div ng-repeat="t in p.tabs"
class="tab"
ng-class="currentTab==t.name?'selected':''"
ng-click="currentTab=t.name"
>
{{t.name}}
</div>
<div ng-repeat="t in p.tabs"
class="tabContent"
ng-class="currentTab==t.name?'selected':''"
>
<p>{{t.displayName}}</p>
</div>
</div>
</div>
There is something I don't get which make the code not working perfectly, as the selected class name is never removed as one click on the tab.
When you want to modify a variable of your parent scope from within a ng-repeat you need to use $parent.currentTab.
Updated Fiddle
i am using a plupload plugin inside an accordion. I first create the the plupload and then I create the accordion.
The plupload creates well... but the accordion height is not resized so that the whole plupload is seen sinside it. The height is about 50 px instead and the vertical scroll appears.
This is the JavaScript code:
function createUploader()
{
$("#uploader").pluploadQueue("destroy");
$("#uploader").pluploadQueue({
// General settings
runtimes: 'gears,flash,silverlight,browserplus,html5',
url: '/upload.php',
max_file_size: '10mb',
chunk_size: '1mb',
unique_names: true,
// Resize images on clientside if we can
resize: {width: 320, height: 240, quality: 90},
// Specify what files to browse for
filters: [
{title: "Archivos de imagen", extensions: "jpg,gif,png"},
{title: "Archivos comprimidos", extensions: "zip,rar"},
{title: "Documentos", extensions: "doc,docx,xls,xlsx,ppt,pdf,pptx,csv,txt"}
],
// Flash settings
flash_swf_url: '/js/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '/js/plupload/plupload.silverlight.xap'
});
}
function creaDialogoAdjuntos()
{
createUploader();
$('#acordeon_adjuntos').accordion();
}
$(function() {
creaDialogoAdjuntos();
}
And this is the HTML:
<div id="acordeon_adjuntos">
<h3>Nuevo Adjunto</h3>
<div>
<form id="attach" action="{{ path('_renombra_archivos') }}">
<div id="uploader">
<p>Su navegador no tiene soporte Flash, Silverlight, Gears, BrowserPlus o HTML5.</p>
</div>
<input type="hidden" id="adjComId" name="compromiso" />
</form>
</div>
<h4>Adjuntos</h4>
<div>
<table id="adjuntos_compromisos"><tr><td></td></tr></table>
<div id="adjuntos_paginacion"></div>
</div>
</div>
Any help to solve this will be appreciated.
Thanks
Jaime