We Keep Coding

Scale down a Konvajs stage without losing quality

Consider having a large (2000x1000) stage with some text in it. The stage gets downscaled to 1000x500 making the text unreadable. Then we try to enlarge the text by zooming it in.
Expected: the text should become readable again at some point.
Actual: the text remains unreadable (blurred) no matter how much we zoom in.
Try zooming the page in (with native browser zoom on desktop) after running the snippet:
const stage = new Konva.Stage({
container: 'container',
width: 2000,
height: 1000,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Text({
x : 50, y : 50, width: 100, height: 100,
fontSize: 12,
text: "This text should be readable when the viewport gets downscaled"
});
layer.add(rect).draw();
stage.scale({x: 0.5, y: 0.5});
stage.setAttrs({width: 1000, height: 500});
stage.draw();
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id="container"></div>
The quality loss can be avoided by downscaling with CSS only, like this:
const stage = new Konva.Stage({
container: 'container',
width: 2000,
height: 1000,
});
const layer = new Konva.Layer();
stage.add(layer);
const rect = new Konva.Text({
x : 50, y : 50, width: 100, height: 100,
fontSize: 12,
text: "This text should be readable when the viewport gets downscaled"
});
layer.add(rect).draw();
stage.getChildren().forEach(function(layer) {
layer.canvas._canvas.style.width = "1000px";
layer.canvas._canvas.style.height = "500px";
layer.hitCanvas.setSize(1000, 500);
layer.hitCanvas.context.scale(0.5, 0.5);
});
stage.draw();
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.6.0/konva.js"></script>
<div id="container"></div>
Note how text becomes readable at a certain level of zooming.
The workaround breaks Konvajs abstraction. What problems it can potentially cause? Is there a better way, which uses only public methods exposed by Konvajs?
In fabric.js it can be done like this (complete example here):
canvas.setDimensions({width: '1000px', height: '500px'}, {cssOnly: true});

Konva is a canvas framework. Canvas is a bitmap image unlike vector elements like SVG. So that "blur" should be expected. Technically to fix the issue you can redraw stage with higher pixelRatio on zoom event:
Konva.pixelRatio = 4
stage.draw();
That code will generate more pixels for canvas element. But the page may be very heavy in RAM in this case because Konva will have to produce very large canvas. In most of the mobile apps, you don't need native zooming and you can use responsive design. For zooming the stage, you can use Konva methods.

chart drawn by chartist is not shown properly using wkhtmltopdf

12.4 to generate a pdf,charts are drawn by chartist,because chartist is svg based. I can see the chart in browser by html(test-chartist.html right chart).But When I user the command wkhtmltopdf --dpi 300 --page-size A4 test-chartist.html test3.pdf, chart is blank in the test3.pdf. And then I add the flowing js , the result is weirdsize is not right and direction is not right too
Function.prototype.bind = Function.prototype.bind || function (thisp) {
var fn = this;
return function () {
return fn.apply(thisp, arguments);
};
};
can anybody help me? thank you very much

OK，I suddenly found out the answer.
If I add width and height to the chart's options, everything is fine, as below:
var options = {
width: 800,
height: 150,
donut: true,
donutWidth: 30,
startAngle: 240,
total: 30,
showLabel: true,
animation:false
};
new Chartist.Pie('#mainImg', {
series: [10,10]
},options);
I hope it can help others.

Change border/background in Google Charts AnnotationChart?

I am trying to change the border/background of an AnnotationChart from Google's Chart library. If I use the standard backgroundColor options, the chart fails to render. Per this discussion, it seems that the backgroundColor options available on other chart types aren't directly accessible on the AnnotationChart, but are available through undocumented options. When I try this, though, the chart is unchanged. Below is the code and resulting chart; any ideas?
Without chart option
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
};
chart.draw(data, options);
With:
var chart = new google.visualization.AnnotationChart(document.getElementById('chart_div'));
var options = {
thickness: 1.5,
displayAnnotations: true,
colors: dataColors,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: {
fill:'black',
stroke: 'white',
strokeSize: 1
},
chartArea: {
backgroundColor: {
fill: 'blue',
stroke: 'red',
strokeSize: 1
}
}
}
};
chart.draw(data, options);
Either way, graph looks like this:

The background color can be set using it like this. Read the documentation here
Edit your code like this
var options = {
displayAnnotations: true,
displayZoomButtons: false,
displayExactValues: false,
displayDateBarSeparator: true,
chart: {
backgroundColor: 'blue',
chartArea: {
backgroundColor: '#FFF000',
},
},
fill: 50,
};
I tried using strokeWidth and stroke but I think it is not being supported yet or I am using it incorrectly.
Working JSFIDDLE

I've had my own issues with the lack of customization options for Google Charts and one workaround is to use Javascript to modify the SVG after it is generated in order to produce the look you want.
I've put together a quick fiddle based on the template Annotation Chart in the Google Charts Reference, but the applicable lines of code are below. It's not pretty (especially if you're using interactive charts, because this requires a MutationObserver to monitor the SVG for changes) but it works and you might be able to clean it up a lot more.
Note: I've noticed interactions with Google Charts (e.g. zooming and panning) tend to bog down a lot in JSFiddle and Codepen etc for some reason, but they're much smoother when used in the wild!
Annotation Chart Fiddle
My Related SO Question
/* One time recoloring of background after SVG creation - for static charts */
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
/* MutationObserver to monitor any changes to SVG and recolor background - for interactive charts */
var observer = new MutationObserver(function(mutations) {
var rects = container.getElementsByTagName("rect")
for(var i=0; i<rects.length; ++i) {
if (rects[i].getAttribute('fill') === '#ffffff') {
rects[i].setAttribute('fill', '#99f');
}
}
});

Google chart legend shrinking text

Here is my code:
var chart = [[''],['']];
chart[0][1]='Spearmint';
chart[1][1]='3.95';
var data = google.visualization.arrayToDataTable(chartArr);
var options = {
title: questions[i].getAttribute("desc"),
is3D: true,
width:600 //with or without this parameter
};
chart = new google.visualization.ColumnChart(document.getElementById('questionchart_' + questions[i].getAttribute("num")));
chart.draw(data, options);
It seems to be cutting off the legend text. You only need to reference the first graph
Here is an image:
Graph Image
If you look closely, you'll see the legends display Sp..... This is inaccurate as it should display the full name of the location (Spearmint).
Here is my DOM Element its using:
<div id="questionchart_1" style="width:750px"></div>
I have no idea how to resolve this issue.

The size of the chartArea needs to be adjusted according to the placement of the legend and the size of the labels that need to be displayed.
Also need to consider the size of the title, axis labels, etc...
Here, I've added a background color to help demonstrate...
google.charts.load('current', {
packages: ['corechart'],
callback: drawChart
});
function drawChart() {
var chartArr = [[''],['']];
chartArr[0][1] = 'Spearmint';
chartArr[1][1] = 3.95;
var data = google.visualization.arrayToDataTable(chartArr);
var options = {
chartArea: {
backgroundColor: 'cyan',
height: 320,
left: 32,
top: 40,
width: 434
},
height: 400,
legend: {
position: 'right'
},
title: 'Flavors',
width: 600
};
var chart = new google.visualization.ColumnChart(document.getElementById('questionchart_0'));
chart.draw(data, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="questionchart_0"></div>

Google charts save zoomed image as PNG

I'm using Google Charts to create a line chart, and I'm using
explorer: {actions: ['dragToZoom', 'rightClickToReset']
to allow the user to zoom in on a bounding box. I'd like to be able to save the zoomed image as a PNG. To do so, I'm trying to find the HAxis values at the left and right edges of the chart and the VAxis values at the top and bottom edges of the chart:
var cli = chart.getChartLayoutInterface();
var hl = cli.getHAxisValue(cli.getChartAreaBoundingBox().left);
var hr = cli.getHAxisValue(cli.getChartAreaBoundingBox().left + cli.getChartAreaBoundingBox().width);
var vt = cli.getVAxisValue(cli.getChartAreaBoundingBox().top);
var vb = ??
Then I'm using these in my options to replot the chart with these limits:
var options = {
width: 1430,
height: 563,
hAxis: {
title: 'X-Axis',
viewWindow: { min: hl, max: hr}
},
explorer: {actions: ['dragToZoom', 'rightClickToReset'], keepInBounds: true, maxZoomIn: .01 },
curveType: "function",
vAxis: {
logScale: log1,
title: "Y-Axis",
titleTextStyle: {color: '#0000FF'},
textStyle: {color: '#0000FF'},
baselineColor: '#0000FF',
viewWindow: { min: vb, max: vt}}
},
title: "Figure 1"
};
var chart = new google.visualization.LineChart(document.getElementById('plot'));
chart.draw(data, options);
drawpng = chart.getImageURI();
return drawpng;
My values for the left, right, and top edges are working correctly, but I can't figure out how to determine the bottom edge. I've already tried
var vb = cli.getVAxisValue(cli.getChartAreaBoundingBox().top - cli.getChartAreaBoundingBox().height)
and
var vb = cli.getVAxisValue(cli.getChartAreaBoundingBox().height)
and
var vb = cli.getVAxisValue(cli.getChartAreaBoundingBox().height - cli.getChartAreaBoundingBox().top)
but none of these are giving me the correct value.
Does anyone know how to make this work, or another way of saving the zoomed in chart?
Thanks!

I got it to work using
cli.getVAxisValue(cli.getChartAreaBoundingBox().top+cli.getChartAreaBoundingBox().height)
I hadn't realized that the position was being calculated from the top, not the bottom.