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>
Related
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>
Is there any option which allows me to change x-axis labels position?
As you can see on attached screen it is overlaping the chart area.
I am trying to use labelsOffsety but it is doesn't work.
Maybe I'm doing something wrong?
<script src="jquery.min.js"></script>
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.bar.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<center>
<canvas id="cvs" width="1000" height="600">[No canvas support]</canvas>
</center>
<script>
var data = [
[1,1,2,3,5,8,13,21,34]
];
var line = new RGraph.Line({
id: 'cvs',
data: data,
options: {
colors: ['blue'],
linewidth: 4,
hmargin: 5,
vmargin: 50,
shadow: false,
'text.angle': 45,
tickmarks: 'filledcircle',
ticksize: 2,
'text.color': 'green',
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
tooltips: ['1','1','2','3','5','8','13','21','34'],
'gutter.bottom': 50,
'gutter.top': 50,
'gutter.left': 50,
'labels.above': true,
'ylabels': true,
labelsOffsety: 20
}
}).draw();
</script>
If you're using the canvas libraries you can use the labelsOffsety option.
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 am trying to sort json from an external file in angular js.I am able to sort the file easily when i declared json internally as an array but cant able get data when declared json in external file.Please help me.
My code is:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Angularjs UI-Grid Example
</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<script type="text/javascript">
var app = angular.module("uigridApp", ["ui.grid"]);
app.controller("uigridCtrl", function ($scope, $http) {
$http.get("views.json")
.then(function (response) {$scope['users'] = response.data;console.log(response.data);
//$scope['counter'] = Object.keys(response.data).length;
});
/*$scope.users = [
{ name: "Madhav Sai", age: 10, location: 'Nagpur' },
{ name: "Suresh Dasari", age: 30, location: 'Chennai' },
{ name: "Rohini Alavala", age: 29, location: 'Chennai' },
{ name: "Praveen Kumar", age: 25, location: 'Bangalore' },
{ name: "Sateesh Chandra", age: 27, location: 'Vizag' }
];*/
});
</script>
<style type="text/css">
.myGrid {
width: 500px;
height: 200px;
}
</style>
</head>
<body ng-app="uigridApp">
<h2>AngularJS UI Grid Example</h2>
<div ng-controller="uigridCtrl">
<div ui-grid="{ data: users }" class="myGrid"></div>
</div>
</body>
</html>
and views.json contains
[
{
name:"Madhav Sai",
age:10,
location:"Nagpur"
},
{
name:"Suresh Dasari",
age:30,
location:"Chennai"
},
{
name:"Rohini Alavala",
age:29,
location:"Chennai"
},
{
name:"Praveen Kumar",
age:25,
location: "Bangalore"
},
{
name:"Sateesh Chandra",
age:27,
location:"Vizag"
}
]
Please help me.
You can do this,
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.gridOptions = {
columnDefs: [
{ field: 'name' },
{ field: 'age' },
{ field: 'location' }
]
};
$http.get('data.json')
.success(function (data) {
$scope.gridOptions.data = data;
});
}]);
DEMO
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]