0

I am writing a web application where I have to draw a polar scatter chart(https://matplotlib.org/examples/pie_and_polar_charts/polar_scatter_demo.html) in the webpage. The polar scatter chart is generated using python matplotlib and then is converted into JSON format and displayed on the webpage using mpld3 library(https://mpld3.github.io/install.html).

Here is my code to show an empty polar scatter chart:

<script src=".../mpld3/d3.v3.min.js"></script>
<script src=".../mpld3/mpld3.v0.3.1.dev1.min.js"></script>

<div class="col-sm-7">
<div id="fig01"></div>
<script>
   mpld3.draw_figure("fig01",{"id": "el44281963893827960", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}], "height": 480.0, "data": {}, "width": 640.0, "axes": [{"yscale": "linear", "id": "el44281963940408456", "axesbg": "#FFFFFF", "xdomain": [0.0, 6.283185307179586], "images": [], "xlim": [0.0, 6.283185307179586], "axesbgalpha": null, "collections": [], "ydomain": [0.0, 4.0], "markers": [], "texts": [], "xscale": "linear", "lines": [], "sharey": [], "paths": [], "axes": [{"grid": {"color": "#B0B0B0", "alpha": 1.0, "dasharray": "none", "gridOn": true}, "fontsize": 10.0, "scale": "linear", "visible": true, "nticks": 8, "position": "bottom", "tickformat": ["3", "2", "1", "8", "7", "6", "5", "4"], "tickvalues": [0.0, 0.7853981633974483, 1.5707963267948966, 2.356194490192345, 3.141592653589793, 3.9269908169872414, 4.71238898038469, 5.497787143782138]}, {"grid": {"color": "#B0B0B0", "alpha": 1.0, "dasharray": "none", "gridOn": true}, "fontsize": 10.0, "scale": "linear", "visible": true, "nticks": 4, "position": "left", "tickformat": ["Gen 1", "Gen 2", "Gen 3", ""], "tickvalues": [1.0, 2.0, 3.0, 4.0]}], "zoomable": true, "bbox": [0.22375000000000006, 0.10999999999999999, 0.5774999999999999, 0.77], "sharex": [], "ylim": [0.0, 4.0]}]} );
</script>

The problem here is that the graph is generated as a normal chart and not as a polar scatter chart which is circular shaped.

Here is that I get after rendering my webpage:

enter image description here

Where is this is what I am expecting(generated from matplotlib):

enter image description here

Any idea on how to get this round chart in my webpage? All suggestions will be highly appreciated.

sshussain270
  • 1,785
  • 4
  • 25
  • 49

1 Answers1

2

There is an issue raised in 2015 for mpld3. Since it's still an open issue, I don't think you will be able to do polar plot with mpld3 as for now. You might have to turn to alternatives like this example, using Data URI scheme to embed Base64 image.

Y. Luo
  • 5,622
  • 1
  • 18
  • 25