Font Awesome icons with Jqplot

Question

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?

Answer 1

I suspect that jqplot image function doesn't support content added using pseudo classes (Font Awesome uses :before to display icons on page). If possible, try and add the unicode character inside the HTML tag and see if that works.

Answer 2

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);
          }
          // ..........
         }