I have an example in highchart which I add function so that the title will be put extra in case the chart is printed:
events: {
beforePrint: function() {
this.setTitle({
text: 'print title'
})
},
afterPrint: function() {
this.setTitle({
text: null
})
}
}
and for downloading:
exporting: {
chartOptions: {
title: {
text: 'download title'
}
}
}
My jsFiddle code: http://jsfiddle.net/2mvuLLs9/30/
The case when downloading it seems that the title is put correclty at the top but for the case printing, the title is put inside of the graph, I want to put the title also on top like in the case of downloading
How can I advoid this problem ?
Related
I'm trying to add 2 custom buttons in Angular Highcharts Line chart in the exporting property
exporting: {
enabled: true,
buttons: {
customButton: {
text: 'Custom Button',
click: () => {
alert('You pressed the button!');
},
},
anotherButton: {
text: 'Another Button',
click: () => {
alert('You pressed another button!');
},
},
},
}
But these 2 buttons not displaying. What could be the missing logic here?
Stackblitz
Hi think the below snippet will help you:
chart: {
type: "line",
renderTo: "chart",
events: {
render(events) {
let chart = this;
if (chart.customButton) {
chart.customButton.destroy();
}
chart.customButton = chart.renderer
.button("custom button", 100, 40, () => {
console.log("clicked.....");
chart.exportChart({
type: "application/pdf",
filename: "line-chart"
});
})
.add();
}
}
}
Here on click the button, you can implement the export. The example here exports PDF.
Demo:
https://stackblitz.com/edit/highcharts-angular-functionality?file=src%2Fapp%2Fstackoverflow%2Fhigh-chart-question%2Fhigh-chart-question.component.ts
https://highcharts-angular-functionality.stackblitz.io/exportcolor
Hope this helps.
The exporting.buttons is an option to edit the buttons in the exporting menu only: https://api.highcharts.com/highcharts/exporting.buttons
To render the custom buttons use the SVGRenderer feature: https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#button
You can add those buttons in the render callback - calls after initial load and after each redraw: https://api.highcharts.com/highcharts/chart.events.render
Currently I have a toolbar with some buttons, here is how I create it :
HTML
<div id="toolbarContainer1" style="direction: rtl"></div>
Javascript
var dataArray= [
new WinJS.UI.Command(null, { id: 'cmdView3', label: 'View3', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 3', onclick: function () { changeView('view3') } }),
new WinJS.UI.Command(null, { id: 'cmdView2', label: 'View2', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 2', onclick: function () { changeView('view2') } }),
new WinJS.UI.Command(null, { id: 'cmdView1', label: 'View1', section: 'primary', type: 'button', icon: 'stop', tooltip: 'View 1', onclick: function () { changeView('view1') } })
];
window.createImperativeToolBar = function () {
var tb = new WinJS.UI.ToolBar(document.querySelector("#toolbarContainer1"), {
data: new WinJS.Binding.List(dataArray)
});
var thisToolbar = document.querySelector('#toolbarContainer1');
thisToolbar.winControl.closedDisplayMode = 'full';
}
I've tried doing adding it like so :
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
It gets appended to the DOM but it looks like the options aren't working. The div (flyout) in the dom has no id as I've set above.
I want to show the flyout on button click :
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("formatTextFlyout").winControl.show(formatTextButton);
}
But obviously because the ID doesn't get set, an error gets logged. Any ideas ?
Here is a fiddle of what I have tried : https://jsfiddle.net/reko91/yg0rs4xc/1/
When you create a win-control like so:
new WinJS.UI.Flyout(null, { id: 'formatTextFlyout', section: 'primary' })
The id "formatTextFlyout" is only the the id of this flyout control.
But you use document.getElementById("formatTextFlyout") method to find this control, the problem is here, this method can only find the html element object with the Id "formatTextFlyout", and there is no one. You can refer to getElementById method.
One solution here is you create a Flyout like so:
HTML:
<div id="flyoutContainer"></div>
Javascript:
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
document.getElementById("flyoutContainer").winControl.show(formatTextButton);
}
Or
var flyout = new WinJS.UI.Flyout(document.querySelector("#flyoutContainer"), { id: 'formatTextFlyout', section: 'primary' });
function showFlyout() {
console.log('flyout');
var formatTextButton = document.getElementById("formatTextButton");
flyout.show(selectedButton);
}
If you read the sample of WinJS.UI.Flyout object there, you will find in html file, it creates a Flyout like so:
<div id="formatTextFlyout" data-win-control="WinJS.UI.Flyout"
aria-label="{Format text flyout}">
The html element is div and has a id "formatTextFlyout".
Addition: In the website Try WinJS, there are a lot of win-control samples which written with html+javascript+css.
I want to change the direction of my tab's tooltip.
I want to make it align to the top.
My code is like this :
var toolTip = 'test';
var panelExpertCharts = Ext.create('ContainerListChartExpert', {
chartList: chartList,
layout: standardLayout,
idIndicator: idIndicator,
idOrganisation: organisationObj.id,
title: chartList[0].titleExpert,
closable: true,
tabConfig: {
tooltip: toolTip
}
});
Thanks for reply.
Hamza.
Hi you can change a tooltip alignment in the following way
listeners: {
render: function(c) {
new Ext.ToolTip({
target: 'trackCallout',
anchor: 'right',
html: 'Test Tooltip'
});
}
}
You can check a very good example here from sencha .
bootstrap tooltip allows me to specify tooltip for the element by merely specifying the "title" attribute:
<div title="This is a test tooltip"> ... </div>
Is there any way to avoid hardcoding the tooltip content and specify a javascript function instead? I tried title="javascript:myFunction()" but it doesn't resolve it.
I looked at the booststrap code and it seems to contain support for function call I just can't figure out the syntax:
Snippet from bootstrap tooltip:
, getTitle: function () {
var title
, $e = this.$element
, o = this.options
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
http://twitter.github.io/bootstrap/javascript.html#tooltips
Give your div an id and call
function titleSetter(node) {
return "My Tooltip text";
}
$('#my-div-id').tooltip({
title: 'My Tooltip text'
});
// or
$('#my-div-id').tooltip({
title: titleSetter
})
I dont know how to use a function, but I use a config file to hold the title/body of my tooltips. I then use a data-attribute for the title and body and leave it in my html. Here is my config file (really just some json):
var help = {
'001': {
title: 'Title 1',
description: 'Body 1'
},
'002': {
title: 'Title 2',
description: 'Body 2'
}
}
My html looks just like it sounds:
<div data-help="001"></div>
I then make the title and content return a function in my tool tips, like so:
var tooltipOptions = {
trigger: 'manual',
title: function() {
return help[$(this).attr('data-help')].title;
},
content: function() {
return help[$(this).attr('data-help')].description;
}
};
And I now have a dynamic body and title for my tool tips.
I believe this will solve the problem you were encountering in your question. Good luck!
if you are using bootstrap 3, you can put a id in your div
<div id="title-text" title="This is a test tooltip"> ... </div>
and then use this code
$("#title-text").attr('data-original-title', "the title");
I have a chart with time series and zoom. It will be better if the subtitle ("Click and drag in the plot area to zoom in") which is certainly very usefull in order to understand how to zoom don't appears when the chart is exported to pdf or image.
So I wonder if there is a way to hide it.
Here is a example on how to do what you are asking. The part does the subtitle manipulation is:
exporting: {
buttons: {
exportButton: {
menuItems: null,
onclick: function() {
chart.exportChart(null, {subtitle: {text:''}});
}
},
printButton: {
onclick: function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
}
}
}
},
EDIT:
Sedondary option
You could remove the Highcharts generated print and export buttons. Then create your own print and export buttons along with a drop down for selecting the export type. Then if the export button is clicked, check the type and export as the type and without the sub title. Here is an example. Here is the code that handles the export and print button clicks:
$('#buttonExport').click(function() {
var e = document.getElementById("ExportOption");
var ExportAs = e.options[e.selectedIndex].value;
if(ExportAs == 'PNG')
{
chart.exportChart({type: 'image/png', filename: 'my-png'}, {subtitle: {text:''}});
}
if(ExportAs == 'JPEG')
{
chart.exportChart({type: 'image/jpeg', filename: 'my-jpg'}, {subtitle: {text:''}});
}
if(ExportAs == 'PDF')
{
chart.exportChart({type: 'application/pdf', filename: 'my-pdf'}, {subtitle: {text:''}});
}
if(ExportAs == 'SVG')
{
chart.exportChart({type: 'image/svg+xml', filename: 'my-svg'}, {subtitle: {text:''}});
}
});
$('#buttonPrint').click(function() {
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: 'Click and drag in the plot area to zoom in' });
});
I did another example keeping the subtitle if anyone have translations on their pages and want to print the chart. Just simply add a variable on the #Linger answer:
var subtitle = this.options.subtitle.text;
chart.setTitle(null, { text: ' ' });
chart.print();
chart.setTitle(null, { text: subtitle });
Example code here:
http://jsfiddle.net/pb6tbx7u/