Comments (12)
HI, @pamelafox. I cannot reproduce the issue with the fiddle you provided (tries to get an old version of Highcharts from a URL that does not exist). However: the same JS works just fine with a more recent Highcharts version: http://jsfiddle.net/ZZ7Kd/304/. Hope this helps :)
from node-export-server.
Ah, sorry, I had fixed the JS include in my own version. What I mean is that the images do not render when piped through the server. Here's the server code:
var chartOptions = {
chart: {
renderTo: 'container',
marginRight: 80,
type: 'spline'
},
xAxis: [{
tickWidth: 0,
lineWidth: 0,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
}],
series: [
{
data: [
{ y: 29.9 },
{ y: 71.5 },
{ y: 106.4 },
{ y: 129.2 },
{ y: 144.0 },
{ y: 176.0 },
{ y: 135.6 },
{ y: 148.5 },
{ y: 216.4 },
{ y: 194.1 },
{ y: 95.6 },
{ y: 54.4 }
]
},
{
data: [
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/snow.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }},
{ y: 220, marker: { symbol: 'url(http://www.highcharts.com/demo/gfx/sun.png)' }}
],
type: 'scatter'
}
]
};
var exportSettings = {
'type': 'png',
options: chartOptions
};
Highcharts.initPool({maxWorkers: 2});
Highcharts.export(exportSettings, function(err, res) {
Highcharts.killPool();
if (res) {
resolve(res.data);
} else {
reject(new Error(err));
}
});
from node-export-server.
Yes, it seems that the export server prematurely renders an image of the chart when producing an SVG from a Highcharts config. Exporting a chart via the export menu sends the chart SVG and not the config to the server, which seems to work fine.
from node-export-server.
Also looking for a way to do this.
from node-export-server.
@cvasseng with the old PhantomJS script we looked for references to online image files in the source, downloaded them first, then returned the snapshot once all image files were loaded.
from node-export-server.
For me it doesn't work to render images in callback as well.
This my callback
function(chart) { chart.renderer.image('https://www.highcharts.com/samples/graphics/sun.png', 100, 100, 30, 30).add(); }
which I call like this
highcharts-export-server --infile /home/highChartsExportImages/0/1439-1000.js --callback ...Resources/js/logoCallback.js --type pdf --outfile /home/highChartsExportImages/0/1439.pdf
from node-export-server.
Facing the same issue. Such as for the following JSON data structure,
"series":[{"data":[{"y":0.06,"x":3.5815,"marker":{"symbol":"url(https://www.highcharts.com/samples/graphics/sun.png)","width":40,"height":40}}}]
The rendering is inconsistent in the sense that it loads at times and doesn't at others. I am assuming the highchart export server returns the graph much before the images from the URL are loaded onto it.
Alternatively, is there any other way to load images as markers onto the graph by passing such a parameter in the JSON file?
from node-export-server.
any updates on this?
from node-export-server.
@gvaartjes This needs attention.
from node-export-server.
Commit cf04c66 implements a wait poll that waits for images to finish loading. It will timeout if the images aren't loaded within 2 seconds.
from node-export-server.
@cvasseng Can you please, reopen this? I'm facing the same issue - the SVGs used in markers are loaded like 2 times out of 10:
"series": [
{
"type": "line",
"lineWidth": 0,
"data": [
{
"x": 1592586000000,
"y": 86,
"marker": {
"symbol": "url(https://dots.dataontouchdev.com/images/weather/yr_weather_symbols/svg/01d.svg)",
"width": 40,
"height": 40
}
},
...
from node-export-server.
Answered in #186
from node-export-server.
Related Issues (20)
- The Google fonts are not installed on the production server HOT 1
- The width and height are only taken from sourceHeight HOT 1
- column chart export https://export.highcharts.com/ 500 error HOT 1
- Cannot add series-on-point module to the export server HOT 3
- Highcharts.AST.allowedAttributes HOT 8
- Preview and download are not generating in windows HOT 2
- Different export results on the first and the second requests HOT 1
- Previous version output result error HOT 6
- v3: compiled CLI via pkg not working HOT 6
- Image with URL included in the exported chart only sporadically HOT 1
- Chart being not rendering correctly in case of file format: image/svg+xml HOT 3
- Chart options object is not available in the customCode context in current node-export-server (master) HOT 5
- Please add tags to repo which correspond to the current version HOT 2
- v4: dist folder missing HOT 4
- Startup error: no such file or directory, open '/usr/lib/node_modules/highcharts-export-server//msg/startup.msg HOT 2
- v4 'cachePath' with absolute path HOT 1
- v4: outdated example for Node.js module usage HOT 1
- v4: getting error HOT 6
- v4: make userDataDir configurable HOT 1
- Export server run issue for multiple request HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from node-export-server.