I am using this directive for chart https://github.com/GraFiddle/angular-chart.
controller code is here
.controller('myangularChart', function ($scope, $rootScope, $log, $state, chartService) {
(function initController() {
chartService.getallstatus({})
.then(function (response) {$scope.barChartData = response;
$scope.options = {
data:$scope.barChartData,
dimensions: {
y: {
axis: 'y',
type: 'bar',
label: true,
color: 'green',
name: 'No. of students'
},
x: {
axis: 'x',
label: true,
name: 'Status'
}
},
chart:{
axis: {
y: {
max:50,
tick:{
format: d3.format('.0f')
},
label:{text:'No of students',
position: 'outer-middle'}
}
}
}
};
})
$scope.instance = null;
})();
})
bar chart is not displaying in chrome browser but in Firefox browser it is displaying .chrome is displaying bar chart shown in image.. In Firefox browser it is working fine but not in chrome help me with this problem.
Related
Highchart is not rendering data from the ajax call. If i used outside $http function with static data the highchart is rendering. The high chart is not triggering.
html:
<hc-pie-chart title="Browser usage" data="pieData">Placeholder for pie chart</hc-pie-chart>
controller:
$scope.homeallpcn = function(){
var url = "homechartall";
var data = "";
$http.get(url).then( function(response) {
$scope.pieData = [{
name: "Cancelled",
y: response.c
}, {
name: "Closed",
y: response.cl,
sliced: true,
selected: true
}, {
name: "Open",
y: response.o
}, {
name: "Rejected",
y: response.r
}]
});
}
$scope.homeallpcn();
service:
mainApp.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '#',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
})
Please give me suggestion.
Some suggestion :
1 - Do a console.log(response) after the call really show the data ?
2 - Remember pie can't works with string data so response.c, response.o and response.r must be integer or float.
I am using highstock,5.0.10 with angularJS.
In my chart navigator got displayed twice, like below
As you can see, navigator has been rendered twice. However, if you refresh the page, everything looks fine.
Any ideas?
I have added my Highstock code here.
Highcharts.stockChart('FindComputerUsage', {
rangeSelector: {
selected: 1
},
credits: {
enabled: false
},
title: {
text: ''
},
yAxis: {
title: {
text: 'Percentage of time (%) '
}
},
tooltip: {
formatter: function() {
var date = new Date(requiredData[this.points[0].point.index][0]);
return date + '<br>' + 'Percentage:' + requiredData[this.points[0].point.index][1] + '%';
}
},
series: [{
name: 'Percentage (%)',
data: requiredData,
tooltip: {
valueDecimals: 2,
}
}],
lang :{
noData : "No data to display "
}
});
Here you can see a working example: https://plnkr.co/edit/OphM9wf8WyGm8U6HXfTy
You haven't show your HTML view, but I guess it's similar to this.
<div ng-controller="demoCtrl">
<div id="container" style="height: 400px; min-width: 310px"></div>
</div>
Concerning controller scope, I didn't change anything:
var app = angular.module('demoApp', []);
app.controller('demoCtrl', function($scope){
$scope.data = [
[1290729600000,45.00],
[1290988800000,45.27],
[1291075200000,44.45]
];
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'Qing Xu Example'
},
series: [{
name: 'Value',
data: $scope.data,
tooltip: {
valueDecimals: 2
}
}]
})
});
I'm working on a project with angular JS and i need to make a list of radio buttons to allow the user change the basemap. But i get the list without the circle of the radio button. My controller is like so:
(function() {
'use strict';
angular
.module('gdrtApp')
.controller('MapController', MapController);
MapController.$inject = ['$scope', '$http', 'olData'];
function MapController ($scope, $http, olData) {
angular.extend($scope, {
center: {
lat: 47.383474,
lon: 1.329346,
zoom: 6,
autodiscover: true
},
layers: [
{
name: 'OpenStreetMap',
active: true,
source: {
type: 'OSM',
url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution: '© OpenStreetMap contributors'
}
},
{
name: 'Stamen',
active: false,
source: {
type: 'Stamen',
layer: 'terrain'
}
},
{
name: 'Bing Maps Road',
active: false,
source: {
name: 'Bing Maps',
type: 'BingMaps',
key: 'Aj6XtE1Q1rIvehmjn2Rh1LR2qvMGZ-8vPS9Hn3jCeUiToM77JFnf-kFRzyMELDol',
imagerySet: 'Road'
}
},
{
name: 'Mapbox Geography Class',
active: false,
source: {
type: 'TileJSON',
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
}
}
],
changeLayer: function(layer) {
$scope.layers.map(function(l) {
l.active = (l === layer);
});
}
});
}
})();
My html file is like below:
<nav id="couches">
<md-radio-group>
<md-radio-button ng-repeat="layer in layers" ng-click="changeLayer(layer)">{{ layer.name }}<br/></md-radio-button>
</md-radio-group>
</nav>
When i execute, i get just list of the names of the layers and when i click on a layer's name i see the layer correctly. But no radio buttons ! What should i fix to solve this problem?
I get the chart when I hard code the data. But when I get the data from a server I don't see the chart. I saw many questions on this but they didn't help me. I change the data object with the scope variable but I still don't get the data
This is what I've done:
angular.module('myModule', [])
// Directive for generic chart, pass in chart options
.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '#',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
})
.controller('myController', function ($scope,$http) {
$scope.GType = function(){
console.log("GType");
$http.get('http://192.168.1.100:5000/getPDAServiceAssignStatus')
.then(function (response) {
$scope.pieData = [];
console.log(JSON.stringify(response)+" Res");
for(i=0;i<response.data.length;i++){
$scope.pieData.push({
name: response.data[i].name,
y:response.data[i].y
});
}
console.log($scope.pieData);
});
}
$scope.GType();
// $scope.pieData = [{
// name: "Microsoft Internet Explorer",
// y: 56.33
// }, {
// name: "Chrome",
// y: 24.03,
// sliced: true,
// selected: true
// }, {
// name: "Firefox",
// y: 10.38
// }, {
// name: "Safari",
// y: 4.77
// }, {
// name: "Opera",
// y: 0.91
// }, {
// name: "Proprietary or Undetectable",
// y: 0.2
// }]
});
I'm working on a project which uses Highcharts and Angularjs and fetches data using SignalR. The problem is the pie chart initializes correctly but can not update the diagram with the data comes from server. here is my code:
'use strict';
angular.module('mbCharts').directive('mbGauge', [
'mbWebMetricsService',
function (mbWebMetricsService) {
return {
//
// scope is inherited from the widget using this directive
//
templateUrl: '/ext-modules/mbCharts/mbGaugeTemplate.html',
link: function (scope, el, attrs) {
Highcharts.chart(el[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}
},
series: [{
data: [{
name: "Microsoft Internet Explorer",
y: 100
}, {
name: "Chrome",
y: 0,
sliced: true,
selected: true
}]
}]
});
// locate the widget showing this gauge
var widget = el.closest('.gridster-item');
// monitor the widget's size
widget.resize(function () {
//if (scope.chart != null) {
// scope.chart.chartWidth = widget.width();
// scope.chart.chartHeight = widget.height();
//}
});
//scope.title = mbWebMetricsService.getTitleForMetric(scope.metric);
scope.title = "CPU percentage";
scope.initialized = false;
scope.$on('mbWebMetricsService-received-data-event', function (evt, data) {
var val = Math.round(data[scope.metric]);
scope.chart.series[0].data[0].y = val;
scope.chart.series[0].data[1].y = 100 - val;
});
}
};
}
]);
The problem is how you want to update data. It's not about changing options in chart object, but using proper API. To update points, use chart.series[index].data[pointsIndex].update().
So in your case, first store a chart object:
var myChart = new Highcharts.Chart(el[0], { ... });
Then update points:
scope.$on('mbWebMetricsService-received-data-event', function (evt, data) {
var val = Math.round(data[scope.metric]);
myChart.series[0].data.update(val);
myChart.series[0].data.update(100 - val);
});