I am working on Angular Charts to show line chart in my app. I have integrated line chart using Chart.js. But, in my graph, I would not want Series displaying after chart.
My code of chart is
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40]
];
and my html to show this chart is
<canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series"></canvas>
When I tried to remove Series from code to hide it in graph, Graph is not load.
Does anyone knows how to remove it without any error?
Just set the values to null and hide the tooltips
var a = $scope.data.pop();
$scope.data.push(a.map(function() { return null; }))
$scope.options = { showTooltips: false };
Fiddle - http://jsfiddle.net/rt6zoL4k/
You just have to set the value of display under legend to false.
$scope.options = {
legend: { display: false }
};
Related
I'm new to React, and I'm trying to figure out how to setState to the object, but it doesn't work when I this.setState({ datasets[0].data: }), in the function what do I need to do here??
state={
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
data: [0, 10, 5, 2, 20, 30, 45],
label: "My First dataset",
backgroundColor: 'rgb(255, 99, 132)',
borderColor: 'rgb(255, 99, 132)',
}]
}
change = () => {
this.setState({
datasets:
})
}
this.setState((prevState) => {
const datasets = prevState.datasets;
datasets[0].label = newLabel; //you can change particular value this way
return {datasets};
});
What this does is actually make a copy of prevState datasets array of objects and the mutates its value as per the requirement. Once the changes are done, we will setState value with the value of the updated datasets.
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>
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]
I am trying to create an agular line chart that has four horizontal lines (margins - two upper margins and two lower margins). Please see this fiddle - https://jsfiddle.net/CypressMountain/arq34fcu/30/
My objective is to define the properties (value,color,label) of these lines inside angular controller, but not inside JQuery line chart extension, as it is currently done in the fiddle. The graph properties, as well as the margin line properties will come from the back end, and the margin lines will be drawn independently from the graph.
I am not sure how to achieve something like $scope.margins = [] in controller, similar to what we have for $scope.data = [] or $scope.labels... Any help is appreciated.
This is the HTML:
<canvas id="line" class="chart chart-linebis" chart-data="data"
chart-labels="labels" chart-legend="true" chart-series="series"
chart-click="onClick">
</canvas>
The margin lines are now defined in draw function, when the line chart type is being extended
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines =
[
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
.............................
This is the controller:
angular.module('test', ['chart.js']);
angular.module('test').controller('TestCtrl', function ($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A'];
$scope.data = [
[-5, 48, 40, -19, 86, 27, 90]
];
});
Two previous posts were referenced
angular-chart add horizontal line
and
Chart.js - draw horizontal line
I finally got it resolved and hope this will help someone else who might have a similar task.
$scope.options is the place inside the angular controller where the margin lines' properties will be received from the back end and assigned to $scope.options (you would replace the current hard coded label, value, and color for each horizontal line with the dynamic values).
$scope.options = {
limitLines: [
{
label: 'Upper margin 1',
value: 90,
color: 'rgba(255, 0, 0, .9)'
},
{
label: 'Upper margin 2',
value: 75,
color: 'rgba(255, 165, 0, .8)'
},
{
label: 'Lower margin 1',
value: -10,
color: 'rgba(0, 165, 255, .8)'
},
{
label: 'Lower margin 2',
value: -25,
color: 'rgba(0, 0, 255, .8)'
}
]
}
Then the canvas tag in HTML will have the options added:
chart-options="options"
Finally, in the line chart extension code, in the draw function 'lines' will be bridged to 'limitLines' via options:
draw: function () {
Chart.types.Line.prototype.draw.apply(this, arguments);
var lines = this.options.limitLines;
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>