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
0 answers
0 comment threads