How to create PDF from json file created by highcharter export_hc function

67 Views Asked by At

I need to create a PDF (or SVG first then the PDF if it is not possible) from a json file created by the export_hc function of Highcharter (Highcharts for R).

The file exported by the export_hc function looks like this and is saved as hc_barplot_is_blue.js :

{
  "chart": {
    "reflow": true
  },
  "title": {
    "text": null
  },
  "yAxis": {
    "title": {
      "text": "value"
    },
    "type": "linear"
  },
  "credits": {
    "enabled": false
  },
  "exporting": {
    "enabled": false
  },
  "boost": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "label": {
        "enabled": false
      },
      "turboThreshold": 0,
      "showInLegend": false
    },
    "treemap": {
      "layoutAlgorithm": "squarified"
    },
    "scatter": {
      "marker": {
        "symbol": "circle"
      }
    }
  },
  "series": [
    {
      "group": "group",
      "data": [
        {
          "month_name": "Jan",
          "value": 12,
          "y": 12,
          "name": "Jan"
        },
        {
          "month_name": "Feb",
          "value": 34,
          "y": 34,
          "name": "Feb"
        },
        {
          "month_name": "Mar",
          "value": 48,
          "y": 48,
          "name": "Mar"
        },
        {
          "month_name": "Apr",
          "value": 46,
          "y": 46,
          "name": "Apr"
        },
        {
          "month_name": "May",
          "value": 23,
          "y": 23,
          "name": "May"
        },
        {
          "month_name": "Jun",
          "value": 10,
          "y": 10,
          "name": "Jun"
        }
      ],
      "type": "column",
      "tooltip": {
        "headerFormat": "",
        "pointFormat": "<strong><i>Month: {point.month_name}<\/i><br/>Value : {point.value}<\/strong>"
      },
      "color": "blue"
    }
  ],
  "xAxis": {
    "type": "category",
    "title": {
      "text": "month_name"
    },
    "categories": null
  }
}

I you copy/paste this code in http://export.highcharts.com/ and choosing PNG or PDF export, you can see the barplot.

An old solution was with phantomjs v2.1.1 (discontinued) and the 2 js files highcharts-convert.js (v3.0.1 2012-11-02) and highcharts.js (v9.3.1 2021-11-05) coming from last highcharter R package.

The command line looks like :

export OPENSSL_CONF=/dev/null && phantomjs highcharts-convert.js -infile hc_barplot_is_blue.js -outfile barplot_blue.pdf -resources highcharts.js

The barplot_blue.pdf file is the barplot in a PDF file looking good.

Now I try the same thing with a boxplot instead a barplot, here is the boxplot code saved as hc_boxplot_is_red.js :

{
  "chart": {
    "reflow": true,
    "type": "bar"
  },
  "title": {
    "text": null
  },
  "yAxis": {
    "title": {
      "text": null
    }
  },
  "credits": {
    "enabled": false
  },
  "exporting": {
    "enabled": false
  },
  "boost": {
    "enabled": false
  },
  "plotOptions": {
    "series": {
      "label": {
       "enabled": false
     },
     "turboThreshold": 0,
      "marker": {
        "symbol": "circle"
      },
      "showInLegend": false
    },
    "treemap": {
      "layoutAlgorithm": "squarified"
    }
  },
  "xAxis": {
    "type": "category",
    "categories": ""
  },
  "series": [
    {
      "name": null,
      "data": [
        {
          "name": "setosa",
          "low": 4.3,
          "q1": 4.8,
         "median": 5,
          "q3": 5.2,
          "high": 5.8
        },
        {
          "name": "versicolor",
          "low": 4.9,
          "q1": 5.6,
          "median": 5.9,
          "q3": 6.3,
          "high": 7
        },
        {
          "name": "virginica",
          "low": 5.6,
          "q1": 6.2,
          "median": 6.5,
          "q3": 6.9,
          "high": 7.9
        }
      ],
      "type": "boxplot",
      "id": null,
      "color": "red"
    },
    {
      "name": null,
      "data": [
        {
          "name": "virginica",
          "y": 4.9
        }
      ],
      "type": "scatter",
      "linkedTo": null,
      "color": "red"
    }
  ]
}

I you copy/paste this code in http://export.highcharts.com/ and choosing PNG or PDF export, you can see the boxplot.

I use the same command line to export as PDF :

   export OPENSSL_CONF=/dev/null && phantomjs highcharts-convert.js -infile hc_boxplot_is_red.js -outfile boxplot_red.pdf -resources highcharts.js

It throw an error : missingModuleFor: boxplot'

Googling it, it appears that I need to use highcharts-more.js instead of highcharts.js :

   export OPENSSL_CONF=/dev/null && phantomjs highcharts-convert.js -infile hc_boxplot_is_red.js -outfile boxplot_red.pdf -resources highcharts-more.js

But it throw now this error :

Exited with message 'ERROR: TypeError: undefined is not an object (evaluating 'c.addEvent')'

But no clue Googling it...

As phantomjs, higchart-convert.js, higcharts.js and highcharts-more.js are on different version and some discontinued, I want to figure out a new solution maybe with jsPDF or Puppetteer or another tool...

I want to use command line with input as the 2 files given below (barplot and boxplot) having the 2 plots in the same PDF as output.

Thanx a lot for your help

0

There are 0 best solutions below