Highcharts export time stop navigating to demo page using angularjs? - angularjs

I am using HighCharts version 6.0.1. Have set up the Highcharts with angularjs server locally for exporting the charts. When download as png/jpeg/pdf is selected from the top right corner of the chart ,
the Highcharts demo page is displayed and i am redirect to other link "https://export.highcharts.com/".
Please let me know what could be the reason for this.
i have add this 2 js link.
<script src="https://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>

Try to use offline-exporting.js instead of exporting.js
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
Full exemple
i hope that help you

Related

AngularJS nvD3 Error - What versions are compatible?

I have the same problem as with this user:
Angular nvD3 Error: Invalid isolate scope definition for directive nvd3
The answer there said "use the latest angularjs" beyond Angular 1.1.4....but I am using the latest AngularJS!! AngularJS v1.6.7
What could I be doing wrong?
Works with this setup
<link rel="stylesheet" href="//unpkg.com/nvd3/build/nv.d3.css"/>
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/d3#3/d3.js" charset="utf-8"></script>
<script src="//unpkg.com/nvd3/build/nv.d3.js"></script>
<script src="//unpkg.com/angular-nvd3/dist/angular-nvd3.js"></script>
DEMO on PLNKR.
See angular-nvd3 Issue #539 - d3 version 4.x is not supported

Angular hybrid app, typeerror calendar.fullcalendar is not a function

I am working on an application that uses AngularJS and Angular (2+). In the new version, I am using system.js to import the Angular app. Without the system.js import the calendar works fine, but with system.js there is a problem to initialize.
I have tried the trick below with calendar = $(elm); with no luck.
https://github.com/angular-ui/ui-calendar/issues/267
Even trying var calendar = $('#calendar’).
The problem does not seem to be in recognizing that there exists a calendar element. From what I can infer logging the framework’s source code, when working correctly, the calendar element has these classes when initializing.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope.fc.fc-cursor.fc-ltr.fc-unthemed
Currently the initialize is trying to use this as the calendar element which throws the angular.min.js:117 TypeError: calendar.fullCalendar is not a function error, it still finds the correct element but does not append the classes to it.
div#calendar.calendar.ng-pristine.ng-untouched.ng-valid.ng-isolate-scope
script.ejs
<!-- jQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<—-! All the AngularJS -—>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-cookies.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-animate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-route.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular-sanitize.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<!-- Moment -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" integrity="sha256-1hjUhpc44NwiNg8OwMu2QzJXhD8kcj+sJA3aCQZoUjg=" crossorigin="anonymous"></script>
<!-- ui calendar -->
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-calendar/1.0.0/calendar.min.js" integrity="sha256-DBa6dvjY39GU4NQ2Ia2CIPVFszxgZ4N3JccyPvJNPLI=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.7.1/fullcalendar.min.js"></script>
AngularJS only app, index.ejs :
<body>
<div id="shell" data-ng-app="app" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
</body>
Hybrid app index.ejs :
<body class="full-width">
<div id="shell" data-ng-controller="shellController">
…
</div>
<%- include partials/scripts %>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err) { console.error('ERR from import: ’,err); });
</script>
</body>
I am using v 2.7.1 of fullcalendar, and v 1.0.0 of angular-ui-calendar. Any help to what might be the cause of this problem would be extremely appreciated, I’ve been looking at this for days!
I found the answer with this post.
How to import fullcalendar v.3.0.1 with systemjs?
Turns out the problem lay in the moment.js file not being within the meta property within the system.js config.

Angular Material Dialog action buttons appear on the top (and not on the bottom)

relevant code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"
And,
$mdDialog.show(
$mdDialog.alert()
.clickOutsideToClose(true)
.title('Please Login')
.textContent('Please use facebook to login to Afsheen before making a purchase.')
.ok('Got it!')
.targetEvent(event)
);
Any idea whats going on ?
You are using both bootstrap and material css together, which is causing the issue, Check the material versions are same,
Here is the working App

AngularJs BootStrap UI Pagination

I am attempting to use bootstrap ui's pagination on and angularjs project. I am receiving error message 'Error: [$injector:modulerr]'. I have been following the example here Angular UI bootstrap pagination not working inside ui.bootstrap.tabs however i'm using json to retrieve data so my code is slightly different.
I've created a Plunker: https://plnkr.co/edit/omQ2qxgkmK5HAkd0wBC6 to display my code.
These are the CDNs I am using for the project:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.1/ui-bootstrap-tpls.min.js">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" crossorigin="anonymous"></script>

Accordion using jquery

how to hide the panel inside the accordion created using JQuery?
js files:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>
code:
jQuery(document).ready(function() {
$(document).ready(function() {
$("#accordion").accordion();
});
Needs:
According to the user login type the panel should hide(including the heading).
Example:
In my example there are three panels inside the accordion. Only i want to show two of them to the user. How to achieve this?
Not sure if this is what you mean, but to allow an accordion panel to be collapsed, you need to set the accordion collapsible property to true. If you want all the panels to be collapsed initially then you need to set the active property to false initially as well.
The jQuery Accordion documentation has a full example on how to do this.
eg
$(document).ready(function(){
$("#accordion").accordion( { active: false, collapsible: true });
});
Find your DOM element and call hide function.
$("#myElementInsideAccordian").hide();
Your error is caused because your files are in the wrong order. core has to come before the accordion file:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.accordion.js"></script>
As far as hiding a Panel goes, first see if the aforementioned fix gets rid of your error, then edit your question to provide more detail into what you want.

Resources