Is it possible to call the HighCharts Exporting module functions directly? I'd like to have a button elsewhere on the page that can call the 'downloadPNG', 'downloadJPEG' etc functions that are usually called from the exporting contextButton.
Yes, you just need to use exportChart method, for example:
chart.exportChart({
type: 'image/png'
});
Live demo: http://jsfiddle.net/BlackLabel/0mLy6du3/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#exportChart
Related
I have a HTML table whose tbody tds contains strings, specifically dollar amounts like $1,500, can I parseInt() those before they are read into HC?
The API has some methods under the data attribute like beforeParse but the documentation implies that it only works for CSVs. Are there any methods I could use for this?
You are right, beforeParse works only for data from CSV, but you can also modify your data in complete or parsed callback function.
complete: function(options) {
options.series.forEach(s => {
s.data.forEach(point => {
point[1] = Number(point[1].slice(1));
});
});
}
Live demo: https://jsfiddle.net/BlackLabel/98mayuts/
API Reference:
https://api.highcharts.com/highcharts/data.complete
https://api.highcharts.com/highcharts/data.parsed
I'm having trouble with highcharts downloading PNG image, I want to use my own button instead the highcharts one, reading the documentation I need to use "exportChart" function, but it removes data:
options:any = {
exporting: {
enabled: false
}
}
exportPNG():void{
this.chart.exportChart();
}
There is an "almost working" example it gives an error in app.module using "require" and another one when tyring to import from exporting, help in make the example work will be apreciate
https://stackblitz.com/edit/angular-dqck8n
When it's working, we can click in "download button" and downloads the chart, but if click again it returns an error because data is removed from chart.
I've realized it also happen using exporting library, you can check it download image file and trying to do zoom out.
The reason is saveInstance method - it is called on every chart's load. When exporting, a new temporary chart is created and then deleted so now your angular component has the reference to the removed exported chart - this.chart inside exportPNG() refers to the empty chart object.
You can check if load event is called for a normal chart and then save the chart's instance.
saveInstance(chartInstance): void {
if (!chartInstance.options.chart.forExport) this.chart = chartInstance;
}
live example: https://stackblitz.com/edit/angular-41tmjd?file=app/mychart.component.ts
I'm trying to pull dynamic data (form) to a google sheet.
I can't seem to find the right function.
I'm running this:
function name(){
return $('input[type="text"]').val();
}
I tried this:
function fullname(){
return $('#form-field-1-1').val();
}
No success for now.
I've attached the elements below.
Thank you [https://i.stack.imgur.com/Tt5Gk.png]
Your best choise is to use a Variable "DOM element" and capture it by ID. but if you prefer a custom JS this will do:
function(){
return document.getElementById('form-field-1-1').innerHTML;
}
Hope it helps.
I need to do some post-processing work on a png file of a Highchart graph. How do I determine when the export is finished? I've tried to attach a function, but it never gets called:
console.log("Saving chart...");
chart.exportChart({
type : "application/png",
filename: "tmp_chart_filename"
},
function(data) {
console.log("Export done, Data: " + data); // Not called.
})
console.log("Out");
To my understanding, it is not possible out of the box.
What happens internally in the exportChart() method is, a form is created on the fly and the chart svg is sent to the server by programmatically triggering a submit on this form. The server in turn, processes received svg into a png (or whatever you may select) and returns it to the browser.
The popup you see that asks you to "save as" is the action of the browser (and not any highchart code) when a file is thrown at it. Basically the returned png is never returned to the code, it goes directly to the browser.
You can however write your custom svg->png server module and do your magic there :)
I had a rather similar issue and solved it by defining the onclick event on the contextButton. This seems possible only if you are OK with losing the items in the context menu (export by file type), which wasn't an issue in my case. Below the code to be included in the chart initial building:
[... your Highcharts chart setup ...],
exporting: {
buttons: {
contextButton: {
menuItem: null, // You'll lose your menu items here
onclick: function(event) {
yourFunctionBeforeExport();
this.exportChart();
yourFunctionAfterExport();
}
}
}
}
[... rest of the Highcharts chart setup ...]
How can I get the response from an ajax call made with g:remoteLink, using jquery ?
I have tried using nSuccess="removeTask(e)" and getting the response with e.responseText or e.response, but nothing works.
When using Grails with the JQuery plug in and using the remote functions like remoteLink, the code that is generated for the remote function is something like this:
success: function(data, textStatus){ jQuery('#results').html(data); }
This is if for example you set the update parameter as "[success:'results']". As you can see the main function receives a data parameter which I think is what your looking for, so if you need to call another function that uses that value, you could do something like this:
<g:remoteLink controller="yourcontroller" action="youraction" update="[success: 'results']" onSuccess="yourFunction(data) ">Your link</g:remoteLink>
This will generate javascript code like this:
success:function(data,textStatus){ jQuery('#results').html(data); yourFunction(data); }
Hope this helps!!