Add or remove column not working in handsontable - javascript

I'm experimenting with Handsontable add and remove column feature. But it is not working.
Here is my code :-
My index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
<!--<link rel="stylesheet" type="text/css" href="css/style.css">-->
<script type="text/javascript" src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<!--<script type="text/javascript" src="data/datafactory.js"></script>-->
</head>
<body MainCtrl as ctrl>
<hot-table col-headers="true" datarows="ctrl.data">
<hot-column ng-repeat="column in ctrl.columns" data="{{column.data}}" title="column.title" read-only="column.readOnly"></hot-column>
</hot-table>
<button ng-click="ctrl.addColumn()">Add column</button>
<button ng-click="ctrl.removeColumn()">Remove column</button>
</body>
</html>
My app.js
function MainCtrl() {
var items = [[]];
this.data = items;
this.columns = [
{
data: 'id',
title: 'ID',
readOnly: true
},
{
data: 'price',
title: 'Price',
readOnly: false
}
];
this.addColumn = function() {
this.columns.push({});
};
this.removeColumn = function() {
this.columns.pop();
};
}
angular
.module('app', ['ngHandsontable'])
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = [];
When I run the code it doesn't work and doesn't allow to add or remove column. I am new to both angular and front-end design. So seeking help here.

I believe you need to order your <script> tags properly - your code should go at the end (I imagine your code is in js/app.js):
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.35.0/handsontable.full.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also try using arrow functions where you can instead of function()...
Or set up:
let ctrl = this;
You may get in trouble using this the way you do it. Scope of this can and sometimes will change.
Here's example of your code working in JS fiddle:
https://jsfiddle.net/pegla/b6rj93cg/2/

Related

ng-src not working properly but src is working fine

I'm trying to add an image to a sample web page. But whenever I use ng-src in img tag, the image is not showing on the page (the image is visible if I use 'src' in place of 'ng-src').
Here is my Html and JavaScript file.
Javascript & HTML :
/**
* Module
*
* Description
*/
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked = "";
$scope.clickMe = function() {
$scope.clicked= "Image Clicked";
};
}]);
<html ng-app="mainModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="bluegem.jpg" ng-click="clickMe()"/>
</div>
</body>
Thanks in advance.
There are 2-3 problems in this code
1. myModule and mainModule(your app.js is creating a module named myModule but in your html you are using mainModule)
2. order of mentioned files (angular.js should be mentioned before app.js
Here I am adding the code
<html ng-app="myModule">
<head>
<title>Testing For Image Click</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
Latest compiled and minified JavaScript
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> -->
</head>
<body class="container" ng-controller="myCtrl">
<div>
<img ng-src="{{image}}" ng-click="clickMe()"/>
</div>
</body>
And
angular.module('myModule', [])
.controller('myCtrl', ['$scope', function($scope){
$scope.clicked="";
$scope.image = "bluegem.jpg"
$scope.clickMe=function()
{
$scope.clicked="Image Clicked";
};
}]);
Change the markup so that the ng-src binds to a variable and not a URL as you had it setup before:
<img ng-src="{{imageURL}}" ng-click="clickMe()"/>

Uncaught Error: [$injector:modulerr] - Heatmap using d3 and AngularJS

I am new to angularjs and trying to build an app which utilises heat-maps. I am trying to do this with d3. Following are my code snippets and the error that I am getting. I would appreciate if someone can point me in the right direction please. Thanks!
result.html
<html lang="en">
<style h2 {text-align:center;}></style>
<body>
<div ng-app="myApp">
<div class="container">
<div ng-controller="calHeatmap">
<cal-heatmap config="passed_data"></cal-heatmap>
</div>
</div>
</div>
</body>
</html>
calHeatmap.js
'use strict';
var myApp = angular.module('myApp.controllers', []);
myApp.controller('calHeatmap', function ($scope) {
var points = [];
var max = 0;
var width = 840;
var height = 400;
var len = 200;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
// heatmap data format
$scope.passed_data = {
max: max,
data: points
};
})
.directive('heatMap', function(){
return {
restrict: 'E',
scope: {
data: '='
},
template: '<div container></div>',
link: function(scope, ele, attr){
scope.heatmapInstance = h337.create({
container: ele.find('div')[0]
});
scope.heatmapInstance.setData(scope.data);
}
};
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Virality of an Online Article</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap-master/cal-heatmap.js"></script>
<script type="text/javascript" src="bower_components/cal-heatmap-master/cal-heatmap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="javascript/app.js"></script>
<script src="javascript/controllers/HomeController.js"></script>
<script src="javascript/controllers/calHeatmap.js"></script>
<script src="javascript/highchart-ng.js"></script>
</head>
<body ng-app="myApp">
<div class="container" ng-view="home"></div>
</body>
</html>
I am getting this error as of now.
Rename your module to myApp. You do not have controller defined. Define calHeatmap controller in the script.
While compiling page in angular, it searches for myApp as you wrote that in ng-app directive, as it is not available there angular is is throwing $moduler exception
As you are using calHeatmap as module, you should have
ng-app="calHeatmap"

Using wijmo event calender with angularjs

Hell, I'm trying to use the wijmo event calender with the AngularJS liabry, but the appointments binding isn't working correctly.
This is my html:
<html>
<head>
<title>Control Tests</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet"
title="metro-jqueryui" type="text/css" />
<link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.7.min.js" type="text/javascript"></script>
<script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.7.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://cdn.wijmo.com/external/globalize.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="http://cdn.wijmo.com/external/angular.wijmo.js" type="text/javascript"></script>
<script src="../../Scripts/Controller/MainController.js" type="text/javascript"></script>
</head>
<body>
<script>
$(document).ready(function () {
$(".wijevcal").wijevcal();
});
</script>
<div ng-app ng-controller="MainController">
<div class="wijevcal" appointments="{{calAppointments}}"></div>
</div>
</body>
</html>
And this is the source of the Controller:
function MainController($scope)
{
$scope.calAppointments = [{
start: new Date(2013, 5, 23, 15, 30)
}];
}
Can someone tell me, why the start date isn't applied to the calendar?
Yes, you need to add the Wijmo module in order to use the custom directives provided by Wijmo.
I fixed it on my own.
I had to call
var app = angular.module("MyApp", ["wijmo"]);
at the beginning of the script and now I can use the tag
<wijevcal></wijevcal>

How to include Ext JS in Jasmine test

I'm new with Jasmine. I would like to test a Ext JS application.
When I'm running the test, the browser throw the following:
ReferenceError: Ext is not defined over the line Ext.create('xxxx.application.store.SystemHealth');
This is my SpecRunner.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Jasmine Spec Runner</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine- 1.3.1/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>
<!--include source files here... -->
<!--<script type="text/javascript" src="spec/SpecHelper.js"></script>-->
<!--<script type="text/javascript" src="specs/example.spec.js"></script>-->
<!-- include spec files here... -->
<!--<script type="text/javascript" src="src/Player.js"></script>-->
<!--<script type="text/javascript" src="src/Song.js"></script>-->
<script type="text/javascript" src="src/SystemHealth.js"></script>
<script type="text/javascript">
(function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
var htmlReporter = new jasmine.HtmlReporter();
jasmineEnv.addReporter(htmlReporter);
jasmineEnv.specFilter = function(spec) {
return htmlReporter.specFilter(spec);
};
var currentWindowOnload = window.onload;
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
execJasmine();
};
function execJasmine() {
jasmineEnv.execute();
}
})();
</script>
</head>
<body>
I hope it's clear enough.
Example code for writing using jasmine lib in ExtJS:
<head>
<title>Extjs - Unit testing demo</title>
<link rel="stylesheet" type="text/css" href="app-test/lib/jasmine-1.3.1/jasmine.css"></link>
<script type="text/javascript" src="../ext4.1.3/ext-debug.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine.js"></script>
<script type="text/javascript" src="app-test/lib/jasmine-1.3.1/jasmine-html.js"></script>
<!-- specs test files -->
<script type="text/javascript" src="app-test/specs/example.js"></script>
<script type="text/javascript" src="app-test/specs/users.js"></script>
<!-- Extjs app launcher -->
<script type="text/javascript" src="app-test.js"></script>
</head>
<body></body>
Hope it helps!!
thanks, yes i needed to add to add the following lines:
<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-
gpl/ext-all-dev.js"></script>
<script src="../../../../../../.ext-js/sencha-ext-js-4.1.1a/ext.js"
type="text/javascript"></script>

Changing Pie chart proportions using jChartFX

any ideas how to change the chart proportions relative to its parent chart div?
Currently it looks like this
... and it should look something like this
The code used as a base for this example can be found here
http://support.softwarefx.com/jChartFX/article/2501235#27182674-0690-e211-84a5-0019b9e6b500
HTML
<!DOCTYPE html>
<html>
<head>
<title>Customized Tooltips</title>
<link rel="stylesheet" type="text/css" href="http://www.jchartfx.com/libs/v7/current/styles/jchartfx.css"/>
<link rel="stylesheet" type="text/css" href="sample.css"/>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector3d.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<script type="text/javascript" src="http://www.jchartfx.com/libs/v7/current/js/jchartfx.animation.js"></script>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div id="ChartDiv1" style="width:550px;height:400px;display:inline-block"></div>
</body>
</html>
var chart1;
function onLoadDoc() {
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
chart1.getAnimations().getLoad().setEnabled(true);
var pie = chart1.getGalleryAttributes();
pie.setExplodingMode(cfx.ExplodingMode.First);
chart1.getView3D().setEnabled(true);
chart1.getLegendBox().setVisible(true);
//...
}
You can use the margin properties:
chart1.getPlotAreaMargin().setTop(0);
chart1.getPlotAreaMargin().setBottom(0);
chart1.getPlotAreaMargin().setRight(0);
chart1.getPlotAreaMargin().setLeft(0);

Categories