I'm using highcharts-ng, trying to do client side pdf download and keep getting Unsupported export format on this platform: application/pdf. If I use the highcharts server to generate the pdf it works fine.
options: {
exporting: {
type: 'application/pdf'
}
},
func: function() {
// button handler
$('#vehicle-conversion-pdf-btn').click(function () {
var chart = $('#vehicle-conversion').highcharts();
chart.exportChart();
});
}
I'm also loading the plugin last.
I had a problem almost like this.
I had been imported "highcharts-export-clientside.js" to my web page, but it didn't work. (from this documentation )
my problem fixed with this line :
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
Altogether you must have this imports in your html file :
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
Related
I am using a JS script which, if it would work, would display a booking calendar. I tried using the script on a simple page and it works. Implementing it in my Wordpress site gives me an error:
Failed to instantiate module Office due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.0/$injector/nomod?p0=Office
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:21:412
at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:21:53)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:21:296
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:35:185
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:35:33)
at Jb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:38:269)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:18:3)
at rc (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js:18:316
It complains about not being able to load the module Office. The way it is added it this (see pastebin below for the full script):
$("html").attr("ng-app", "Office");
This is how I was told to load the booking calendar:
<script type='text/javascript'>
var V = {
setup: {
module: '.booking_with_calendar/KAR18',
memberid: 5678,
lang: 'de'
}
};
V.setup.bookingOptions = {
tracking: {
channelid: 1234
}
};
</script>
<script type="text/javascript" async src="https://www.mydomain/js/ex.js"></script>
The content of ex.js looks like this: https://pastebin.com/T6Ati96k
Any idea why it can not load the Office module in my Wordpress and what I could do about it?
Thanks!
We are using nextJs application. We need to apply async for all existing script tags. I have tried a lot. any once can help me on this.
<script src="/_next/static/chunks/webpack.js?ts=1634913314210"></script>
<script src="/_next/static/chunks/main.js?ts=1634913314210"></script>
<script src="/_next/static/chunks/pages/_app.js?ts=1634913314210"></script>
after modification
<script src="/_next/static/chunks/webpack.js?ts=1634913314210" async></script>
<script src="/_next/static/chunks/main.js?ts=1634913314210" async></script>
<script src="/_next/static/chunks/pages/_app.js?ts=1634913314210" async></script>
If you are running NextJS v10.2.1 or newer, you can tell NextJS to render these resources with defer instead of async by setting the following flag in your next.config.js:
module.exports = {
experimental: { disableOptimizedLoading: true },
}
Note that this will only disable async tags for production builds, not development builds. Moreover, it also changes some other mechanisms related to script loading.
For more details, check out the implementation of _document.tsx getScripts, which exposes this method as a NextScript component. If you want to have more fine-grained control over these script tags, you can provide your own implementation of the getScripts method by implementing your own version of NextScript.
Below is an example I pulled from this relevant issue on the NextJS GitHub project. You may also want to read into that thread a little bit to better understand how async works in this context.
class DeferredNextScript extends NextScript {
getScripts() {
return super.getScripts().map(script => {
return React.cloneElement(script, {
key: script.props.src,
defer: true,
async: false,
})
})
}
getDynamicChunks() {
return super.getDynamicChunks().map(script => {
return React.cloneElement(script, {
key: script.props.src,
defer: true,
async: false,
})
})
}
}
I am trying to add Google Analytics to my react app and I have the Script tag in the head of the HTML file but I want this part of the script to be conditionally rendered. I don't want to use any dependencies if I can help it. The code below is what I am using but I get a Parsing Error. Can anyone shed any light on my dilemma?
import React from 'react';
interface IGoogleAnalytics {
arguments?: any
}
const GoogleAnalytics: React.FC<IGoogleAnalytics> = () => {
return (
<script>
{
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date;
ga('create', 'UA-000000000-1', 'auto');
ga('send', 'pageview');
}
</script>
)
}
export default GoogleAnalytics
if you don't want use any dependence, so move your script tag to HTML file after Google Analytics script file.
<script src="link to Google Analytics script" />
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};
ga.l=+new Date;
ga('create', 'UA-000000000-1', 'auto');
ga('send', 'pageview');
</script>
I'm building a react app with webpack and i need to incorporate arcgis maps into a react component. I have know idea how to bring this into my project. I've tried creating an arcgis directory with an index.js of the built javascript and trying to reference that:
import {Map} from 'arcgis/index'
That doesn't work. I then just tried to include the css/js script tags directly into my index.html but when I try to require them, like in the example, webpack obviously can't find them. Is there some way to tell webpack to ignore require calls in my src file so it gets handled by the browser? I'm trying and failing at doing the following:
import React from 'react'
export default class EsriMap extends React.Component {
componentDidMount() {
const _this = this
require(["esri/map", "dojo/domReady!"], function(Map) {
var map = new Map(_this.refs.map, {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
});
}
render() {
return (
<div ref="map"></div>
)
}
}
You may want to try this https://github.com/tomwayson/esri-webpack-babel .
This method is nice because it doesn't bog down the build. You pull in the ESRI Api from the CDN, and tell webpack that it's an external.
//Add this...
externals: [
// Excludes any esri or dojo modules from the bundle.
// These are included in the ArcGIS API for JavaScript,
// and its Dojo loader will pull them from its own build output
function (context, request, callback) {
if (/^dojo/.test(request) ||
/^dojox/.test(request) ||
/^dijit/.test(request) ||
/^esri/.test(request)
) {
return callback(null, "amd " + request);
}
callback();
}
],
//And this to you output config
output: {
libraryTarget: "amd"
},
When your app loads you bootstrap you webpack modules using Dojo in a script tag.
<!-- 1. Configure and load ESRI libraries -->
<script>
window.dojoConfig = {
async: true
};
</script>
<script src="https://js.arcgis.com/4.1/"></script>
<!-- Load webpack bundles-->
<script>
require(["Angular/dist/polyfills.bundle.js", "Angular/dist/vendor.bundle.js", "Angular/dist/app.bundle.js"], function (polyfills, vendor, main) { });
</script>
I've got it working with an Angular 2 App I'm working on. The only downside is I haven't yet got the unit tests to run right using Karma. I've only been working on that a few hours now.. Hope to have a solution to the testing issue soon.
#getfuzzy's answer will work well as long as you don't need to lazy load the ArcGIS API (say for example only on a /map route).
For that you will want to take the approach I describe in this answer
This blog post explains why you need to use one of these two approaches and explains how they work as well as the pros/cons of each.
I think you can try using bower version of esrijsapi. Doc link
I've been trying to get this to work for ages, but no matter what I do the directive can't find my react component.
These are the files I'm including:
<script src="bower_components/react/JSXTransformer.js"></script>
<script src="bower_components/react/react-with-addons.js"></script>
<script src="bower_components/ngReact/ngReact.min.js"></script>
<script src="node_modules/babel-core/browser.js"></script>
<script src="static/react-components.min.js" type="text/babel"></script>
<script src="static/main.min.js"></script>
Where my components are inside the react-components.min.js file, and all of my angular code is inside main.min.js.
It's stated that you (might(?)) need to use an in browser transformator for this directive to work, so I tried that using babel, but that also doesn't work.
This is my react component:
<react-component name="Chat" watch-depth="reference"></react-component>
And in the react-components.min.js file I got a component called 'Chat':
var Chat = React.createClass({
render: function() {
return <footer className="chat chat--dark">Hello John</footer>;
}
});
core.value('Chat', Chat); // My application is bound to the core module
But it doesn't find it.. What could be wrong because no one else seems to have this issue?
JSX Compilation Issue
I believe it is a compilation error. I ran your code through an online compiler (https://babeljs.io/repl/) swap your current component code out with the block below and see if it works:
"use strict";
var Chat = React.createClass({
displayName: "Chat",
render: function render() {
return React.createElement(
"footer",
{ className: "chat chat--dark" },
"Hello John"
);
}
});
core.value('Chat', Chat); // My application is bound to the core module
JSXTransformer is deprecated you should add in a build step that uses Babel.
https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
Check out my blog post for the breakdown on adding JSX and ES6 support.
http://blog.tylerbuchea.com/migrating-angular-project-to-react/