I had tried to run the jqgrid using angularjs, but i did not get any output.
I had uses the following:
HTML
<html ng-app="myApp">
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link data-require="jqgrid#*" data-semver="4.5.2" rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.5.2/css/ui.jqgrid.css" />
<script data-require="jqgrid#*" data-semver="4.5.2" src="//cdn.jsdelivr.net/jqgrid/4.5.2/jquery.jqGrid.js"></script>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/redmond/jquery-ui.css" />
<style type="text/css"></style>
<script src="ngtest.js">
</script>
</head>
<body ng-app="myApp" ng-controller="MyController">
<ng-jq-grid config="config" data="data"></ng-jq-grid>
</body>
</html>
Javascript
var myApp = angular.module("myApp", ["ui.bootstrap"]);
myApp.directive("ngJqGrid", function ($compile) {
return {
restrict: "E",
scope: {
config: "=",
data: "="
},
link: function (scope, element, attrs) {
var $grid;
scope.$watch("config", function (newValue) {
element.children().empty();
$grid = angular.element("<table id='" + $.jgrid.jqID() + "'></table>");
element.append($compile($grid)(scope));
element.append($grid);
angular.extend(newValue, {
autoencode: true,
iconSet: "fontAwesome",
cmTemplate: { autoResizable: true },
autoResizing: { compact: true },
autoresizeOnLoad: true,
loadComplete: function () {
$compile(this)(scope);
}
});
angular.element($grid)
.jqGrid(newValue)
.jqGrid("navGrid")
.jqGrid("filterToolbar");
});
scope.$watch("data", function (newValue, oldValue) {
$grid.jqGrid("clearGridData");
$grid.jqGrid("setGridParam", {data: newValue});
$grid.trigger("reloadGrid");
});
}
};
});
myApp.controller("MyController", function ($scope) {
$scope.config = {
myClick: function (rowid) {
alert("Test buton is clicked on rowid=" + rowid);
},
colNames: ["Client", "", "Date", "Closed", "Shipped via", "Amount", "Tax", "Total", "Notes"],
colModel: [
{ name: "name", align: "center", width: 65, editrules: {required: true},
searchoptions: { sopt: ["tcn", "tnc", "teq", "tne", "tbw", "tbn", "tew", "ten"] }},
{ name: "myLink", align: "center",
formatter: function (cellvalue, options, rowObject) {
return "<button class='btn btn-primary' popover-placement='top' popover='" +
rowObject.note + "' ng-click='config.myClick(" + options.rowId + ")'>Test</button>";
}},
{ name: "invdate", width: 125, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" },
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, template: "booleanCheckboxFa" },
{ name: "ship_via", width: 105, align: "center", formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "amount", width: 75, template: "number" },
{ name: "tax", width: 52, template: "number", hidden: true },
{ name: "total", width: 60, template: "number" },
{ name: "note", width: 60, sortable: false, edittype: "textarea" }
]
};
$scope.data = [
{ id: "11", invdate: "2007-10-01", name: "test", note: "note", amount: 0, tax: 0, closed: true, ship_via: "TN", total: 0 },
{ id: "21", invdate: "2007-10-02", name: "test2", note: "note2", amount: 351.75, tax: 23.45, closed: false, ship_via: "FE", total: 375.2 },
....etc
];
});
Fiddle
You have a lot of things going on:
You need to load external resources on the left panel when using jsfiddle.
When using jsfiddle you do not include a header it is automatically included in the output
You didn't include the angular-ui-bootstrap javascript files that you have as a dependency
You are using an older version of angular which does not pair with angular-ui-bootstrap, I updated the angular dependency to 1.3.20 to get things to run
When using jsfiddle with angular you need to select No wrap - in <body> from the options on the left or it will not run angular.
You are trying to bind the app to the DOM twice, you only need one ng-app="myApp"
And you have functions you are calling such as initDateEdit and initDateSearch which where not defined
All that being said, making these changes the app will load in jsfiddle.
Working Fiddle
Related
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 want to update high chart on real time in angular js after a particular time span and it should get reflects on html without user interaction in angular JS.
Below are code for Controller,Directive and HTML. I am using rest web service to fetch the data from back end.
Controller :
function dashboardController($scope, $http) {
this.$scope = $scope;
$scope.init=function(){
_refreshPageData();
function _refreshPageData() {
$http({
method : 'GET',
url : 'http://localhost:8080/SpringWebApp/rest/employee/monthlydata'
}).then(function successCallback(response) {
$scope.data = response.data;
var data = $scope.data;
var a = [];
parseInt($scope.data[0].data);
angular.forEach(data, function(data, key) {
a.push(parseInt(data.data));
});
console.log($scope.data);
$scope.chartConfig = {
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
title: {
text: 'USD to EUR exchange rate from 2006 through 2008'
}, subtitle: {
text: document.ontouchstart === undefined ?
'Click and drag in the plot area to zoom in' :
'Pinch the chart to zoom in'
},
yAxis: { title: { text: 'Temperature (Celsius)' } },
tooltip: { valueSuffix: ' celsius' },
legend: { align: 'center', verticalAlign: 'bottom', borderWidth: 0 },
plotOptions: {
area: {
fillColor: {
linearGradient: { x1: 200, y1: 220, x2: 220, y2: 2221},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
marker: {
radius: 2
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null
}
},
series: [{
type:'area',
data :a
}]
};
}, function errorCallback(response) {
console.log(response.statusText);
});
}
}
}
Directive :
var chartDirective = function () {
return {
restrict: 'E',
replace: true,
template: '<div></div>',
scope: {
config: '='
},
link: function (scope, element, attrs) {
var chart;
var process = function () {
var defaultOptions = {
chart: { renderTo: element[0] },
};
var config = angular.extend(defaultOptions, scope.config);
chart = new Highcharts.Chart(config);
};
process();
scope.$watch("config.series", function (loading) {
process();
});
scope.$watch("config.loading", function (loading) {
if (!chart) {
return;
}
if (loading) {
chart.showLoading();
} else {
chart.hideLoading();
}
});
}
};
};
Html :
<!DOCTYPE html>
<html lang="en">
<head>
<script data-require="angular.js#*" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="highcharts#*" data-semver="2.3.5" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js"></script>
<script src="chartDirective.js"></script>
<script src="dashboardController.js"></script>
<script src="app.js"></script>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div ng-controller="dashboardController">
<div ng-init="init()"></div>
<chart config="chartConfig"></chart>
</div>
</body>
</html>
You can make a request based on the interval using $interval
$interval(function() {
YourApi.response.then,
series.addPoint([whatever);
}, 1000);
I've been reading the examples of Angular UI-Grid b/c we want to use it in a project. I'm following the docs and examples here on stack. But I can not get my data to display in my table. I've created this plunk based on others, simplified for what I'm doing. I'm not sure why the data will not display?? Any help is appreciated.
http://plnkr.co/edit/jOOePX4X1BliOXdG95pC?p=preview
index.html
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-touch.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.2.5/ui-grid.css" type="text/css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div ng-controller="appController ">
<div ui-grid="gridOptions" ui-grid-edit ui-grid-row-edit ui-grid-cellNav class="mygrid" ></div>
</div>
<script src="app.js"></script>
</body>
</html>
app.js
var myApp = angular.module("myApp", ['ngTouch','ui.grid', 'ui.grid.edit', 'ui.grid.rowEdit', 'ui.grid.resizeColumns'])
myApp.controller("appController", ['$scope', '$http', '$q', '$interval', function ($scope, $http, $q, $interval) {
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
$scope.gridOptions = {
enableCellEditOnFocus: false,
enableSorting: true,
enableGridMenu: true,
columnDefs: $scope.columns,
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
}
};
$scope.saveRow = function( rowEntity ) {
// create a fake promise - normally you'd use the promise returned by $http or $resource
console.log("record EDIT" + angular.toJson(rowEntity));
var promise = $q.defer();
$scope.gridApi.rowEdit.setSavePromise(rowEntity, promise.promise );
// fake a delay of 3 seconds whilst the save occurs, return error if gender is "male"
$interval( function() {
if(rowEntity.test_status === 'Active') {
console.log("accepting edit, b/c status is Active");
promise.resolve();
}else {
console.log("rejecting edit, b/c status is Inactive");
promise.reject();
}
}, 1000, 1);
};
$http.get('data.json')
.success(function(data) {
console.log("data == " + angular.toJson(data));
$scope.gridOptions.data = data;
});
}]);
JSON Data
[
{
"testA": "1","description": "test1","order": "1","test_status": "Active"
},
{
"testB": "2","description": "test2","order": "2","test_status": "Active"
},
{
"testC": "3","description": "test3","order": "3","test_status": "Active"
},
{
"testD": "4","description": "test4","order": "4","test_status": "Inactive"
},
{
"testE": "5","description": "test5","order": "5","test_status": "Active"
}
]
CSS
.mygrid {
width: 450px;
height: 150px;
}
The reason is actually, a simple one. Your column names in your columnDefs object don't match the json you're getting back from your $http call. Change
$scope.columns = [
{ name: 'colA', enableCellEdit: true},
{ name: 'colB', enableCellEdit: true },
{ name: 'colC', enableCellEdit: true },
{ name: 'colD', enableCellEdit: true },
{ name: 'colE', enableCellEdit: true },
{ name: 'colF', enableCellEdit: true }
];
to this:
$scope.columns = [
{ name: 'test', enableCellEdit: true},
{ name: 'description', enableCellEdit: true },
{ name: 'order', enableCellEdit: true },
{ name: 'test_status', enableCellEdit: true }
];
and make sure you change the value of the json data from "testA", "testB", "testC", etc to simply "test".
When I test the doughnut chart with jQuery (no angular), my chart works well (See my plunker). However, when I put it in angular directive, nothing shows up. I use templateUrl here because the actual template is much more complicated than that.
index.html
<body ng-app="myApp">
<div my-chart></div>
</body>
Javascript
angular.module('myApp', [])
.directive('myChart', function() {
return {
restrict: 'A',
replace: 'true',
templateUrl: 'my-chart.html',
scope: {},
link: function (scope, element) {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'chart_1',
type: 'pie',
height: 200,
},
colors: ['#FF0F00', '#FBAF34', '#00cc00'],
title: {
text: ''
},
exporting: {
enabled: false
},
credits: {
enabled: false
},
tooltip: {
//enabled: false,
headerFormat: '<b>{series.name}</b><br><table>',
pointFormat: '<tr><td style="color:{point-color}">{point.name}: </td>' + '<td style="text-align: right">{point.y} %</td></tr>',
footerFormat: '</table>'
},
plotOptions: {
series: {
cursor: 'pointer',
allowPointSelect: true,
point: {
events: {
click: function () {
alert('Site name: ' + this.series.name + ', severity: ' + this.name + " value: " + this.y);
}
}
}
},
pie: {
innerSize: 120,
// disable data label
dataLabels: {
enabled: false
}
}
},
series: [{
name: "Site 1",
data: [
{name: "Critical", y: 56.33},
{name: "Warning", y: 24.03},
{name: "Ok", y: 10.38}
]
}]
});
}
};
});
my-chart.html
<div id="chart_1"></div>
I looked over your code, everything looked sound. You did not provide a plunker for the latest code (with directive), so I created one for you! I imagine you did not add the JQuery script because Angular has some built in. As it is is not perfect at the moment, some items are left out, HighChart requires some additional pieces. What it requires specifically I'm not sure. The console log shows multiple errors without JQuery being added. Hopefully items missing from JQuery in Angular will be added soon!
http://plnkr.co/edit/u6I1zr?p=preview
<html ng-app="myApp">
<body>
<div my-chart></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="script.js"></script>
</body>
</html>
Angularjs uses a subset of JQuery which is known as "jQuery lite" or "jqLite".jqLite implements only the most commonly needed functionality so if you want the enhanced functionality you need to load jquery library before angularjs
below is the link for the docs:-
https://docs.angularjs.org/api/ng/function/angular.element
I passed json encoded string(eg. $TEXT2 consisting ["chrome","15","firefox","20"]) from xcode to an array(eg. arr) in javascript.Now I want to pass this array containing json string dynamically to Highcharts Pie. The HTML code is
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=20, user-scalable=no;" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Pie chart</title>
<!-- 1. Add these JavaScript inclusions in the head of your page -->
<script type="text/javascript" src="jquery-1.6.2.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
<script type="text/javascript">
var chart;
var arr = $TEXT2;
$(document).ready(function(){
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: []
}]
});
});
</script>
<body>
<br>
<!-- 3. Add the container -->
<div id="container" style="width: 300px; height: 350px; margin: 0 auto"></div>
<!-- 2. Add the JavaScript to initialize the chart on document ready -->
</body>
</html>
I am trying to use getjson method although m unaware of its usage.
Since i want to pass my array i.e arr to data[] in Highcharts,I am doing:
$.getJSON("arr", function(json) {
chart.series = json;
var chart = new Highcharts.Chart(chart);
});
Can anyone help me on dis.
Thanks in advance.
I would wrap the JSON call in the document.ready function and then wrap the plot call in the getJSON's success callback:
$(document).ready(function() {
$.getJSON("arr", function(json) {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Interactive Pie'
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
}
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
},
series: [{
type: 'pie',
name: 'Browser share',
data: json
}]
});
});
});
Of course for this to work, you should modify your backend code to return a properly formatted array of arrays that HighCharts expects:
[["chrome",15],["firefox",20]]
You could "fix" your returned array in the JS, but it would be better to do it in the JSON backend call.
<script type="text/javascript">
jQuery(document).ready(function () {
alert('call pie');
var data1 = $("#dataidd").val();
alert('pie data' + data1);
/*--------Pie Chart---------*/
$('#PieChartDiv').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Comparision and Analysis Report'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: 'Issue Details',
// data: jQuery.parseJSON(data1)
data: JSON.parse(data1)
}]
});
});
</script>
Simply do :
Create array with Jquery as bellow :
$.each(data['values'], function(i, val) {
x_values_sub['name'] = i
x_values_sub['y'] = val
x_values.push(x_values_sub);
x_values_sub = {};
});
// Then call this array with HighCharts as data
series: [{
type: 'pie',
name: null,
data: x_values
}]
// Tested and it works with simple javascript object :
Object Part1Name: 25 Part2Name: 75__proto__: Object
You can bind chart with JSON data, directly. You just need to set the json property names as highchart standard. 'Y' for value and 'name' for label.
Your JSON should be as like follow:
[ { name: "Chrome", y: 25 }, { name: "Firefox", y: 20 } ]