Doughnut Chart using only SVG Tag

Question

I'm working on a chart I need to export from html to pdf. The pdf engine i'm using cannot execute JS as such, I need to find a way to generate the HTML SVG from server side.

This is what I currently have:

<svg height="450px" width="100%" class="nvd3-svg" style="height: 450px; width: 100%;">
 <g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,-25)">
  <g>
   <g class="nv-pieWrap nvd3-svg">
    <g class="nvd3 nv-wrap nv-pie nv-chart-6755" transform="translate(0,0)">
     <g>
      <g class="nv-pie" transform="translate(353,227.5)">
       <g class="nv-slice" fill="#003087" stroke="#003087">
        <path d="M1.1144285872240914e-14,-182A182,182 0 1,1 -177.4368800170919,40.49880998004924L-110.89805001068244,25.311756237530776A113.75,113.75 0 1,0 6.965178670150571e-15,-113.75Z">
        </path>
       </g>
       <g class="nv-slice hover" fill="#393939" stroke="#393939">
        <path d="M-178.555801655312,40.75419654232691A183.1476967930029,183.1476967930029 0 0,1 -3.364368609731414e-14,-183.1476967930029L-2.0895536010451713e-14,-113.75A113.75,113.75 0 0,0 -110.89805001068244,25.311756237530776Z">
        </path>
       </g>
      </g>
      <g class="nv-pieLabels" transform="translate(353,227.5)">
       <g class="nv-label" transform="translate(115.6133304699599,92.19855444986021)">
        <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);">
        </rect>
        <text style="text-anchor: middle; fill: white;">71%</text>
       </g>
       <g class="nv-label" transform="translate(-115.61333046995992,-92.1985544498602)">
        <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);">
        </rect>
        <text style="text-anchor: middle; fill: white;">29%</text>
       </g>
      </g>
     </g>
    </g>
   </g>
   <g class="nv-legendWrap nvd3-svg" transform="translate(0,25)">
    <g class="nvd3 nv-legend" transform="translate(10,205)">
     <g transform="translate(310,205)">
      <g class="nv-series" transform="translate(0,5)">
       <circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(0, 48, 135); fill-opacity: 1; stroke: rgb(0, 48, 135);">
       </circle>
       <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Cold</text>
      </g>
      <g class="nv-series" transform="translate(65,5)">
       <circle class="nv-legend-symbol" r="5" style="stroke-width: 2; fill: rgb(57, 57, 57); fill-opacity: 1; stroke: rgb(57, 57, 57);">
       </circle>
       <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8" fill="#000">Hot</text>
      </g>
     </g>
    </g>
   </g>
  </g>
 </g>
</svg>

From the code above, What values do I need to change to make this chart responds to the dynamic value of Cold and Hot accordingly. I've studied and tweaked it a lot without having a headway. Your assistance would be highly appreciated.

Please format your code so that it is readable. – Sean May 05 '17 at 15:32 — Sean, May 05 '17 at 15:32
Thanks Sean, Its formated now – Al-Mustapha May 05 '17 at 15:33 — Al-Mustapha, May 05 '17 at 15:33

score 1 · Answer 1 · answered May 06 '17 at 03:53

To change the two parts of the graph, you need to change the two <path> elements. More specifically the d attributes of those paths.

The d attributes describe the shape of the curve. If I reformat the larger one into something neater, and reduce the decimal places, you should be able to see better what is going on.

M -178.56, 40.75
A 183.14, 183.14 0 0,1 -3.36e-14,-183.14
L -2.08e-14, -113.75
A 113.75,113.75 0 0,0 -110.89, 25.31
Z

It is starting (M="move to") at approx (-178, 40). Then drawing an arc ("A") of rdius 183 to (0, -183). Then a line ("L") from the outer radius to the inner radius. Then finally another arc ("A") back to the start. The final "Z" closes the curve so it can be filled.

So to change the size of that graph portion. You would need to adjust the two "A" commands and the "L" command.

You can learn more about how to do that by reading the SVG specification. Or you can check out any of the numerous tutorials that are available on the web.

Your SVG graph looks like it was probably generated by an SVG graphing library such as D3.js. You may want to investigate that option instead.

Doughnut Chart using only SVG Tag

1 Answers1