I am creating a custom bar chart using jqplot. Where i need to display icons with values. So i decided to use font-awesome icons and its works well.
By escaping html i could able to show custom labels in bar chart.
Now i need to export this chart to PDF. When trying to convert as image using jqplot function
$("#chart1").jqplotToImageElem().src
The font-awesome icons is missing on the exported image.
How can i resolve this one, Any ideas?
Here is how I have solved this.
Jqplot is creating canvas based on elements in the _jqToImage(). where I have added code for handling the tag "i" (for font awesome). Actually I am getting the class of the current element and map its Unicode value. Font Awesome cheat sheet is here http://fortawesome.github.io/Font-Awesome/cheatsheet/
function _jqpToImage(el, x_offset, y_offset) {
// .........
if ((tagname == 'div' || tagname == 'span')
{
// ...........
}
if (tagname == 'i') {
var element = $(el);
var elClass = el.classList[1];
var icons = {
'fa-angle-up': { content: 'f106' },
'fa-angle-down': { content: 'f107' },
'fa-angle-double-up': { content: 'f102' },
'fa-angle-double-down': { content: 'f103' },
'fa-minus': { content: 'f068' }
};
var uni = '"\\u' + icons[elClass].content + '"';
var hexstring = eval(uni);
var iconFontWeight = window.getComputedStyle($('.' + elClass).get(0), ':before').getPropertyValue('font-weight');
var iconColor = window.getComputedStyle($('.' + elClass).get(0), ':before').getPropertyValue('color');
var iconFontSize = window.getComputedStyle($('.' + elClass).get(0), ':before').getPropertyValue('font-size');
newContext.font = iconFontWeight + " " + iconFontSize + " FontAwesome";
newContext.fillStyle = iconColor;
writeWrappedText(el, newContext, hexstring , left, top, w);
}
// ..........
}