htmlbase64jqplotfont-awesomesvg-font

Font Awesome icons with Jqplot


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. Custom Barchart Labels

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.

exported_barchart

How can i resolve this one, Any ideas?


Solution

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