score:0
there's a few issues with the code that you've posted. the key ones that i see that will get the chart rendering happening are as follows:
first, your ng-repeat
is using options
, but you also have a scope variable called options
, and i think they are clashing (or at the very least, not doing what you think they are doing).
changing $scope.options = {...}
to $scope.chartoptions = {...}
, and chart-options="options"
to chart-options="chartoptions"
will fix this.
second, your ng-repeat
is looking for chart-data
and chart-labels
inside each person
. you've only defined name
and number
, so there is no data to display.
on this, i can see that you've iterated over the person
array and dropped all the information into a scope data
and labels
array.
that means that while you are rendering a chart per person, you're effectively rendering the same chart each time.
a full working version follows:
<link rel="stylesheet" href="http://jtblin.github.io/angular-chart.js/node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="http://jtblin.github.io/angular-chart.js/node_modules/angular/angular.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/node_modules/chart.js/dist/chart.min.js"></script>
<script src="http://jtblin.github.io/angular-chart.js/dist/angular-chart.js"></script>
<script>
var app = angular.module("rodoapp", ["chart.js"]);
app.controller("chartcontroller", function ($scope, $http) {
$scope.person = [
{
"name": "rodrigo",
"number": 5,
},
{
"name": "carlos",
"number": 11,
},
{
"name": "arnold",
"number": 20,
}
];
$scope.labels = [];
$scope.data = [];
for (i = 0; i < $scope.person.length; i++) {
$scope.labels.push($scope.person[i].name);
$scope.data.push($scope.person[i].number);
}
$scope.chartoptions = {
legend: {
display: true,
},
title: {
display: true,
text: 'title'
}
};
});
</script>
<body ng-app="rodoapp" ng-controller="chartcontroller">
<div ng-repeat="t in person">
<div>{{t.name}} - {{t.number}}</div>
</div>
<hr />
<div ng-repeat="options in person track by $index">
<canvas ng-attr-id="{{options.name}}" class="chart chart-pie" chart-options="chartoptions" chart-data="data" chart-labels="labels" />
</div>
</body>
while this renders the charts, the make up of the data and why you want to repeat this is something that you'll need to think about, and possible ask another question on.
Source: stackoverflow.com
Related Query
- ChartJS with AngularJS - Canvas won't display anything
- How to add ChartJS code in Html2Pdf to view image
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- Chartjs not working with d3 from csv source
- ChartJS with AngularJS
- Creating charts dynamically using ChartJS and AngularJS
- ChartJS have xAxes labels match data source
- Updating Chartjs to 2.5 with custom code
- Calling data from outside of Chartjs code
- VueJS + Chartjs - Chart only renders after code change
- AngularJs ChartJs tooltip z-index issue
- ChartJS 2.0 differences in code help needed
- Angularjs lazy load chartjs when in another tab
- Add Space Between Bars in Angularjs Chartjs
- My Chartjs is not updating after setstate full code attached Reactjs Update
- Chartjs doc examples are lightning fast but same code is slow when reproducing
- ng-repeat in ChartJS AngularJS
- 'require is not defined' error when attempting to use chartjs in javascript code
- angularjs chartjs legend undefined
- How to run Chart.js samples using source code
- Code for Chartjs Typescript definition file
- how to not repeat code while creating multiple charts in chart js
- Dynamically update values of a chartjs chart
- Different color for each bar in a bar chart; ChartJS
- Hide points in ChartJS LineGraph
- ChartJS Line Charts - remove color underneath lines
- Skip decimal points on y-axis in chartJS
- How to set ChartJS Y axis title?
- Chartjs Bar Chart showing old data when hovering
- Chartjs change grid line color
More Query from same tag
- Updating Chartjs Data with Response from POST Call?
- chartjs-vue charts are empty
- HTML5 chart stacked bars with repeated colors
- Prevent y-axis labels from being cut off
- I want to put my data in chartjs-plugin-streaming
- How to make bar chart cover multiple labels?
- Why don't my datasets show up on line graph using Chart.js?
- ChartJS Pie Chart How default just show 2 legend datas
- Chart.js: hiding series by clicking on legend
- Ember.Computed is not a function
- Count the duplicates in a string array using React JS
- ChartJS: Is this horizontal stacked bar and line graph multiaxis chart even possible?
- Show/hide All nested data in ChartJS Pie chart when outer is shown/hidden
- Chart.JS - Fill Donut
- warning in chartjs/react-chartjs options assignment if setting type:'time'
- ERROR TypeError: Cannot read property 'testMethod' of undefined
- chart.js v2.0.0 redrawing the chart
- Change style of hover and tooltip in chartjs or ng2-charts
- chart.js - user add the final point of the line
- Chart,js Pie Chart can the gap between a pie chart and the legend be adjusted
- How to update Chart.js based on dropdown list?
- Why doesn't Chart.js display my output (result of a const function)?
- PrimeFaces PolarArea Chart - GridLine Color Change
- Conditional in ChartJS axes tick callback function isn't returning the expected labels
- Chart.js need to fix x axis number of vales
- Is it possible to generate multiple chart in Laravel using chartjs ? If possible please give the solution
- Angular Chart JS prevent x label causing overflow
- Smaller scale for volume dataset in Chart JS
- ChartNew.js - Remove/Hide zero label from Pie Chart
- LinearGradient doesnt't work on chartJs canvas for Angular