0

I can't seem to figure out how to make my Pygal Charts rendered as Base 64 URI work on IE 11. In fact, when visiting the Pygal Documentation (http://www.pygal.org/en/stable/) on IE 11 none of their charts work on IE either.

Does anyone know a workaround?

I've attached some sample code below to show how I'm rendering the chart.

HTML:

  <div class="clearfix"></div>
        <div class="row">
          <div class="col-md-6 col-sm-6 col-xs-12">
            <div class="x_panel">
              <div class="x_title">
                <h2>Chart</h2>
                <ul class="nav navbar-right panel_toolbox">
                  <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                  </li>
                  </li>
                  <li><a class="close-link"><i class="fa fa-close"></i></a>
                  </li>
                </ul>
                <div class="clearfix"></div>
              </div>
              <div class="x_content">
                <embed type="image/svg+xml" src={{chart|safe}} style='width:100%'/>
              </div>
            </div>
          </div>

init.py:

line_chart = pygal.Line()
line_chart.title = 'Browser usage evolution (in %)'
line_chart.x_labels = map(str, range(2002, 2013)) 
line_chart.add('Firefox', [None, None,    0, 16.6,   25,   31, 36.4, 45.5, 
46.3, 42.8, 37.1])
line_chart.add('Chrome',  [None, None, None, None, None, None,    0,  3.9, 
10.8, 23.8, 35.3])
line_chart.add('IE',      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 
36.2, 26.6, 20.1])
line_chart.add('Others',  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,   
 6.7,  6.8,  7.5])
line_chart.render_data_uri()

return render_template("html.html", chart = chart)
ashap
  • 101
  • 1
  • 11

1 Answers1

0

I visited a sample chart at pygal.org and inspected the source code with the dev tool. Use 

<img src="data-uri....." alt="chart title"/>

instead of 

<embed src="data-uri...."/>

IE has security zones and restrictions the mime-types that embed objects can use. embed tags need both the src and type attributes to match mime-types. <img> elements are clickable..users can right-click and copy the chart image to their clipboard.

Rob Parsons
  • 839
  • 6
  • 4