I'm trying to get Highcharts to export a chart with FontAwesome icons in plotline labels. I've set up my own export server (as per the instructions at https://github.com/highcharts/node-export-server) and this is successfully creating export files, but the FontAwesome icons are not showing. I've installed the FontAwesome ttf font file on the machine and I've added the relevant code to support use of HTML in the labels and when exporting:
label: {
text: '<strong><i class="fa fa-cup fa-lg"></i><br />Water<br />Station</strong>',
useHTML: true
}
exporting: {
allowHTML: true,
url: "http://localhost:7801"
}
The font icons are correctly showing on the screen, just not when exporting. Does anyone know what I might be missing?
Related
Good day,
i would like to display only the printbutton and the export/png button.
has anyone an idea how to do this? I use the offline-exporting function
best regards,
Martin
You can use the exporting parameter to customize the export options by setting the contextButton's menuItems property as buttons.slice(0,3) to remove other options except 'Print Chart` and 'Download PNG Image' (See image below and demo fiddle URL is available below it).
exporting: {
buttons: {
contextButton: {
menuItems: buttons.slice(0,3)
}
}
}
Working Demo: http://jsfiddle.net/4uP5y/117/
Hope this helps!
I need a little help! I have created an TinyMCE Editor (in admin only) button which appears in editor toolbar fine and functioning properly. Right now the button says “Live Chat”, what I want to replace with a dashicon or a font awesome icon.
I have the following code in my plugin.js file:
ed.addButton('livechat', {
text: 'Live Chat',
icon: 'dashicons dashicons-admin-links',
tooltip: 'Live Chat',
cmd: 'livechatButtonCmd',
});
Instead of showing a dashicon, it is showing a small empty rectangle :(
What is the correct way of doing this please?
I am trying to create a button with custom icon aligned to the left.
I have placed the icon inside
"App\touch\resources\images\" folder.
I have used the icon config of the button to specify the path of the icon.
On doing so, the icon is displayed on the screen but it is not fully shown.
Kindly provide me suggestions to include custom icons rather than sencha default icons.
{
xtype:'button',
itemId: 'btnHome',
height: 50,
icon: './touch/resources/images/Home_Icon.png',
ui: 'plain' ,
html: "Home"
}
You can also use a css class for defining images for buttons.
custom.css // css class
.mail-icon{background-image:url('../images/mail.png')!important;width:48px!important; height:48px!important; background-repeat:no-repeat; background-position:center center;}
source code
{
xtype: 'button',
id: 'btnMail',
itemId: 'btnMail',
ui: 'action',
icon: 'true',
iconCls: 'mail-icon'
},
In the above code i define a css class called mail-icon in custom.css file. And used this css class as iconcls for the button.
Touch 2.2 or later now uses vector based fonts for defining new custom icons. I've recently created this new app that will help you to prepare an icons and corresponding SCCS file for your Sencha Touch apps. This has also been tested with Sencha Architect projects.
The README explains the steps for creating icons at the Ico Moon web site and using the tool to convert Ico Moon project files into SCSS for use in Sencha Touch.
https://github.com/tohagan/sencha-ico-moon
Do inspect the button and change the width and height, for me the following css class fix this.
.x-button .x-button-icon {
width: 2.5em;
height: 2.5em;
}
when I inspected it the width and height were 1.5em.
I searched through the docs but could not find a post discussing this.
I'm currently working on a project which's both available for mobile and pc browsers. Since the screen on iPhone is very small, I'd like to disable highcharts interaction on it (the interaction would fail me even scroll down the page).
I would like to ask whether there's any parameter like "hasInteraction:false".
Thanks for any kind of tips!
update:
I tried this code from Ricardo Lohmann and it's working to disable the mouse tracking:
plotOptions: {
series: {
enableMouseTracking: false
}
}
But on mobile device it's still blocking my finger scrolling down. I searched on Google and found a post: http://blog.rafael.jp/post/2958719820/div-mouseenabled-false but still not working (to allow the chart not blocking my finger scroll)
I'm looking for a solution to this as well.
More precisely, I'd like to enable page scrolling even when finger starts dragging on the chart. I'd still like that a touch on a data point opens up a tooltip.
You might be interested in this commit from v3.0.4 "Added new option, tooltip.followTouchMove ...". I still have to try that. I tried that on iPhone simulator and it works:
Somewhere in your HTML page:
<script type="text/javascript" src="//code.highcharts.com/3.0.1/highcharts.js"></script>
Later on, when you create the chart in your JavaScript code:
$('#chartdiv').highcharts({
chart : {
type : 'line', // e.g. for a line chart
zoomType: null, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
tooltip: {
followPointer: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
followTouchMove: false, // this is already the default, it's just to stress what's said in commit comments and make code "speak"
},
// other options...
});
plotOptions: {
series: {
enableMouseTracking: false
}
}
demo
plotOptions: {
<your type of chart, for example "spline">: {
enableMouseTracking: false
}
},
May fix your problem
I just want to know if it is possible to generate a javascript svg and set it as an icon of a jquery ui button.
$( "#staveSVG" ).button({
text: false,
icons: {
primary: "ui-icon-document"
}
});
instead "ui-icon-document" can i include an svg there?? I dont mean a svg picture but a generated svg (raphaeljs for example).
Thank you.