0

Radarseries graph is being clipped in VF page with SVG element

enter image description here

<apex:form >
        <apex:includeScript value="{!$Resource.JqueryFile}" />
        <style>
        .vf-surface{
            float:left;
            border: 1px solid green;
            content: "Main radar";            
        }


        .body {
          position: absolute;
          top: 250px;
          left: 300px;
        }   

        </style>        
        <script>            
            var j$ = jQuery.noConflict();
            j$(document).ready(function() {
                var updateSvgCss = function() {
                   var svg = j$('svg');
                   if (svg.length > 0) {
                       // svg.css('padding', '20px'); 
                       svg.css('height', '450px');
                       svg.css('width', '600px');



                   } else {
                       // svg element appears to be dyamically inserted so poll for it
                       setTimeout(updateSvgCss, 10);
                   }
                };
                var addText = function() {
                    var svg = j$('svg');
                    //alert('svg found here');
                    var svgrect = j$('rect');
                    //alert('rectagle found here');
                    var svgcircle = j$('circle');
                    //alert('circle found here');
                    //svg.circle(400, 450);
                    if (svg.length > 0) {
                        //alert('Len'+svg.length);
                        //alert('SVG-'+svg);
                        var i=0;
                        var IDs = [];
                        var sectionNameString = '{!sectionNameList}';
                        //alert(sectionNameString);
                        var sectionNamearray  = sectionNameString.split(','); 
                        //alert('SecNames-'+ sectionNamearray.length);                           
                        j$('rect').each(function() {                            
                            IDs.push(this.id);
                            //alert('Id-'+IDs);
                            //alert('SVG-'+svg.length);
                            var rid =IDs[i];
                            //alert('IdtoAddafter'+rid);
                            var rectarea = j$('#' + rid);
                            //alert('rectarea-'+rectarea);                   
                            //var radarNames = new Array("Scoring Radar", "Engineering Risk", "Finance Risk", "Commercial Risk", "Legal Risk", "Operations Risk");                            
                            //alert('radarNames-'+ sectionNamearray[i]);                                                                               
                            var textElement = document.createElementNS("http://www.w3.org/2000/svg", "text");   
                            textElement.setAttributeNS(null,'x',5);
                            textElement.setAttributeNS(null,'y',5);
                            textElement.setAttributeNS(null,'style',"font-family: Arial;font-size: 15;stroke: blue; stroke-width:1;");  
                            var radarName = sectionNamearray[i];
                            radarName = radarName.replace(/[.*+?^${}()|[\]\\]/g, "");                                              
                            var textNode = document.createTextNode(radarName);
                            textElement.appendChild(textNode);
                            j$(textElement).insertAfter(rectarea);
                            j$("circle[r='42.3']").attr("stroke","green");
                            j$("circle[r='84.6']").attr("stroke","yellow");
                            j$("circle[r='126.9']").attr("stroke","red");
                            j$("circle[r='42.3']").attr("stroke-width","4");
                            j$("circle[r='84.6']").attr("stroke-width","4");
                            j$("circle[r='126.9']").attr("stroke-width","4");
                            j$("circle").attr("x","250");
                            j$("circle").attr("y","300");
                            i++;
                       });
                    }else{
                         setTimeout(addText, 10);
                    }
                };
                updateSvgCss();
                addText();             
            });       


        </script>
        <script>
            function myFunction() {
                document.getElementById('prbtn').style.display='none';
                window.print();
            }
        </script>
        <button Id='prbtn' onclick="myFunction()">Print Risk Profile</button>

            <apex:chart height="300" width="350" legend="true" data="{!data}" theme="Yellow" >       <apex:axis type="Radial" position="bottom" title="Total Deal Risk" margin="5" >
                    <apex:chartLabel />
                </apex:axis>
                <apex:radarSeries xField="sectionNameWithScore" yField="maxPrecent" markerFill="#FFFFFF"  fill="#FFFFFF" tips="true" markerType="cross"   strokeWidth="0" strokeColor="white" opacity="1" />
                <apex:radarSeries xField="sectionNameWithScore" yField="sectionscore" markerFill="green"  fill="{!strMainRadarColorCode}" tips="true" markerType="circle" strokeWidth="4" strokeColor="blue" opacity="0.5"  />
            </apex:chart>


            <apex:repeat value="{!sectionOrderList}" var="mapSubSectnData"> 
                 <apex:chart height="300" width="350" legend="true" data="{!mapSectionNameLstSubsection[mapSubSectnData]}" theme="Yellow" >                    
                    <apex:axis type="Radial" position="right" title="Test">
                        <apex:chartLabel />
                    </apex:axis>
                    <apex:radarSeries xField="sectionNameWithScore" yField="maxPrecent" markerFill="#FFFFFF"  fill="#FFFFFF" tips="true"    markerType="cross" strokeWidth="0" strokeColor="white" opacity="0.5"/>
                    <apex:radarSeries xField="sectionNameWithScore" yField="sectionscore" markerFill="Red"  fill="{!sectionColourMap[mapSubSectnData]}" tips="true" markerType="circle" strokeWidth="4" strokeColor="blue" opacity="0.5" />
                </apex:chart>
            </apex:repeat>

    </apex:form>
</apex:page>

please let me know which attributes will helps to change the position of Radarseries graph to center of rect.

Thanks

  • 1
    Can you please post the controller code as well? – Saroj Bera Dec 24 '18 at 10:29

Your Answer

By clicking "Post Your Answer", you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.