Loading Highcharts within an angular application - javascript

I am trying to replicate the chart found here: http://jsfiddle.net/pablojim/Hjdnw/ within my angular app.
However, unlike in the example above, i am using version 1.2.28 instead of v1.0..
I have replicated my set up here: http://plnkr.co/edit/ugIbk80yBXuvjsUFhiiP?p=preview
However i am getting 2 errors in the console:
TypeError: HighchartsAdapter is undefined
Error: H is not a function
Does the order of script loading matter? I am following:
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js#1.2.x"></script>
<script src="highcharts.js"></script>
<script src="highcharts-ng.js"></script>
<script src="app.js"></script>

You need to add jQuery to make highcharts work properly
See working plunkr
I've added
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

Related

highchart heatmap TypeError: can't convert undefined to object

The last update from Highcharts Basic v8.1.0 (2020-05-05) breaks my code.
I have different charts (highcharts and highstocks mixed) on one page (plain static HTML website). I include them with:
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
I got an error: TypeError: can't convert undefined to object in the heatmap.src.js.
I tested it with the previous version and the includes are working.
Here is the fiddle https://jsfiddle.net/n9ekhmb0/.
How do fix that? Should I change the order of the includes?

jSignature is not a function

I'm trying to use jSignature in my website, but it keeps showing me this error:
Uncaught TypeError: $(...).jSignature is not a function
My code is:
<div id="signature"></div>
$("#signature").jSignature();
I have Jquery 1.11.1:
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
The Jquery is called before the JS of the function.
I have also tried to call Jquery Mobile, calls like $('#signature').jSignature({'UndoButton':false,color:"#000000",lineWidth:5});, etc but it never works.
Can anyone help ?
Well, i fixed the problem.
The problem was: I had the Jquery 1.12.4 in my plugins file. It would work normal in any page, but with the jSignature it made the JS throw an error.
I removed the Jquery from the Plugins ( but keeped the CDN one ) and now it works fine.
I already found many questions about this but never an answer.
Hope this helps anyone out there.
Many Thanks
i use jQuery 3.4, had the same issue. Im not quite sure where the problem came from but it was the phantom.
First i added all recommended libs to my project and accessed the element as used to:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
...
$(`#id`).jSignature();
I received the same jSignature is not a function
Afterwards i assumed the problem might be in jQuery version compatability, so added few lines:
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="/jSignature.min.noconflict.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
var jq_1_12 = $.noConflict(true)
</script>
...
jq_1_12(`#id`).jSignature();
it was keeping throw the same error jSignature is not a function.
Finally
I removed the last changes and jquery 1.12 import. The problem solved it-self, have no idea what have happened. But the plugin works now without any explicable reason

Which files are need from Kendo core to use Mobile and Angular?

I have seen similar questions to this, but I haven't been able to find an answer. Anyway, I am experimenting using Kendo (open source core for now) in a Visual Studio Cordova project. Taking Cordova out of the equation to start with, I am just trying to get a very simple view with the following to work..
...
<script src="lib/kendo-ui-core/js/jquery.min.js"></script>
<script src="lib/angularjs/angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.core.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.loader.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.view.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.pane.js"></script>
<script src="lib/kendo-ui-core/src/js/kendo.mobile.application.js"</script>
</head>
<body kendo-mobile-application ng-app="foo">
<kendo-mobile-view ng-controller="MyCtrl" k-title="'My Title'" k-layout="'default'">
<kendo-mobile-header>
<kendo-mobile-nav-bar>
<kendo-view-title></kendo-view-title>
</kendo-mobile-nav-bar>
</kendo-mobile-header>
<div>{{hello}}</div>
</kendo-mobile-view>
<script>
angular.module("foo", [ "kendo.directives" ])
.controller("MyCtrl", function($scope) {
$scope.hello = "Hello World!";
});
</script>
<script src="scripts/index.js"></script>
</body>
</html>
I added each Kendo file to try and get rid of each error (initially just started with kendo.core.js)
At this stage, when I try to run this (just opening index.html in Chrome, out side of Visual Studio), I get
Uncaught TypeError: kendo.ViewContainer is not a function
Observable.extend.init # kendo.mobile.view.js:469
Widget.extend.init # kendo.mobile.pane.js:102
startHistory # kendo.mobile.application.js:171
So this is occuring at the line
that.viewContainer = new kendo.ViewContainer(that.container);
in the file kendo.mobile.view.js.
I don't seem to be able to find where ViewContainer is declared.
If I use a CDN of like <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"> then this works fine, so I need to know which references to use from the core library.
I found the doco that explains what I need here.
I added everything for the "Application" section (in the exact order listed), and then put
<script src="lib/kendo-ui-core/src/js/kendo.angular.js"></script>
at the end.

JavaScript fullCalendar plugin reading 'applyAll' as undefined in gcal.js

I am attempting to use the google calendar module of the fullcalendar plugin in JavaScript. When I attempt to load the google calendar, the console is displaying:
Uncaught TypeError: Cannot read property 'applyAll' of undefined
The error is occurring on line 23 of gcal.js:
21| var fc = $.fullCalendar;
22| console.log($.fullCalendar);
23| var applyAll = fc.applyAll;
The console.log() that I have added returns $.fullCalendar as undefined, and then fc.applyAll is also returning undefined. My knowledge of JS is not good enough to fully understand what is going on in this file, and I am not sure what is going wrong.
Here is my html:
<head>
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/gcal.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<link href='style.css' rel='stylesheet' />
</head>
<body>
<div id='calendar'></div>
</body>
My JavaScript:
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'my-api-key',
events: {
googleCalendarId: 'my-calendar-id'
}
});
});
And I have downloaded the most recent version of gcal.js (there seemed to be a problem with the file, and the site provided a link to the most up to date version).
The problem is with the order you've imported the library files.
fullcalendar is a jQuery plugin, which usually means it will end up as a property on the jQuery object e.g. $.fullCalendar.
Now, the gcal file depends on that property being there, so that it can access the .applyAll method on it, however, you're loading gcal.js before you load fullcalendar.js.
If you change the ordering like this, it works without problems.
<script src='fullcalendar/lib/jquery.min.js'></script>
<script src='fullcalendar/lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
<script src='fullcalendar/gcal.js'></script>
As a rule of thumb, try and put the files that you know have no dependencies (they don't rely on another library) first.

jQuery Toggles Plugin (Toggle Buttons)

I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/
See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**

Categories