I'm using Angular Google Chart but i do not know how to add a select event.
In the API Doc can be seen the method 'registerWrapperListener', but i dont used it
Some idea to add select-event in this example?
Thanks you
'use strict';
angular.module('google-chart-example', ['googlechart']).controller("MainCtrl", function($scope) {
var chart1 = {};
chart1.type = "OrgChart";
chart1.cssStyle = "height:200px; width:300px;";
chart1.data = {
cols: [{
id: 'Name',
label: 'Name',
type: 'string'
}, {
id: 'Manager',
label: 'Manager',
type: 'string'
}, {
id: 'ToolTip',
label: 'ToolTip',
type: 'string'
}],
rows: [{
c: [{
v: '0',
f: 'CEO'
}, {
v: ''
}, {
v: 'The CEO'
}]
}, {
c: [{
v: '1',
f: 'worker 1'
}, {
v: '0'
}, {
v: ''
}]
}]
};
$scope.chart = chart1;
});
<html xmlns="http://www.w3.org/1999/html">
<body ng-app="google-chart-example" ng-controller="MainCtrl">
<div>
<div google-chart chart="chart" style="{{chart.cssStyle}}" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://bouil.github.io/angular-google-chart/ng-google-chart.js"></script>
<script src="example.js"></script>
</body>
</html>
In your html code, it would be:
<div google-chart chart="chart" style="{{chart.cssStyle}}" on-select="selectCallbackMethodYouWant(selectedItem)" />
Related
I am trying to make pieCharts, Barcharts using angular google charts .
I have made a colChartObject and assign data to it and several other options like size,colors but nothing is displaying on the browser.I tried the same using my custom directive too but had the same problem .
Can anyone please let me know the problem in my code??
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-google-chart/1.0.0-beta.1/ng-google-chart.min.js" type="text/javascript"></script>
</head>
<body ng-app = "ngapp">
<div ng-controller="ChartController">
<div google-chart chart="colChartObject"></div>
</div>
</body>
</html>
JS
var app = angular.module('ngapp',[]);
app.controller('ChartController',function($scope){
$scope.colChartObject={};
$scope.colChartObject.type = "PieChart"; //setting chart type
$scope.colChartObject.displayed = true;
$scope.Colors = [
['#CB7472', '#A895BF', '#F8A769', '#A7514F', '#C0504D', '#9BBB59'],
['#7399C9', '#A8C472', '#8AC8D9', '#426690', '#4BACC6', '#8064A2'],
['#4F81BD', '#C0504D', '#9BBB59', '#A895BF', '#F8A769', '#A7514F'],
['#F79646', '#4BACC6', '#8064A2', '#A8C472', '#8AC8D9', '#426690']
];
// $scope.colChartObject.data = $scope.data; //setting chart data
//setting chart options
$scope.colChartObject.options = {
title: 'nothing special', //chart title
isStacked: 'true', //chart is stacked or not
titleTextStyle: { color: '#000000',
fontName: 'Open Sans', fontSize: 16,
bold: true, italic: false }, //title style
height: 250,
colors: $scope.Colors[Math.floor(Math.random() * $scope.Colors.length)] //colors
};
$scope.colChartObject.data= {
cols: [
{
id: "month",
label: "Month",
type: "string"
},
{
id: "Tables-id",
label: "Tables",
type: "number"
},
{
id: "Chairs-id",
label: "Chairs",
type: "number"
},
{
id: "Bed-id",
label: "Bed",
type: "number"
},
{
id: "Desk-id",
label: "Desk",
type: "number"
}
],
rows: [
{
c: [
{
v: "January"
},
{
v: 19, //value required to plot chart
f: "19 Tables" //description which is shown on mouse hover
},
{
v: 12,
f: "12 Chairs"
},
{
v: 7,
f: "7 Beds"
},
{
v: 4,
f: "4 Desks"
}
]
},
{
c: [
{
v: "February"
},
{
v: 13
},
{
v: 1,
f: "only 1unit"
},
{
v: 12
},
{
v: 2
}
]
},
{
c: [
{
v: "March"
},
{
v: 24
},
{
v: 5
},
{
v: 11
},
{
v: 6
}
]
}
]
}
});
You forgot to declare the module of "google-chart" as a dependency of your module "ngapp".
You have to change
var app = angular.module('ngapp', []);
to
var app = angular.module('ngapp', ['googlechart']);
I'm doing a chart using the highChart and angularJS.
I follow this highChart.
Here is my code:
AngularJS:
app.directive('hcPieChart', function () {
return {
restrict: 'E',
template: '<div></div>',
scope: {
title: '#',
data: '='
},
link: function (scope, element) {
Highcharts.chart(element[0], {
chart: {
type: 'pie'
},
title: {
text: scope.title
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.2f} %'
}
}
},
series: [{
data: scope.data
}]
});
}
};
});
app.controller('ChartsController', function ($scope) {
var ids =location.search;
$scope.Stats=function(){
$http.get(url+"/Stats"+ids)
.success(function(data){
$scope.Stat = data;
}).error(function(err,data){
console.log("error:" +data);
});
};
$scope.Stats();
/*$scope.Stat = [{
"Validate":17.456789,
"NotValidate":2.96296,
"Nb_V":2.96296,
"Nb_Not_v":2.96296
}];
*/
// Sample data for pie chart
$scope.pieData = [{
name: 'CheckLists Socred',
y: $scope.Stat[0].Validate,
color: '#00c853'
},{
name: 'CheckLists Not Socred',
y: $scope.Stat[0].NotValidate,
color: '#b71c1c'
}];
});
HTML code:
<html >
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body ng-app="app" ng-controller="ChartsController" >
<hc-pie-chart title="Browser usage" data="pieData">Placeholder for pie chart</hc-pie-chart>
</body>
</html>
What I got this chart
When from the graphic chart poster, I have this problem:
Uncaught TypeError: Cannot read property 'parentGroup' of undefined
at k.setState (App/Template/highcharts/highcharts.js:392:112)
at App/Template/highcharts/highcharts.js:207:54
at Array.forEach (native)
at a.each (App/Template/highcharts/highcharts.js:27:360)
at a.Pointer.runPointActions (App/Template/highcharts/highcharts.js:207:32)
at k.onMouseOver (App/Template/highcharts/highcharts.js:389:130)
at SVGGElement.c (App/Template/highcharts/highcharts.js:380:323)
plnkr
thank you for helping me,
I have the same problem and none of the answers helped me out. after several hours I figured out that the array which I was sending to the highchart component as the data feed to my chart, was causing the problem.
the point is, that the y-axis records MUST be named as 'y' , not any other arbitrary name.
my data used to be like this:
data = [{name: "n1", income: 1491},
{name: "n2", income: 103103},
{name: "n3", income: 126886},
{name: "n4", income: 88}]
and when i changed it to :
data = [{name: "n1", y: 1491},
{name: "n2", y: 103103},
{name: "n3", y: 126886},
{name: "n4", y: 88}]
problem solved.
According to $scope.Stat array object you have access each as $scope.Stat[0].Validate
Forked Plunker
$scope.pieData = [{
name: 'CheckLists Socred',
y: $scope.Stat[0].Validate,
color: '#00c853'
},{
name: 'CheckLists Not Socred',
y: $scope.Stat[0].NotValidate,
color: '#b71c1c'
}];
I have been looking for an example for 'multicheckbox' type in 'angular formly form', where the check-boxes are selected or unselected based on corresponding value in form model, when the form is loaded,but could not find any.Can some one please help me with an example?
I shall explain my exact case :
Following is my formly form.Its a multicheckbox with key as 'selectedAnswer'.Initial value for 'selectedAnswer' in the forms model is "ee,dd".But the correspondig values are not getting checked in the check box on loading the form.
[
{
"key":"selectedAnswer",
"type":"multiCheckbox",
"templateOptions":{
"label":"fsdfsdf",
"options":[
{
"name":"ee",
"value":"ee"
},
{
"name":"dd",
"value":"dd"
},
{
"name":"tg",
"value":"tg"
}
]
}
}
]
Please help me to fix this issue.
Thanks,
Deepthy.
click this DEMO for example
HTLM/VIEW
<form novalidate>
<formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
</formly-form>
</form>
Script Code
var vm = this;
vm.model = {
check1: true,
check2:false,
check3:false
};
vm.Fields = [
{
key: 'check1',
type: 'checkbox',
templateOptions: { label: '' },
expressionProperties: {
'templateOptions.label': function(viewValue, modelValue, scope) {
return "check1"
}
}
},{
key: 'check2',
type: 'checkbox',
templateOptions: { label: '' },
expressionProperties: {
'templateOptions.label': function(viewValue, modelValue, scope) {
return "check2"
}
}
},{
key: 'check3',
type: 'checkbox',
templateOptions: { label: '' },
expressionProperties: {
'templateOptions.label': function(viewValue, modelValue, scope) {
return "check3"
}
}
}
];
Hope this works for you.
You can use this type of check box list -
Updated Answer
HTML/View
<form novalidate>
<formly-form model="vm.model" fields="vm.Fields" form="vm.rentalForm">
</formly-form>
</form>
Controller
function MainController(province) {
var vm = this;
vm.model = {
selectedAnswer: ["dd","ee"],
};
vm.Fields =[
{
"key":"selectedAnswer",
"type":"multiCheckbox",
"templateOptions":{
"label":"fsdfsdf",
"options":[
{
"name":"ee",
"value":"ee"
},
{
"name":"dd",
"value":"dd"
},
{
"name":"tg",
"value":"tg"
}
]
}
}
] }
For better understanding check this Fiddle
I have forked the plunk of Santhosh kesavan's answer for providing the better answer.
Hope it will work for you.
For nested keys like below:
{
key: 'domains',
templateOptions: { label: 'Domains' },
fieldGroup: [
{
key: 'domainsCheckbox',
type: 'multicheckbox',
templateOptions: {
options: [
{
key: 'Option1',
value: 'Option1'
},
{
key: 'Option2',
value: 'Option2'
},
]
},
}
]
}
You can specify the model as:
model = {'domains': {'domainsCheckbox': { 'Option1': true }}};
I didn't work for me, in latest version the type has been updated. like type: multiCheckbox --> multicheckbox and options.name --> options.key
[
{
"key":"selectedAnswer",
"type":"multicheckbox",
"templateOptions":{
"label":"fsdfsdf",
"options":[
{
"key":"ee",
"value":"ee"
},
{
"key":"dd",
"value":"dd"
},
{
"key":"tg",
"value":"tg"
}
]
}
}
]
Below code will give you the idea
index.html
<!doctype html>
<html lang="en" ng-app="checkBx">
<head>
<meta charset="UTF-8">
<title>Example - example-ng-selected-production</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<label>Check me to select: <input type="checkbox" ng-model="isSelected"></label><br/>
<label>Check me to select: <input type="checkbox" ng-model="isSecSelected"></label><br/>
</body>
</html>
script.js
var app = angular.module('checkBx', [])
app.controller('myCtrl', ['$scope', myCtrl]);
function myCtrl($scope){
$scope.isSelected = true;
$scope.isSecSelected = false;
}
In my controller I have this code:
$scope.lists = [{
listName: 'list1'
}, {
listName: 'list2'
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}, {
Name: 'Stefan'
}];
});
The Input from lists cames from a webservice, so the values (list1 and list2) can be different each time i reload the app. I can also more then 2 items in lists.
How can I show the value from $scope[listName] in an ng-repat section in my view?
Thanks for your Help.
Stefan.
You might try something like this:
(function() {
angular.module("myApp", []).controller("controller", ["$scope",
function($scope) {
$scope.lists = [{
listName: "list1"
}, {
listName: "list2"
}];
angular.forEach($scope.lists, function(item) {
var listName = item.listName;
$scope[listName] = [{
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}, {
Name: "Stefan"
}];
$scope.results = $scope[listName];
});
}
]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="myApp">
<div data-ng-controller="controller">
<ul>
<li data-ng-repeat="item in results">{{item.Name}}</li>
</ul>
</div>
</div>
My controller code looks like
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
My view contains something like this :
How can I get the selected values of options when user clicks submit button
Here is the jsfiddle
I used ng-repeat to build the select and ng-options to fill them, you then have to use the relative ng-model to get the selections.
HTML:
<div ng-app ng-controller="MyCtrl">
<select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select>
<button ng-click="submitIt()">Submit</button>
</div>
Javascript:
function MyCtrl($scope) {
$scope.submitIt = function () {
console.log($scope.searchOption);
};
$scope.searchOption = [];
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
}