Document Template not showing Rich Text Formula Field Pie Chart
Hello everyone, I have a rich text formula field that I would like to show on the Document Template - what is interesting is that the "legend" is showing but not the pie chart itself. I am wondering if the style is conflicting with Word essentially. I tried already wrapping in a div to see if that would solve the issue but it is persisting. The Code is here and the image of the Document template is below the code. Thank you so much! Code: var text SZ = "200"; //Adjust this number to make the pie bigger or smaller //include a space after each color var text ACOL = "LightSkyBlue "; //Heating All Fuels var text BCOL = "Gold "; //Cooling All Fuels var text CCOL = "Hotpink "; //Ventilation All Fuels var text DCOL = "MediumOrchid "; //Domestic Hot Water var text ECOL = "CornflowerBlue "; //Lighting var text FCOL = "Lime "; //Cooking var text GCOL = "yellow "; //Refrigeration var text HCOL = "DarkViolet "; //Office Equipment var text ICOL = "red "; //Computer var text JCOL = "orange "; //Misc // Define Labels var text ALABEL = "Heating " & ToText(Round([Heating Electric Use Percentage]*100,1)) & "%"; var text BLABEL = "Cooling " & ToText(Round([Cooling Electric Use Percentage]*100,1)) & "%"; var text CLABEL = "Ventilation " & ToText(Round([Ventilation Electric Use Percentage]*100,1)) & "%"; var text DLABEL = "Domestic Hot Water " & ToText(Round([Domestic Hot Water Electric Use Percentage]*100,1)) & "%"; var text ELABEL = "Lighting " & ToText(Round([Lighting Electric Use Percentage]*100,1)) & "%"; var text FLABEL = "Cooking " & ToText(Round([Cooking Electric Use Percentage]*100,1)) & "%"; var text GLABEL = "Refrigeration " & ToText(Round([Refrigeration Electric Use Percentage]*100,1)) & "%"; var text HLABEL = "Office Equipment " & ToText(Round([Office Equipment Electric Use Percentage]*100,1)) & "%"; var text ILABEL = "Computer " & ToText(Round([Computer Electric Use Percentage]*100,1))& "%"; var text JLABEL = "Miscellaneous " & ToText(Round([Miscellaneous Electric Use Percentage]*100,1)) & "%"; //Skip first total var number B = [Cooling kWh]/[Total Electric Use Chart]; var number C = [Ventilation kWh]/[Total Electric Use Chart]; var number D = [Domestic Hot Water kWh]/[Total Electric Use Chart]; var number E = [Lighting kWh]/[Total Electric Use Chart]; var number F = [Cooking kWh]/[Total Electric Use Chart]; var number G = [Refrigeration kWh]/[Total Electric Use Chart]; var number H = [Office Equipment kWh]/[Total Electric Use Chart]; var number I = [Computer kWh]/[Total Electric Use Chart]; var number J = [Miscellaneous kWh]/[Total Electric Use Chart]; //Displays values from top clockwise var text pieChartHTML = "<div style='display:inline-block; margin-left: 30px; margin-top: 0px; vertical-align: middle;'>" & "<span style='display:inline-block;margin-top: 10px; width:200px; height:200px;" & "background: conic-gradient(" & $JCOL & " 0turn " & $J & "turn, " & $ICOL & $J & "turn " & ($J+$I) & "turn, " & $HCOL & ($J+$I) & "turn " & ($J+$I+$H) & "turn, " & $GCOL & ($J+$I+$H) & "turn " & ($J+$I+$H+$G) & "turn, " & $FCOL & ($J+$I+$H+$G) & "turn " & ($J+$I+$H+$G+$F) & "turn, " & $ECOL & ($J+$I+$H+$G+$F) & "turn " & ($J+$I+$H+$G+$F+$E) & "turn, " & $DCOL & ($J+$I+$H+$G+$F+$E) & "turn " & ($J+$I+$H+$G+$F+$E+$D) & "turn, " & $CCOL & ($J+$I+$H+$G+$F+$E+$D) & "turn " & ($J+$I+$H+$G+$F+$E+$D+$C) & "turn, " & $BCOL & ($J+$I+$H+$G+$F+$E+$D+$C) & "turn " & ($J+$I+$H+$G+$F+$E+$D+$C+$B) & "turn, " & $ACOL & ($J+$I+$H+$G+$F+$E+$D+$C+$B) & "turn 1turn) !Important;" & "border-radius: 50%'>" & "</span>"& "</div>"; // --- Manual Key Generation --- var text keyHTML = "<div style='display:inline-block; margin-left: 30px; margin-top: -10px; vertical-align: middle;'>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $ACOL & "; margin-right:5px; border-radius: 2px;'></span>" & $ALABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $BCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $BLABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $CCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $CLABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $DCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $DLABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $ECOL & "; margin-right:5px; border-radius: 2px;'></span>" & $ELABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $FCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $FLABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $GCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $GLABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $HCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $HLABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $ICOL & "; margin-right:5px; border-radius: 2px;'></span>" & $ILABEL & "</div>" & "<div style='line-height: 1.5;'>" & "<span style='display:inline-block; width:10px; height:10px; background-color:" & $JCOL & "; margin-right:5px; border-radius: 2px;'></span>" & $JLABEL & "</div>" & "</div>"; // Combine the chart and the key $pieChartHTML & $keyHTML Here is what it looks like in the Document Template: Here is what the field shows on the form (The pie is showing): Thanks so much again!
