Giter Club home page Giter Club logo

Comments (12)

larsac07 avatar larsac07 commented on August 27, 2024

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.

pamelafox avatar pamelafox commented on August 27, 2024

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.

larsac07 avatar larsac07 commented on August 27, 2024

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.

jacobweber avatar jacobweber commented on August 27, 2024

Also looking for a way to do this.

from node-export-server.

TorsteinHonsi avatar TorsteinHonsi commented on August 27, 2024

@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.

 avatar commented on August 27, 2024

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.

matheenkhan avatar matheenkhan commented on August 27, 2024

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.

 avatar commented on August 27, 2024

any updates on this?

from node-export-server.

TorsteinHonsi avatar TorsteinHonsi commented on August 27, 2024

@gvaartjes This needs attention.

from node-export-server.

cvasseng avatar cvasseng commented on August 27, 2024

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.

sesolaga avatar sesolaga commented on August 27, 2024

@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.

pawelfus avatar pawelfus commented on August 27, 2024

Answered in #186

from node-export-server.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.