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 acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.