Develop Reference

Problem injecting variable-pie chart with highcharts-export-server

I'm using Highcharts Export Server as a Node.js module to produce charts in PNG format. When I include a Variable Radius Pie Chart though, I get an error in the resulting File. The error is Highcharts error #17:
The requested series type does not exist.
This error happens when you are setting chart.type or series.type to a series type that isn't defined in Highcharts. A typical reason may be that your are missing the extension file where the series type is defined, for example in order to run an arearange series you need to load the highcharts-more.js file.
The chart I'm using is part of the highcharts-more module, so the error makes sense. I even found docs that seemed to spell out my solution. Thre is a resources option where you can provide scripts for injection to your export. That page is here, but I'll include the important bit below:
-resources
{
"files": "highstock.js,highcharts-more.js,data.js,drilldown.js,funnel.js,heatmap.js,treemap.js,highcharts-3d.js,no-data-to-display.js,map.js,solid-gauge.js,broken-axis.js",
"css": "g.highcharts-series path {stroke-width:2;stroke: pink}",
"js": "document.body.style.webkitTransform = \"rotate(-10deg)\";"
}
files: A comma separated string of filenames that need to be injected to the page for rendering a chart. Only files with the extensions .css and .js are injected, the rest is ignored.
css: css inserted in the body of the page
js: javascript inserted in the body of the page
After some digging, I did find that I could pass this resource option as a JSON stringified object into my export parameters. So, I attempted to inject the remote version of highcharts-more.js.
const exportImagesBase64 = async(data, format = 'png') => {
HighchartsExport.initPool();
let resources = JSON.stringify({
files: "http://code.highcharts.com/highcharts-more.js"
});
let charts = data.map(chart => exportPromise({
type: format, //png
options: chart, //standard highcharts config object
resources //resources option to inject highcharts-more
}));
charts = await Promise.all(charts);
HighchartsExport.killPool();
return charts;
};
const exportPromise = (data) => {
return new Promise((resolve, reject) => {
HighchartsExport.export(data, (err, res) => err ? reject(err) : resolve(res));
});
};
Here is an example of what data might be equal to in the code above
[{
"chart": {
"plotBackgroundColor": null,
"plotBorderWidth": null,
"plotShadow": false,
"type": "variablepie",
"height": 300,
"width": 300
},
"title": {
"text": "Placement Breakdown",
"align": "left",
"x": 30,
"y": 30
},
"tooltip": {
"headerFormat": "",
"pointFormat": "<b> {point.name}</b><br/>Impressions: <b>{point.y}</b><br/>Clicks: <b>{point.z}</b><br/>"
},
"plotOptions": {
"pie": {
"allowPointSelect": true,
"cursor": "pointer",
"dataLabels": {
"enabled": false
},
"showInLegend": true
}
},
"series": [
{
"minPointSize": 10,
"innerSize": "20%",
"zMin": 0,
"data": [
{
"name": "facebook",
"y": 13642,
"z": 357
},
{
"name": "instagram",
"y": 12920,
"z": 326
}
]
}
],
"credits": {
"enabled": false
}
}]
Since adding the resource options, I am still receiving the #17 Highcharts error. Am I thinking about this completely wrong? I can't find any more information out there about this, so I'm hoping someone has some knowledge to share.

The documentation for the variable pie chart type refers to highcharts-more.js as a requirement.
The actual requirement for this chart type appears to be modules/variable-pie.js. Using this additional resource instead should fix issues with "The requested series type does not exist" when exporting.

store the name of a function in a JSON file and later be able to load and call it from within a script?

That title is kind of garbled and this is probably a duplicate but I've been digging a while. This must be really simple. The accepted answer on this question didn't work for me: How to declare and use the name of a function from a json object?
The task: I am trying to externalize the set-up data for a Vis.js timeline into a JSON file . The data set was no problem nor are all of the options except for the function references, "orderByID" and "visTemplate". Those are functions I defined which exist within the script where I am working with the JSON data.
When I try to use the JSON without attempting to convert it, Vis.js complains. When I tried the answer from the question above with the code below, I get the errors show in the image.
This is in Electron and the script is being loaded through a script tag in the index.html.
I await the one-line answer to this simple issue which have spent so much time describing. 😉
console.log(' timelineOptions.order', timelineOptions.order);
console.log(' timelineOptions.template', timelineOptions.template);
console.log('this', this);
console.log('window', window);
timelineOptions.order = window[timelineOptions.orderByID];
timelineOptions.template = window[timelineOptions.visTemplate];
"timelineOptions": {
"order": "orderByID",
"selectable": true,
"zoomable": false,
"width": "100%",
"height": "90%",
"minHeight": 700,
"format": {
"minorLabels": {
"hour": "HH\\h"
}
},
"margin": {
"axis": 20,
"item": 20
},
"start": "2016-12-30",
"end": "2017-01-4",
"template": "visTemplate",
"showCurrentTime": false,
"dataAttributes": "all",
"timeAxis": { "scale": "day", "step": 1 },
"orientation": {
"axis": "top",
"item": "top"
}
}

Not sure if you've setup the right reference on the window object but shouldn't your code read:
timelineOptions.order = window[timelineOptions.order];
You've referenced the string value orderByID instead of the property name you used to set the object up.

Capturing a popup window and download url using casperjs

I am trying to scrape a table from an aspx site using casperjs (a wrapper on phantomjs). One of the table items I need is a link which opens a new page and downloads the PDF. The contents of the TD tag are:
<input type="image" src="images/document.png" alt="View Document" onclick="javascript:__doPostBack('ctl00$mbody$tcManageDocs$tpViewDocs$gv_formData','View$1');return false;">
Once clicked, I have determined that it opens a new window to download the file. Using wireshark, I have captured (relevant parts of) the response to the __doPostBack POST request:
<script type="text/javascript">
//<![CDATA[
window.open('documents/path/to/document.pdf', 'popup_window', 'width=1024,height=768,left=10,top=10,resizable=yes,scrollbars=1,menubar=yes,toolbar=yes');popup_window.print();//]]>
</script>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'Menu1', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
However, when executing the link:
this.click('#mbody_tcManageDocs_tpViewDocs_gv_formData > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(1) > input:nth-child(1)');
I get a Page Error: ReferenceError: Can't find variable: popup_window error when I try to run this.
Is there any way I can capture the window using javascript?
Do I need to capture it in the page context or from the phantomjs/casperjs context?
The relevant data I want to capture is the url only (being 'documents/path/to/document.pdf') as a text stream: I would rather not actually perform the download to reduce the bandwidth/server demand and script execution time.
Being this is my first scraping attempt and I'm trying to learn javascript at the same time, I am stumped as how to proceed: even some direction as to what to try would be helpful.
EDIT: I have captured the events as commented by Artjom: I don't get any notifications for the resource messages, but in popup.loaded I get the following:
popup.loaded
{
"objectName": "WebPage",
"title": "",
"frameTitle": "",
"content": "<html><head></head><body></body></html>",
"frameContent": "<html><head></head><body></body></html>",
"url": "about:blank",
"frameUrl": "about:blank",
"loading": false,
"loadingProgress": 100,
"canGoBack": false,
"canGoForward": false,
"plainText": "",
"framePlainText": "",
"libraryPath": "/usr/share/casperjs/bin",
"offlineStoragePath": "/home/rob/.qws/share/data/Ofi Labs/PhantomJS",
"offlineStorageQuota": 5242880,
"viewportSize": {
"height": 300,
"width": 400
},
"paperSize": {},
"clipRect": {
"height": 0,
"left": 0,
"top": 0,
"width": 0
},
"scrollPosition": {
"left": 0,
"top": 0
},
"navigationLocked": false,
"customHeaders": {},
"zoomFactor": 1,
"cookies": [],
"windowName": "popup_window",
"pages": [],
"pagesWindowName": [],
"ownsPages": true,
"framesName": [],
"frameName": "popup_window",
"framesCount": 0,
"focusedFrameName": "popup_window"
}
Is there something in the casperjs/phantomjs that is failing? I am starting to suspect that the error above is one of the main issues. When I wait for the popup for a while, casperjs times out and I get no further resource events.

Basic Integration of Edge Animate and WordPress

I have a very basic file I created in Edge Animate in which I just fadein and fadeout some text. It's located here:
http://www.threecell.com/demo/simpletext/simpletext.html
Edge Animate exports an HTML file and some JS Files. My question is whether it's possible to make it so that you can update the text in the future using the WordPress framework. I found that the actual text is declared in one of the JS files which I've posted below (the text in question is "THIS IS A TEST".) Ultimately, I'd like to create a WordPress widget that goes into this JS file and changes the text value.
Thanks in advance for any assistance or guidance,
/**
* Adobe Edge: symbol definitions
*/
(function($, Edge, compId){
//images folder
var im='images/';
var fonts = {};
var resources = [
];
var symbols = {
"stage": {
version: "2.0.1",
minimumCompatibleVersion: "2.0.0",
build: "2.0.1.268",
baseState: "Base State",
initialState: "Base State",
gpuAccelerate: false,
resizeInstances: false,
content: {
dom: [
{
id:'Text',
type:'text',
rect:['131','190','auto','auto','auto','auto'],
text:"THIS IS A TEST",
font:['Arial, Helvetica, sans-serif',24,"rgba(0,0,0,1)","normal","none",""]
}],
symbolInstances: [
]
},
states: {
"Base State": {
"${_Stage}": [
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "overflow", 'hidden'],
["style", "height", '400px'],
["style", "width", '550px']
],
"${_Text}": [
["style", "top", '200px'],
["style", "opacity", '0'],
["style", "left", '197px']
]
}
},
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 1500,
autoPlay: true,
timeline: [
{ id: "eid7", tween: [ "style", "${_Text}", "opacity", '1', { fromValue: '0'}], position: 0, duration: 1500 },
{ id: "eid4", tween: [ "style", "${_Text}", "left", '297px', { fromValue: '197px'}], position: 0, duration: 1500 },
{ id: "eid5", tween: [ "style", "${_Text}", "top", '193px', { fromValue: '200px'}], position: 0, duration: 1500 } ]
}
}
}
};
Edge.registerCompositionDefn(compId, symbols, fonts, resources);
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
Edge.launchComposition(compId);
});
})(jQuery, AdobeEdge, "EDGE-2538351");

You will have to create a plugin and use the Widgets_API.
In the frontend, the widget will use wp_enqueue_script to load simpletext_edgePreload.js. And then pass your text values as JavaScript data with wp_localize_script.
You'll finally be able to use something like this in your JS file: text:my_data.text.
A shortcode example: Wordpress Javascript File SRC File Path.
A widget example: Conditionally enqueue a widget's script/stylesheet in HEAD

Using require() in a remotely-hosted node-webkit application

I have a package.json file that looks like:
{
"name": "title",
"description": "description",
"version": "0.1",
"main": "https://path-to-application/",
"window": {
"show": true,
"toolbar": false,
"frame": true,
"position": "center",
"width": 800,
"height": 600,
"min_width": 220,
"min_height": 220
}
}
But when I attempt to run the code:
var GUI = null;
var win = null;
try { GUI = require('nw.gui'); win = GUI.Window.get(); } catch (ex) { }
win.toggleFullscreen();
Nothing happens, adding alerts for GUI and win show they are both set to null. When I run the same code from an index.html file within the same .zip as package.json it works as expected. It appears to be failing with the initial call to require().
Is there some way to get this working in a remotely hosted application?

I was able to solve this following by adding the node-remote field to the package.json file if anyone else runs into this issue.