I am using google charts and have a page of mixed charts, some pie, a column chart and a gauge chart
The page has an option to generate a pdf, so I am converting the charts to PNG to use in the pdf..
all the charts are generated in the same manner, using a div to display the google chart and a hidden div to store the png image
var chart = new google.visualization.Gauge(document.getElementById('gauge'));
var hidden = new google.visualization.Gauge(document.getElementById('gauge_hidden'));
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
gauge_hidden.innerHTML = '<img src="' + chart.getImageURI() + '">';
});
chart.draw(data, options);
this code works fin on he pie and column charts, but on the gauge chart I am seeing
chart.getImageURI is not a function
any ideas how I can get the png?
CHeers
I was facing this same issue, but after some reading i've come to this solution:
I'm using jQuery to make this a little easier.
First, use XMLSerializer to convert the SVG chart to a string and then use btoa to convert that to base64.
You can use this string this way:
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var base64String = "data:image/svg+xml;base64," + window.btoa(s);
In my case i needed to draw the gauge chart to a PDF and DOMPDF doesn't support this format, so if you need a "data:image/png;base64," string, you can continue with this solution.
You need to set the "svg+xml;base64" as src of a new Image and then draw that image to a Canvas. After that you can use toDataURL method from canvas to get the content as base64 png.
var s = new XMLSerializer().serializeToString($(chart_div).find('svg')[0]);
var image = new Image();
image.width = 640;
image.height = 480;
image.src = 'data:image/svg+xml;base64,' + window.btoa(s);
var myCanvas = document.createElement('canvas');
myCanvas.width = 640;
myCanvas.height = 480;
var myCanvasContext = myCanvas.getContext('2d');
myCanvasContext.drawImage(image,0,0);
// get google chart gague to base64, yey!
var base64String = myCanvas.toDataURL();
Thanks to the author of this answer and this post
Related
I'm doing an experiment with gifshot and leafletjs. I want to insert an image inside a marker popup but the problem is that the popup will not adapt his size to fit the content. I've tried to apply some css rules but it will not be displayed on the marker that is present on the map, I need some tips and help to fix this.
Here is an image that is showing my problem:
var animatedImage;
map.on('click', function(event){
marker = map.mouseEventToLatLng(event.originalEvent);
var icns = L.marker([marker.lat, marker.lng]).addTo(map);
sessionStorage.setItem('lat', marker.lat);
sessionStorage.setItem('lng', marker.lng);
gifshot.createGIF({}, function(obj){
if(!obj.error) {
var image = obj.image,
animatedImage = document.createElement('img');
animatedImage.src = image;
icns.bindPopup(animatedImage).openPopup();
}
});
});
Any help will be appreciated.
I created an img element string with base64 source. when tried to display it in sap.ui.richtexteditor.RichTextEditor, I got nothing. How to display it? see my code.
// controller
var template = {};
var image ="<img src="data:image/bmp;base64,/9j/4AAQSkZJRg...">";
template.body = image;
var oViewModel = new JSONModel(template);
this.getView().setModel(oViewModel, "template");
//view
<rte:RichTextEditor id="rte" value="{template>/body}" editorType="TinyMCE4" customToolbar="true" showGroupFont="true" showGroupInsert="true"
showGroupLink="true" height="360px"/>
why dont use the Image Control?
<Image src='data:image/png;base64,iVBORw0KGgoA...........=='/>
I have tried to export the PNG related to the graph provided as sample for the integration of popper.js with cytoscape.js, but the exported png does not include the popper content when exported.
The reference sample is: https://cytoscape.org/cytoscape.js-popper/
The refence code to export the PNG is the following one:
var text = window.cy.png({'output': 'blob'});
var name = "test.png";
var type = "image/png";
var a = document.getElementById("downloadpng");
var file = new Blob([text], { type: type });
a.href = URL.createObjectURL(file);
a.download = name;
a.click();
This is the resulting image when exporting cy.png() included a popper.js content
I would say this is the expected behavior: image export in Cytoscape.js takes the Cytoscape.js canvas and exports it as image. The popper.js labels are not in the canvas - they are separate div objects in the DOM. Hence they are not included in the exported image.
I've added a nvd3 chart to my sencha touch app.
Apparently though the size of the box where the chart will be inserted is undefined at the time the chart is created. This turns out in a graph with standard dimensions (960x350 approx), way too large!
How can I modify the widht and height of the chart? The visual error I get is that the chart has a larger width, the component containing it are smaller and the chart is not completely
visible (it's like it misses a resize effect to adapt its size to the containing box).
My code, which is inside a sencha component goes like this:
nv.addGraph(Ext.bind(function(){
var chart = nv.models.discreteBarChart()
.x(function(d) { return d.label; })
.y(function(d) { return d.value; })
.staggerLabels(true)
.tooltips(false)
.showValues(true);
var w = 550;
var h = 280;
var svg = d3.select(this.innerElement.dom).append('svg');
// setting axis property doesn't work:
var x = d3.scale.ordinal()
.domain(d3.range(10))
.rangeRoundBands([0, w], 1);
chart.xAxis
.tickFormat(d3.format(',f'));
chart.xAxis.scale(x);
chart.yAxis
.tickFormat(d3.format(',f'));
//setting svg properties doesn't work:
svg.attr("width", w)
.attr("height", h);
svg.datum(this.getChartData()).transition().duration(500).call(chart);
//if I comment this, nothing changes, what is this method for?
nv.utils.windowResize(chart.update);
I am trying to create image on every xaxis in my highchart like the one in the attached image , but couldn't find the way for it
here is my code for the xaxis
chart.getXAxis(1).setOpposite(true).setLinkedTo(0).setType(Type.DATE_TIME)
.setTickInterval(6 * 3600 *1000).setGridLineWidth(1)
any idea how can i set some image to every xaxis in my chart
You will want to use the AxisLabelsFormatter. The content you "return" from this call should be the appropriate html you want to have rendered. So something like this work for the top axis:
chart.getXAxis().setLabels(
new XAxisLabels()
.setFormatter(new AxisLabelsFormatter() {
public String format(AxisLabelsData axisLabelsData) {
return '<img src="/path/to/image.gif" />';
}
})
);