Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Notifications
Mark all as read
Q&A

What in the HTML is preventing CutyCapt from capturing Altair output

+1
−0

Question

I am using Altair to generate plots using python and pandas.

What is preventing CutyCapt from capturing the plot in the html output? CutyCapt writes a blank png.

MWE

I am outputting the .html with:

import pandas as pd
import numpy as np
import altair as alt

df = pd.DataFrame(np.random.rand(9, 4), columns=['a', 'b', 'c', 'd'])
chart = alt.Chart(df).mark_rect().encode(x="a", y="b", color="c")
chart.save("chart.html")
<!DOCTYPE html>
<html>
<head>
  <style>
    .error {
        color: red;
    }
  </style>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.17.0"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    (function(vegaEmbed) {
      var spec = {"config": {"view": {"continuousWidth": 400, "continuousHeight": 300}}, "data": {"name": "data-6c11c789e79447bd33f40ab5297026c0"}, "mark": "bar", "encoding": {"color": {"field": "c", "type": "quantitative"}, "column": {"field": "d", "type": "quantitative"}, "x": {"field": "a", "type": "quantitative"}, "y": {"field": "b", "type": "quantitative"}}, "$schema": "https://vega.github.io/schema/vega-lite/v4.17.0.json", "datasets": {"data-6c11c789e79447bd33f40ab5297026c0": [{"a": 0.43013233092833025, "b": 0.27177562529259736, "c": 0.7602015609177942, "d": 0.7311027236752722}, {"a": 0.894326631632603, "b": 0.03363221098772784, "c": 0.18814991203464904, "d": 0.5393661900335383}, {"a": 0.30590885228454956, "b": 0.1385903758177215, "c": 0.20056187049212693, "d": 0.13268538054066925}, {"a": 0.09132915272098341, "b": 0.9845830859947132, "c": 0.6791784948328378, "d": 0.05039662079042395}, {"a": 0.00944981386743815, "b": 0.10108020124530159, "c": 0.4801936562280591, "d": 0.43678812317642346}, {"a": 0.05018673810031582, "b": 0.29888889102896976, "c": 0.5222334542811063, "d": 0.4906103305668549}, {"a": 0.2495239862021631, "b": 0.7968424707238418, "c": 0.8158713304939001, "d": 0.967112428010773}, {"a": 0.4381679547570413, "b": 0.6255343076920125, "c": 0.5378408088777088, "d": 0.4457264895608548}, {"a": 0.4608296926507556, "b": 0.8631528978904349, "c": 0.23770018368776014, "d": 0.3865998252162157}]}};
      var embedOpt = {"mode": "vega-lite"};

      function showError(el, error){
          el.innerHTML = ('<div class="error" style="color:red;">'
                          + '<p>JavaScript Error: ' + error.message + '</p>'
                          + "<p>This usually means there's a typo in your chart specification. "
                          + "See the javascript console for the full traceback.</p>"
                          + '</div>');
          throw error;
      }
      const el = document.getElementById('vis');
      vegaEmbed("#vis", spec, embedOpt)
        .catch(error => showError(el, error));
    })(vegaEmbed);

  </script>
</body>
</html>

I am running CutyCapt using this script:

#!/bin/sh

if [[ $# -eq 0 ]]
then
    echo "No arguments were provided. Specify files to convert."
    exit 1
fi

for file in "$@"
do
    if [[ "$file" == *".html" ]]
    then
        in=`realpath $file`
        out=${in/".html"/".png"}

        /usr/bin/CutyCapt --url=file://$in --out=$out

        echo "`basename $in` -> `basename $out`"
    fi
done

stored as an executable:

xclip -o /usr/local/bin/htmltopng

and run with:

htmltopng chart.html

Tried

I have tried specifying options as per this answer, changing the call to:

/usr/bin/CutyCapt --javascript=on --java=on --plugins=on --js-can-open-windows=on --js-can-access-clipboard=on --delay=10000 --url=file://$in --out=$out
Why does this post require moderator attention?
You might want to add some details to your flag.
Why should this post be closed?

0 comment threads

0 answers

Sign up to answer this question »