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
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
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 »

This community is part of the Codidact network. We have other communities too — take a look!

You can also join us in chat!

Want to advertise this community? Use our templates!

Like what we're doing? Support us! Donate