I am new to Angular Charts and don't have a clue how to to connect the endpoint JSON data to the graph. I followed the instructions in AngularCharts to populate the bar chart with rough data.
HTML :
<div class="row">
<div class="span12">
<div class="widget widget-nopad">
<div class="widget-header">
<i class="icon-list-alt"></i>
<h3> Skills</h3>
</div>
<!-- /widget-header -->
<div class="widget-content" style="padding:5px;" ng-controller="BarCtrl">
<canvas id="bar" class="chart chart-bar"
chart-data="data" chart-labels="labels" chart-series="series">
</canvas></div>
</div>
</div>
</div>
Controller :
myApp.controller('BarCtrl', ['$scope', 'reportServices', function ($scope, reportServices) {
reportServices.getSkillsReport().then(function (result) {
$scope.data = result.data;
$scope.labels = ['2006', '2007', '2008', '2009', '2010', '2011', '2012'];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
});
}]);
The output of the endpoint is :
{
".Net": 4,
"Java": 3,
"JavaScript": 5,
"ASP.NET": 2,
"Banking": 2,
"Personal Skills": 6
}
Can someone please show me how to connect this data to the current default bar chart? Also I don't want the second series of bar in the chart.
Suppose, your endpoint object is myobject :
var myobject = { ".Net": 4, "Java": 3, "JavaScript": 5, "ASP.NET": 2,"Banking": 2,"Personal Skills": 6}
$scope.labels = [];
$scope.series = ['Series A'];
$scope.data = [];
$scope.datavalues = [];
for(i in myobject) {
$scope.labels.push(i)
$scope.datavlues.push(myobject[i])
}
$scope.data = [$scope.datavalues]
Related
The graph in the view is not displayed:
<canvas class="chart chart-line" chart-data="data" chart-labels="labels"
chart-series="series" chart-click="onClick"></canvas>
test-controller.js:
(function () {
'use strict';
angular
.module('app.test')
.controller('TestController', TestController);
function TestController( $scope, $timeout) {
initialize();
function initialize() {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
// Simulate async data update
$timeout(function () {
$scope.data = [
[28, 48, 40, 19, 86, 27, 90],
[65, 59, 80, 81, 56, 55, 40]
];
}, 3000);
}
}
})();
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js">
</script>
I use the example
https://github.com/jtblin/angular-chart.js#example
I do not know why the graph is not displayed
You can use the same way, make sure that angular-charts and chart.js should have the correct versioned library references.
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
DEMO
(function(angular) {
'use strict';
angular.module('myApp', ['chart.js'])
.controller('myController', [function() {
var ctrl = this;
ctrl.socialChart = {
options : {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
},
type: 'StackedBar',
labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
series: ['FACEBOOK', 'GOOGLE', 'TWITTER', 'INSTAGRAM'],
colors: ['#ED402A', '#F0AB05', '#A0B421', '#00A39F'],
data : [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
]
}
}]);
})(window.angular);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Multi Slot Transclude</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myController as ctrl">
<canvas id="outreach" class="chart chart-bar" chart-labels="ctrl.socialChart.labels" chart-data="ctrl.socialChart.data" chart-series="ctrl.socialChart.series" chart-colors="ctrl.socialChart.colors" chart-options="ctrl.socialChart.options"></canvas>
</body>
</html>
How to set maximum polar axis value to 100? Currently the maximum value depends on the highest value of data received.
Currently my current working code:
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
var sum = $scope.data.reduce(function add(a, b) {
return a + b;
}, 0);
$scope.options = {
pieceLabel: {
render: function (args) {
return args.label + " " + Math.round(args.value*100/sum,2)+"%";
},
fontColor: '#000',
position: 'outside',
segment: true
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-polar-area"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>
For this you can use the scale property on options
scale: {
ticks: {
min: 0,
max: 100,
stepSize: 10
}
}
I updated your example
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
var sum = $scope.data.reduce(function add(a, b) {
return a + b;
}, 0);
$scope.options = {
pieceLabel: {
render: function (args) {
return args.label + " " + Math.round(args.value*100/sum,2)+"%";
},
fontColor: '#000',
position: 'outside',
segment: true,
},
scale: {
ticks: {
min: 0,
max: 100,
stepSize: 10
}
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-polar-area"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>
This is what I want to achieve:
I have tried it in plunkr, but unable to come up with the correct structure of data.
I have seen that it's possible in chart.js.
'use strict';
var app = angular.module('examples', ['chart.js', 'ui.bootstrap']);
app.controller('StackedBarCtrl', ['$scope', function ($scope) {
$scope.labels = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
$scope.type = 'StackedBar';
$scope.series = ['2015', '2016'];
$scope.options = {
scales: {
xAxes: [{
stacked: true,
}],
yAxes: [{
stacked: true
}]
}
};
$scope.$on('chart-create', function(event, instance){
// used to obtain chart instance
$scope.chart = instance.chart;
});
$scope.onclick = function(elements,e)
{
// helper function that translates an event to a position in canvas coordinates
var pos = Chart.helpers.getRelativePosition(e, $scope.chart);
// inRange is the function on the chart element that is used for hit testing
var intersect = elements.find(function(element) {
return element.inRange(pos.x, pos.y);
});
if(intersect){
alert('You clicked ' + $scope.labels[intersect._index] + ' ' + $scope.series[intersect._datasetIndex]);
}
}
$scope.data = [
[65, 59, 90, 81, 56, 55, 40],
[28, 48, 40, 19, 96, 27, 100]
];
}]);
I want to update the data of my Chartjs chart dynamically using AngularJS. The chart works fine if there is no data being updated, but if I try to update the data by using a $interval function the chart just remains blank.
$scope.labelsx2 = [];
$scope.seriesx2 = [];
$scope.datax2 = [
[65, 59, 80, 81, 56, 55, 40]
];
$scope.randomize = function () {
$scope.datax2 = [65, 59, 1, 81, 1, 55, 1];
console.log('workk');
};
$interval(function() {$scope.randomize();},1000,0);
<div class="item item-text-wrap">
<canvas id="line" class="chart chart-line" data="datax2" labels="labelsx2" legend="true" series="seriesx2" options="{showTooltips: false}"></canvas>
</div>
Change
$scope.datax2 = [65, 59, 1, 81, 1, 55, 1];
in randomise function with
$scope.datax2 = [[65, 59, 1, 81, 1, 55, 1]];
Am I missing something here? For two days i have looked through this code to see the issue just to get started. I am testing out the Chart Js plugin and I intend to use angular with it.
Seems like there is some sort of conflict with my code that dosent let either of the scripts to run. Please help
//Charts//
// Get the context of the canvas element we want to select
var ctx = document.getElementById("myChart").getContext("2d");
var LineChart = new Chart(ctx).Line(data);
//Data//
data = {
labels : ["January", "February", "March", "April", "May", "June", "July"],
datasets : [{
data:[65, 59, 80, 81, 56, 55, 40]
}]
};
var app = angular.module('myApp',[]);
app.controller('MainController', function($scope){
$scope.Title = 'My Charts';
});
http://plnkr.co/edit/RXzjPllg0RSWjvgMjIoU?p=preview
Got your chart working for you
http://plnkr.co/edit/YrI6RtQTkJkZde3Ynnhq?p=preview
var app = angular.module('Chart', []);
app.controller('MainController', ['$scope', function($scope) {
$scope.greet = 'My Charts';
data = {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [65, 59, 80, 81, 56, 55, 40]
}]
};
var ctx = document.getElementById("myChart").getContext("2d");
var LineChart = new Chart(ctx).Line(data);
}]);
//Data//
here's an example that worked for me.
in your page.html...
<!-- in head tag include: jquery.js jquery-ui.js bootstrap.js angular.js chart.js angular-chart.js angular-chart.css then this js -->
<script type="text/javascript">
var app = angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope, $http) {
// get example [{"January":10},{"February":20},{"March":50},{"April":30},{"May":20},{"June":10},{"July":10}]
$http.get('http://mywebsite/myjsondata').
success(function(data) {
var labelArray = [];
var dataArray = [];
angular.forEach(data, function(item){
var jsObj = angular.fromJson(item);
for (var prop in jsObj) {
//alert(prop + " is " + jsObj[prop]);
labelArray.push(prop);
dataArray.push(parseInt(jsObj[prop]));
}
});
//$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
// $scope.data = [[10, 20, 50, 30, 20, 10, 10]];
$scope.labels = labelArray;
$scope.data = [dataArray];
$scope.series = ['Send Totals']; // Series A
})
.error(function() {
alert("Sorry. Unable to retrieve the data.");
});
</script>
... in the body put this
<div class="col-lg-6 col-sm-12 ng-scope" id="line-chart" ng-controller="LineCtrl">
<div class="panel panel-default">
<div class="panel-heading">Line Chart</div>
<div class="panel-body">
<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick" >
</canvas>
</div>
</div>
</div>