Multiple charts on same page using Angularjs
Question
I am trying to find an example of using multiple charts on same page. Basically I have to show each chart for a person and there performance. I looked at google charts but it uses "id" which has to be unique. I have to use ng-repeat to draw the charts. Can anyone let me know an example of it or how to approach it. I need to draw line charts. I have already tried out google charts, nvd3 etc but having hard time getting them to work. Let me know Thanks
3 answers
solution1
0 ACCPTED 2015-10-29 07:37:04
You can use ng-attr-id={{'i' + person.id}} to assign unique id in ng-repeat , or even use ng-attr-id={{'i' + $index}}
Note: id attribute cannot start with a number.
solution2
0 2015-10-29 07:40:44
solution3
0 2018-05-24 11:31:32
Please follow below steps.
Download ng-google-chart.js from https://github.com/angular-google-chart/angular-google-chart/blob/development/ng-google-chart.js and give reference in html page
<script src="ng-google-chart.js"></script>and add other references also like
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>Add it's module in angular app
var app = angular.module('appname', ['googlechart']).value('googleChartApiConfig', { version: '1', optionalSettings: { packages: ['corechart'], language: 'ja' }});
Get/assign data like
app.controller('appController', function ($scope, $sce, $window) { $scope.charts = [{ "type": "ColumnChart", "displayed": false, "cssStyle": "height:150px;width: 150px", "data": { "cols": [{ "label": "Product", "type": "string" }, { "label": "Agent", "type": "number" }, { "label": "Walkin", "type": "number" }], "rows": [{ "c": [{ "v": "" }, { "v": 0 }, { "v": '#000' }] }, { "c": [{ "v": " " }, { "v": 10 }, { "v": '#3366CC' }] }, { "c": [{ "v": "" }, { "v": 20 }, { "v": '#3366CC' }] }] }, "options": { //"title": "Product wise sales for each customer", "isStacked": "false", //"fill": 20, //"is3D": false, "bar": { groupWidth: '90%' }, "legend": { position: 'none' }, //"colors": ["#28a6a8", "rgb(124, 124, 172)", "rgb(0, 227, 253)", "rgb(0, 206, 230)", "rgb(26, 110, 112)"], "animation": { "startup": true, "duration": 2000, "easing": "inAndOut" }, 'tooltip': { trigger: 'none' }, //"displayExactValues": false, } }, { "type": "ColumnChart", "displayed": false, "cssStyle": "height:150px;width: 150px", "data": { "cols": [{ "label": "Product", "type": "string" }, { "label": "Agent", "type": "number" }, { "label": "Walkin", "type": "number" }], "rows": [{ "c": [{ "v": "" }, { "v": 10 }, { "v": '#000' }] }, { "c": [{ "v": " " }, { "v": 20 }, { "v": '#3366CC' }] }, { "c": [{ "v": "" }, { "v": 40 }, { "v": '#3366CC' }] }] }, "options": { //"title": "Product wise sales for each customer", "isStacked": "false", //"fill": 20, //"is3D": false, "bar": { groupWidth: '90%' }, "legend": { position: 'none' }, //"colors": ["#28a6a8", "rgb(124, 124, 172)", "rgb(0, 227, 253)", "rgb(0, 206, 230)", "rgb(26, 110, 112)"], "animation": { "startup": true, "duration": 2000, "easing": "inAndOut" }, 'tooltip': { trigger: 'none' }, //"displayExactValues": false, } }]; }Loop data on html as:
<body ng-app="appname" ng-cloak="" ng-controller="appController"> <div dir="rtl" ng-repeat="_chart in charts" google-chart chart="_chart" style="{{_chart.cssStyle}}" ></div> </body>You will get result like
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.