i have a highchart and want to be able to download as pdf. But before downloading, to the highchart a title should be added as html. Is this possible? Like event:beforePrint and afterPrint, but just for downloading
You can define custom click event for the 'Download PDF document' button:
exporting: {
menuItemDefinitions: {
// Custom definition
downloadPDF: {
onclick: function() {
this.update({
title: {
text: 'New title'
}
}, false);
this.exportChart({
type: 'application/pdf'
});
this.update({
title: {
text: 'Old title'
}
}, false);
},
text: 'Download PDF document'
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/02aw13ht/
API Reference:
https://api.highcharts.com/highcharts/exporting.menuItemDefinitions
https://api.highcharts.com/class-reference/Highcharts.Chart#update
Related
I've figured out how to change the formatting on my results:
https://github.com/salmanarshad2000/demos/blob/v1.0.4/jquery-ui-autocomplete/custom-html-in-dropdown.html
And I've figured out how I can add a link to the bottom of the results:
Jquery Auto complete append link at the bottom
What I can't figure out is how to do both at the same time.
The closest that I've come is the following:
$( "#search1" ).autocomplete({
source: products,
minLength: 3,
select: function( event, ui ) {
event.preventDefault();
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div></div>");
$("<img style='height:76px;'>").attr("src", item.image).appendTo($div);
$("<span></span>").text(item.label).appendTo($div);
($div).append( "<a href='https://google.com'>Click Me</a>" )
return $("<li></li>").append($div).appendTo(ul);
};
The problem is that adds the link to each individual returned result, rather than slamming it onto the end of the list.
I've tried various incarnations of wrapping the link (li, div, etc) but nothing's working.
What do I need to do to get a link as the last thing on the list?
JS Fiddle: http://jsfiddle.net/spgbq6w7/13/
Consider the following code.
Working Example: http://jsfiddle.net/Twisty/wur8vok9/23/
HTML
Search: <input id="search1">
JavaScript
var products = [{
value: "MS-Word",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Microsoft_Word_2013_logo.svg"
},
{
value: "MS-Excel",
label: "Microsoft Excel 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/8/86/Microsoft_Excel_2013_logo.svg"
},
{
value: "MS-Outlook",
label: "Microsoft Outlook 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Microsoft_Outlook_2013_logo.svg"
},
{
value: "MS-PowerPoint",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Microsoft_PowerPoint_2013_logo.svg"
},
{
value: "MS-Access",
label: "Microsoft Access2013",
image: "https://upload.wikimedia.org/wikipedia/commons/3/37/Microsoft_Access_2013_logo.svg"
},
{
value: "Adobe-PSP",
label: "Adobe Photoshop CC",
image: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"
},
{
value: "Adobe-LR",
label: "Adobe Lightroom CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/56/Adobe_Photoshop_Lightroom_Classic_CC_icon.svg"
},
{
value: "Adobe-PRM",
label: "Adobe Premiere Pro CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/58/Adobe_Premiere_Pro_CS6_Icon.png"
},
{
value: "Adobe-ACR",
label: "Adobe Acrobat",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Adobe_Acrobat_v8.0_icon.svg"
},
{
value: "Adobe-ILS",
label: "Adobe Illustrator CS6",
image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Adobe_Illustrator_Icon_CS6.png"
}
];
$(function() {
$("#search1").autocomplete({
source: products,
minLength: 3,
open: function() {
var $li = $("<li>");
var $link = $("<a>", {
href: "#",
class: "see-all"
}).html("See All Results").click(function(e) {
e.preventDefault();
$("#search1").autocomplete("option", "minLength", 0);
$("#search1").autocomplete("search", "");
}).appendTo($li);
$li.appendTo($('.ui-autocomplete'));
},
select: function(event, ui) {
event.preventDefault();
$("#search1").autocomplete("option", "minLength", 3);
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div>").css("position", " relative");
$("<img>", {
src: item.image
}).css("height", "38px").appendTo($div);
$("<span>").css({
position: "absolute",
top: 0,
display: "inline-block",
"margin-left": "3px"
}).text(item.label).appendTo($div);
return $("<li>").append($div).appendTo(ul);
};
});
So you're using _renderItem() properly. I removed the Link from here based on the example you linked to. I moved this to the open callback as is shown in the example. I also switched some of your code. It wasn't wrong, I just prefer this method.
So the items get rendered so that the image and label show as desired. The the open call back adds a final link item that causes the a search for all items. See more: http://api.jqueryui.com/autocomplete/#method-search
Can be called with an empty string and minLength: 0 to display all items.
When an item is selected, the preferred minLength is returned to ensure that if the user starts a new search, it operates the same way it did the first time.
Update
http://jsfiddle.net/Twisty/wur8vok9/40/
Minor cleanup and better separation of code and style.
Hope this helps.
I have used these options.
exporting: {
enabled: false,
allowHtml:true
}
This is my export function.
export(type: any) {
this.graph.exportChart({ type: type });
}
If you want only on export (add title) then use
Fiddle link
exporting: {
chartOptions: {
chart: {
events: {
load: function() {
var dynamic = document.getElementById('dynamic').value
this.setTitle({
text: dynamic
});
}
}
},
title: {
align: 'right',
}
}
},
Is it possible to format the exporting "contextButton" in Highcharts? (Specifically to look more like other buttons on a page.) I do not mean creating a new button with new functionality, I mean the exact functionality of the standard exporting contextButton, I just want to change basic css like colors. Thanks.
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
color: '#f00', // this does nothing
},
},
The documentation for the context button is at...
http://api.highcharts.com/highcharts#exporting.buttons.contextButton
If you want to change the color of the symbol on the button then use the symbol attributes. For example...
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
symbolFill: '#f88',
symbolStroke: '#f00'
}
}
}
If you want to change the color of the button then use the theme attribute. For example...
exporting: {
enabled: true,
buttons: {
contextButton: {
text: 'Export',
theme: {
fill: '#ddd',
stroke: '#888',
states: {
hover: {
fill: '#fcc',
stroke: '#f00'
},
select: {
fill: '#cfc',
stroke: '#0f0'
}
}
}
}
}
}
I am using Highcharts v4.0.3 with exporting.js in my web app, and I want to be able to just provide the end user with the following download options:
Download Chart as JPG
Download Chart as PNG
However, the standard options are:
Print Chart
Download Chart as JPG
Download Chart as PNG
Download Chart as PDF
Download Chart as SVG Vector Graphic
How can I customise it so that it just gives the user JPG and PNG options?
You can manually set exporting.buttons.contextButton.menuItems (API) to contain whatever buttons you want.
You'll want to set it to only contain JPG and PNG like this (short form, textKey only):
menuItems: ['downloadPNG','downloadJPEG']
Or for more explicit function calls (long form with objects and onclick):
menuItems: [{
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}]
As in these JSFiddle demonstrations: short form and long form.
The default for exporting.js is:
menuItems: [{
textKey: 'printChart',
onclick: function () {
this.print();
}
}, {
separator: true
}, {
textKey: 'downloadPNG',
onclick: function () {
this.exportChart();
}
}, {
textKey: 'downloadJPEG',
onclick: function () {
this.exportChart({
type: 'image/jpeg'
});
}
}, {
textKey: 'downloadPDF',
onclick: function () {
this.exportChart({
type: 'application/pdf'
});
}
}, {
textKey: 'downloadSVG',
onclick: function () {
this.exportChart({
type: 'image/svg+xml'
});
}
}]
The additional ones for export-data.js are:
menuItems: [{
textKey: 'downloadCSV',
onclick: function () {
this.downloadCSV();
}
}, {
textKey: 'downloadXLS',
onclick: function () {
this.downloadXLS();
}
},{
textKey: 'viewData',
onclick: function () {
this.viewData();
}
},{
textKey: 'openInCloud',
onclick: function () {
this.openInCloud();
}
}]
You can remove unnecessary options the following way:
if (Highcharts.getOptions().exporting) {
let contextButton = Highcharts.getOptions().exporting.buttons.contextButton;
contextButton.menuItems = contextButton.menuItems.filter((item) => {
return item.textKey === 'downloadJPEG' || item.textKey === 'downloadPNG';
});
}
In chatOptions we can write customize options in the high-charts menu we can customize the dropdown options.
In chart options, we can write like:
exporting: {
buttons: {
contextButton: {
menuItems: ['downloadPNG', 'downloadJPEG', 'downloadPDF', 'downloadSVG'],
},
},
}
Example: click here
Reference: click here
I am trying to create 2 export buttons (share & download) with two different menuItems in HighCharts
Button 1 (Share)
MenuItem 1: Share on Facebook
MenuItem 2: Share on Twitter
Button 2) Download
MenuItem 1: Print
MenuItem 2: Download as PNG
As you can see on http://jsfiddle.net/kmPh8/18/
exporting: {
buttons: [
{
text: 'Download',
x: -82,
symbolFill: '#B5C9DF',
hoverSymbolFill: 'red',
menuItems: [
{
text: 'Print',
onclick: function() {
alert('blue menu 1');
}
},
{
text: 'Download as PNG',
onclick: function() {
alert('blue menu10000');
}
}
]
},
{
text: 'Share',
x: -10,
symbolFill: '#B5C9DF',
hoverSymbolFill: 'blue',
menuItems: [{
text: 'Share on facebook',
onclick: function() {
alert('Facebook Share');
}},
{
text: 'Share on twitter',
onclick: function() {
alert('Twitter share');
}}
]}]
}
But... the problem is whatever button you click first you will see the menuItems on the second button, if you 'run' it again click the other button you will see the problem again. Each button basically doesn't show the individual menuitems.
Any help would be appreciated.
Indeed it looks like a problem, because I've tried to reproduce it here
http://jsfiddle.net/MzB9b/2/ and indeed issue is displayed.
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: 'Export to PNG (small)',
onclick: function() {
alert('EXPORT PNG small');
}
}, {
text: 'Export to PNG (large)',
onclick: function() {
alert('EXPORT PNG large');
},
separator: false
}]
},
testButton: {
symbol: 'diamond',
x: -62,
symbolFill: '#B5C9DF',
hoverSymbolFill: '#779ABF',
_titleKey: 'printButtonTitle',
menuItems: [{
text: 'Facebook',
onclick: function() {
alert('Facebook');
},
}, {
text: 'Twitter',
onclick: function() {
alert('Twitter');
},
separator: false
}]
}
}
}
So I reported this problem to the developers https://github.com/highslide-software/highcharts.com/issues/1908