I have a page and there are four line charts on it. By having
exporting: {
enabled: false
}
I am able to see a Highcharts-generated export dropdown with options such as Download as PDF on each chart. These export options do not involve any access to the server. This is a pure client-side solution.
I wonder whether there is any way to use Javascript in the browser that allows me to export all charts on the page in a single PDF document?
Thanks and regards.
Well, I hate to be the one to break this to you but one clarification needs to be made, the default export options aren't really pure client-side. They leverage highcharts' own exporting server, one can override the exporting server's url using the exporting.url configuration option
url: String
The URL for the server module converting the SVG string to an image format.
By default this points to Highslide Software's free web service. Defaults to http://export.highcharts.com.
You may want to read their disclaimer & privacy statement & read more about the export module here
You can consider setting up your own exporting server, and override the export function to send SVG of all the charts on your page and do the stitching on the server side and send back the image.
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'Export All Charts',
onclick: function() {
var allCharts=Highcharts.charts;
var svgArray=[];
for(var i=0;i<Highcharts.charts.length;i++){
svgArray[]=Highcharts.charts[i].getSVG();
}
// ... Post svgArray to your exporting server
}
}]
}
}
}
Having said that, modern browsers do support saving content of HTML5 canvas elements, check this jsFiddle that uses canvg library to export a single chart. P.S. This isn't the default behavior of highcharts
Related
I'm having trouble forcing highcharts to export offline. I've added the offline-exporting.js module along with the exporting module. I've set the fallbackToExportServer to false, but I still go to the highcharts server (https://export.highcharts.com/) and get this error: 13 Request Entity Too Large.
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="//code.highcharts.com/modules/data.js"></script>
<script src="//code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
exporting: {
filename: title,
fallbackToExportServer: false,
To see the issue, go to: https://www.nrel.gov/transportation/drive-cycle-tool/
In the Drive cycles table, search for “Fleet DNA”.
Click on “Fleet DNA Drayage Maximum Energy*”
Scroll up and click “Download Drive Cycle Data or Image” under the chart.
Choose “Download JPEG image”
Some data sets work fine.
It is linked to this reported issue:
https://github.com/highcharts/highcharts/issues/4614
As a workaround you could set up a custom exporting server with increased size limit:
https://www.highcharts.com/docs/export-module/setting-up-the-server
I noticed the same issue few days back, kind of strange, despite setting the flag to false, it was calling the highchart server for chart pdf.
I then resorted to use exportChartLocal method of highchart chart instance:
chart.exportChartLocal({
type: 'image/jpeg', // replace with image/jpeg
filename: 'test.jpg',
fallbackToExportServer: false,
sourceWidth: 900,
scale: 1,
});
Look at this example: https://jsfiddle.net/riteshwaghela/huw8e31z/7/
I am using the EXPORT-CSV plugin for Highcharts to export data to csv. (Thank you to the developers of this plugin!) When testing in Safari on a Mac, however, the exported csv file does not take the filename as expected from
exporting: {
filename: "FancyFileName"
}
and instead just uses the default Highcharts name "chart". All the built-in export types do use the desired filename from Safari, and the csv also gets the desired filename from all the other standard browsers I have tested.
Here is a fiddle.
How can Safari be convinced to use the filename I give it? Thanks for your help.
The hard coded filename is coming from the php script written on the server. You can find that script on php script for download of file with hardcoded file name
You can use that same code on your local machine server. To do that
create a php file on your local server.
copy the above code in it.
change url www.highcharts.com/studies/csv-export/csv.php in export.csv library to your local server url.
change the name whatever you wish to using $_POST['variablename']
Variable name should be pass when making post call from export.csv library and use in php file using $_POST
Highcharts.post(url, {
data: content,
name: name,
type: MIME,
extension: extension
});
This is the code used in export.csv library for making post call. I have added extra parameter name to be used in my php script for dynamic filename.
I am using HighCharts version 3.0.2. Have set up the Highcharts server locally for exporting the charts. When download as png/jpeg/pdf is selected from the top right corner of the chart , the Highcharts demo page is displayed.
Please let me know what could be the reason for this.
Note: Have set the Phatom js path in my app.properties file of highcharts export server.
Probably you're exporting.urlends without a trailing slash. The export-server will redirect the GET (without trailing slash) to the demo/welcome page
Instead of
exporting: {
url: http://localhost/export
}
do this
exporting: {
url: http://localhost/export/
}
I'm using highcharts-convert.js with phantomjs, and I'm having some text-overlapping issues when exporting the charts.
I believe the reason is Chrome on OSX renders fonts differently than my ubuntu server does. So when the client's browser builds the SVG the text does not overlap (I have indeed confirmed this by capturing the POST and rendering the svg in Chrome), but when phantomjs renders the text on ubuntu its slightly wider so there is overlap.
I believe that if I export the options JSON rather than SVG, ubuntu will lay out the text according to its own font rendering, and nothing will overlap.
Does that make sense? If so, how can I get highcharts to POST the options JSON rather than SVG?
I have this process that I can use to rig everything up, but it feels like there should be a better way...
var chart = graphContainer.find(".graph-body div").highcharts();
var chartOptions = chart.options;
delete chartOptions.chart["renderTo"]; // this creates a circular reference
// provide extra options to override the chart's defaults here...
$.extend(chartOptions.chart, {backgroundColor: "#FFFFFF", spacingLeft: 30, spacingRight: 30});
// wrap this up and POST it to the server...
console.log(JSON.stringify(chartOptions));
I am using Primefaces 3.1.1 charts in my application, there is no problem generating charts in JSF page, but I'm trying to find out if it's possible to generate image (png or jpeg) for the charts so that I can insert these images into an Excel file (Apache POI) in java.
I know the latest Primefaces version 3.4.1 has an Export Chart feature, but the generated image only occurs at the client side (it's jqPlot). But I need it on the server side.
Currently we are using jFreeChart in the backing bean for this purpose, so the charts in browser looked very different from the charts in Excel. We are trying to find out whether by upgrading to Primefaces 3.4.1 can give us the option to make the charts in browser and the charts in Excel looked the same? Or is there another way of doing this?
Using mojarra-2.1.3-FCS if this is a concern.
As in the accepted answer provided by Daniel, Primefaces' charts are not available at the server side. I add an answer here only to show a possible workaround.
At the client side, we assign the base64 PNG encoded string to a hidden field value, an example modified from Primefaces demo source code for export charts:
<h:form id="hform">
<p:lineChart value="#{testBean.linearModel}" legendPosition="e"
zoom="true" title="Linear Chart" minY="0" maxY="10"
style="width:500px;height:300px" widgetVar="chart" />
<p:commandButton id="exp" value="Export" icon="ui-icon-extlink"
onclick="exportChart();"
actionListener="#{testBean.submittedBase64Str}" />
<h:inputHidden id="b64" value="#{testBean.base64Str}" />
<script type="text/javascript">
function exportChart() {
// exportAsImage() will return a base64 png encoded string
img = chart.exportAsImage();
document.getElementById('hform:b64').value = img.src;
}
</script>
</h:form>
At the backing bean, we need to decode the string, a simple example as below:
public void submittedBase64Str(ActionEvent event){
// You probably want to have a more comprehensive check here.
// In this example I only use a simple check
if(base64Str.split(",").length > 1){
String encoded = base64Str.split(",")[1];
byte[] decoded = org.apache.commons.codec.binary.Base64.decodeBase64(encoded);
// Write to a .png file
try {
RenderedImage renderedImage = ImageIO.read(new ByteArrayInputStream(decoded));
ImageIO.write(renderedImage, "png", new File("C:\\out.png")); // use a proper path & file name here.
} catch (IOException e) {
e.printStackTrace();
}
}
}
The PNG file is now stored in the server, and you can continue to make use of that file in other parts of your codes.
As you already know Primefaces uses the jqPlot plugin to generate the charts , Since jqPlot is a jquery client side plugin it cannot generate anything on the server side , its a jquery plugin and not some server side api (jar)
So the answer is No :/
You might consider using some other server side chart generator (look at the links below) that will generate a better looking charts
13. Are there other "open source" chart libraries? (at the buttom)
What is the best open-source java charting library? (other than jfreechart)