I want to create Multichart graph with Line and MultiBar Chart by using Angularjs NvD3. I have to create Line graph but unable to showing Multibar chart, i think i make some mistake. Here is plunker
var app = angular.module('plunker', ['nvd3']);
app.controller('MainCtrl', function($scope) {
$scope.options = {
chart: {
type: 'multiChart',
height: 450,
margin : {
top: 30,
right: 60,
bottom: 50,
left: 70
},
color: d3.scale.category10().range(),
//useInteractiveGuideline: true,
duration: 500,
xAxis: {
tickFormat: function(d){
return d3.format(',f')(d);
}
},
yAxis1: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
},
yAxis2: {
tickFormat: function(d){
return d3.format(',.1f')(d);
}
}
}
};
/***********Line*********/
$scope.data = [];
$scope.data[0]={};
$scope.data[0].key='Stream';
$scope.data[0].yAxis=1;
$scope.data[0].type='line';
$scope.data[0].values=[];
$scope.data[0].values[0]={};
$scope.data[0].values[0].x=0;
$scope.data[0].values[0].y=4;
$scope.data[0].values[1]={};
$scope.data[0].values[1].x=1;
$scope.data[0].values[1].y=8;
$scope.data[1]={};
$scope.data[1].key='Stream2';
$scope.data[1].yAxis=1;
$scope.data[1].type='line';
$scope.data[1].values=[];
$scope.data[1].values[0]={};
$scope.data[1].values[0].x=0;
$scope.data[1].values[0].y=4;
$scope.data[1].values[1]={};
$scope.data[1].values[1].x=1;
$scope.data[1].values[1].y=8;
/*******************************/
/********MultiBar Chart**********/
$scope.data[2]={};
$scope.data[2].key='Stream3';
$scope.data[2].yAxis=2;
$scope.data[2].type='multiBarChart';
$scope.data[2].values=[];
$scope.data[2].values[0]={};
$scope.data[2].values[0].key="Stream0";
$scope.data[2].values[0].values=[];
$scope.data[2].values[0].values[0]={};
$scope.data[2].values[0].values[0].key="Stream0";
$scope.data[2].values[0].values[0].series=0;
$scope.data[2].values[0].values[0].x=0;
$scope.data[2].values[0].values[0].y=5;
$scope.data[2].values[1]={};
$scope.data[2].values[1].key="Stream1";
$scope.data[2].values[1].values=[];
$scope.data[2].values[1].values[0]={};
$scope.data[2].values[1].values[0].key="Stream1";
$scope.data[2].values[1].values[0].series=1;
$scope.data[2].values[1].values[0].x=0;
$scope.data[2].values[1].values[0].y=4;
/*********************************/
console.log($scope.data);
});
please find below plunkr with
'multichart with configurable tooltip, conditional points highlight,area chart, bar chart and line chart
plunk in comments
Related
I am new in AngularJS.
I download AngularJS theme from URL here
I have to get Data from GET Service.
GET Service URL is given below
http://localhost:8080/api/getHostStatus
that is running correctly.
So I have to use this URL and get data from that service for this I just change the code in my VisitorsController.js
VisitorsController.js file code is given below
(function () {
angular
.module('app')
.controller('VisitorsController', [
VisitorsController
]);
function VisitorsController() {
var vm = this;
// TODO: move data to the service
var servicesUrl = app.serviceCallUrl+'getHostStatus';
console.log(servicesUrl);
var myService = angular.module("app").factory("myService", ['$http', function($http) {
return {
getResponders: (function(response) {
return $http.get(servicesUrl).then(function(response) {
console.log(response.data);
return response.data;
});
})()
};
return myService;
}]);
vm.visitorsChartData = [ {key: 'UP', y: 5264}, { key: 'Critical', y: 3872},{key: 'Warning', y: 1000} ];
vm.chartOptions = {
chart: {
type: 'pieChart',
height: 210,
donut: true,
x: function (d) { return d.key; },
y: function (d) { return d.y; },
valueFormat: (d3.format(".0f")),
color: ['rgb(0, 150, 136)', '#E75753','#fbbc05'],
showLabels: false,
showLegend: false,
title: 'Over 9K',
margin: { top: -10 }
}
};
}
})();
When I run this it is showing me correct servicesUrl on console.
But response.data not showing on console.
So please guide me how can I resolve it.
I have a route/view that is displaying a blank page. I am pretty sure it was working the way I have it right now a few days ago which leads me to think it is a problem with my Google Maps API key, but there are no errors or warnings so I think it has to do with my routing setup. But I have another view set up exactly the same way and that one does work...
Broken view: http://alainwebdesign.ca/pl2/#/49.2/-122.66
Working view: http://alainwebdesign.ca/pl2/#/getLocation
Controller (I commented out the.config for Google Map API because I have a script reference in my view searchRadius.html) :
(function (window, ng) {
ng.module('app', ['uiGmapgoogle-maps', 'ui.router'])
.config(function ($stateProvider) { //had: , $stateChangeError included in the function parameters, but that caused error
$stateProvider.state('searchRadius', {
url: '/:lat/:lon',
templateUrl: 'searchRadius.html', //changed from index to searchRadius.html
controller: 'MapsCtrl',
});
})
////ALREADY HAVE GOOGLE MAPS KEY ON searchRadius.html
.config(['uiGmapGoogleMapApiProvider', function (GoogleMapApi) {
GoogleMapApi.configure({
key: 'AIzaSyC_XEbbw3sNm4XlLAgqMJTggeHLDUdV-pY',
v: '3',
libraries: 'weather,geometry,visualization'
});
} ])
.controller('MapsCtrl', ['$scope', "uiGmapLogger", "uiGmapGoogleMapApi", "$interval", "$state", "$stateParams",
function ($scope, $log, GoogleMapApi, $interval, $state, $stateParams) {
$log.currentLevel = $log.LEVELS.debug;
var center = { latitude: parseFloat($stateParams.lat), longitude: parseFloat($stateParams.lon) };
alert(JSON.stringify(center));
Object.freeze(center); //caused TypeError: Cannot assign to read only property ('latitude') ...
console.log($stateParams);
$scope.map = {
center: center,
pan: false,
zoom: 16,
refresh: false,
events: {},
bounds: {}
};
$scope.map.circle = {
id: 1,
center: center,
radius: 500, //(current time - date lost)*km/hour
stroke: {
color: '#08B21F',
weight: 2,
opacity: 1
},
fill: {
color: '#08B21F',
opacity: 0.5
},
geodesic: false, // optional: defaults to false
draggable: false, // optional: defaults to false
clickable: true, // optional: defaults to true
editable: false, // optional: defaults to false
visible: true, // optional: defaults to true
events: {
dblclick: function () {
$log.debug("circle dblclick");
},
radius_changed: function (gObject) {
var radius = gObject.getRadius();
$log.debug("circle radius radius_changed " + radius);
}
}
}
//Increase Radius:
$interval(function(){
$scope.map.circle.radius += 30; //dynamic var
}, 1000); //end of interval function
} ]); //end of controller
})(window, angular);
searchRadius.html:
<div style="height: 100%"> <!--took out: ng-if="map.center !== undefined"-->
<ui-gmap-google-map
center='map.center'
zoom='map.zoom'
draggable='map.draggable'
dragging='map.dragging'
refresh='map.refresh'
options='map.options'
events='map.events'
pan='map.pan'>
<ui-gmap-circle
center='map.circle.center'
radius='map.circle.radius'
fill='map.circle.fill'
stroke='map.circle.stroke'
clickable='map.circle.clickable'
draggable='map.circle.draggable'
editable='map.circle.editable'
visible='map.circle.visible'
events='map.circle.events'>
</ui-gmap-circle>
</ui-gmap-google-map>
<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyC_XEbbw3sNm4XlLAgqMJTggeHLDUdV-pY'></script>
</div>
Combine the 2 files into 1 file and initialize the $stateProvider in a single line.
How do I access with Ionic/angularjs on the image gallery? I just want to open the image gallery per button click. How is that possible?
You can use the cordova camera plugin
cordova plugin add org.apache.cordova.camera
Plugin Reference:
https://github.com/apache/cordova-plugin-camera
Sample code
$scope.getPhoto = function() {
var options = {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI,
sourceType: Camera.PictureSourceType.SAVEDPHOTOALBUM,
mediaType: Camera.MediaType.ALLMEDIA,
saveToPhotoAlbum: true
};
$cordovaCamera.getPicture(options).then(function(imageData) {
console.log("img URI= " + imageData);
//Here you will be getting image data
}, function(err) {
alert("Failed because: " + err);
console.log('Failed because: ' + err);
});
};
You need to just set sourceType option to Camera.PictureSourceType.SAVEDPHOTOALBUM
You can get cordova plugin for ImagePicker by using the following link:
http://ngcordova.com/docs/plugins/imagePicker/
Example:
$scope.OpenGallery = function() {
var options = {
maximumImagesCount: 1,
width: 350,
height: 500,
quality: 50
};
$cordovaImagePicker.getPictures(options).then(function (results) {
console.log(results);
},function(error) {
console.log(error);
});
}
Guys at Ionic made this example: https://github.com/driftyco/ionic-example-cordova-camera/blob/master/plugins/org.apache.cordova.camera/doc/index.md
As a second option, you can try with the imagePicker plugin.
Example:
module.controller('ThisCtrl', function($scope, $cordovaImagePicker) {
var options = {
maximumImagesCount: 10,
width: 800,
height: 800,
quality: 80
};
$cordovaImagePicker.getPictures(options)
.then(function (results) {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
}, function(error) {
// error getting photos
});
});
I want to use ui-calendar with Urigo's angular-meteor. I code like this, it doesn't work but I don't know why and how to fix it.
The collection is not empty but event do not appear in calendar. Thank you for attention.
https://github.com/wuxianliang/ui-calendar-angular-meteor
CalEvents = new Mongo.Collection("calevents");
CalEvents.allow({
insert: function () {
return true;
},
update: function () {
return true;
},
remove: function () {
return true;
}
});
if (Meteor.isClient) {
angular.module('Calendardemo', ['angular-meteor', 'ui.calendar','ui.router', 'angularMoment','mgcrea.ngStrap','ngAnimate']);
Meteor.startup(function() {
angular.bootstrap(document, ['Calendardemo']);
});
angular.module('Calendardemo').controller('MyCalendar', [
'$scope',
'$collection',
function($scope, $collection) {
$collection(CalEvents).bind($scope,'calevents',true,true);
$scope.addCalEvent=function(date, jsEvent, view){
var startDateTime = moment(date).format('YYYY-MM-DDTHH:mm:ss.SSSZ');
var endDateTime = moment(date).add(1, 'h').format('YYYY-MM-DDTHH:mm:ss.SSSZ');
$scope.calevents.push({
title: 'New Event',
start: startDateTime,
end: endDateTime,
completed: null,
doing: null
})
};
$scope.eventRender = function(event,element){};
/* config object */
$scope.uiConfig = {
calendar:{
height: 450,
defaultView: 'month',
lang: 'en',
eventColor: 'grey',
header:{
left: 'prev next today',
center: 'title',
right: 'month agendaWeek'
},
dayClick: $scope.addCalEvent,
eventRender: $scope.eventRender,
editable: true,
selectable: true,
allDayDefault: false
}
};
$scope.eventSources = [$scope.calevents];
}]);}
if (Meteor.isServer) {
Meteor.publish('calevents', function(){
return CalEvents.find();
})
}
You should use this package:
https://github.com/netanelgilad/meteor-angular-ui-calendar
This package wraps angular-ui-calendar for Meteor.
It might not updated so you can open an issue inside
EDIT
You might also want to check out this package that looks more updated:
https://atmospherejs.com/planettraining/angular-ui-calendar
As I am relatively new to nvD3, I am confused with the different nvD3 code notations I am coming across, can any one help me to understand it better.
The nvD3 code samples are as follows:
Aprroach#1:
html :
<div id="chart">
<svg></svg>
</div>
script :
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
;
chart.xAxis
.axisLabel('Time (ms)')
.tickFormat(d3.format(',r'))
;
chart.yAxis
.axisLabel('Voltage (v)')
.tickFormat(d3.format('.02f'))
;
var data=sinandcos();
d3.select('#chart svg')
.datum(sinandcos())
.transition().duration(500)
.call(chart)
.selectAll('.nv-y text')
.attr('x',-15)
;
return chart;
});
Approach #2 :
html :
<body ng-controller="MainCtrl">
<nvd3 options="options" data="data"></nvd3>
</body>
script :
var app = angular.module('myApp', ['nvd3']);
app.controller('MainCtrl', function($scope, $compile) {
$scope.options = {
chart: {
type: 'lineChart',
height: 450,
margin : {
"top": 20,
"right": 20,
"bottom": 40,
"left": 55
},
x: function(d){ return d[0]; },
y: function(d){ return d[1]; },
useVoronoi: false,
clipEdge: true,
transitionDuration: 2000,
useInteractiveGuideline: true,
xAxis: {
tickFormat: function(d) {
return d3.time.format('%x')(new Date(d))
},
showMaxMin: false
},
yAxis: {
tickFormat: function(d){
return d3.format('.02f')(d);
}
}
}
};
$scope.data = [....]
});
In Approach #1, I don't see any angular js controllers concept and in Approach #2, I don't see chart drawing calls like the below to draw the chart
d3.select('#chart svg')
.datum(sinandcos())
.transition().duration(500)
.call(chart)
.selectAll('.nv-y text')
.attr('x',-15)
In Approach#2, if I want to add 4 charts in a single page, as below, how can I do it? Can any one point some reference code for this?
chart1# chart2#
Chart3# chart4#
I believe you are confusing the nvD3 library (#1) with a library such as Angular-nvD3 built on top of the nvD3 library (#2).
To add 4 charts to a page, you could create 4 containers in the arrangement you want and then repeat the nv.addGraph for each of them to add the graphs.
The Approach #1 would look like:
html :
<div id="chart1">
<svg></svg>
</div>
<div id="chart2">
<svg></svg>
</div>
<div id="chart3">
<svg></svg>
</div>
<div id="chart4">
<svg></svg>
</div>
script :
nv.addGraph(function() {
...
d3.select('#chart1 svg')
...
}
nv.addGraph(function() {
...
d3.select('#chart2 svg')
...
}
nv.addGraph(function() {
...
d3.select('#chart3 svg')
...
}
nv.addGraph(function() {
...
d3.select('#chart4 svg')
...
}