function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Pete Watson 5Pete Watson 5 

Visualforce Gannt Chart

Hi all, 

I have created a gannt chart via the google charts api and all is working great appart from the Percent Complete variable which is showing as 'null' on the tooltip. 

I have tried a number of different options to set the variable (debug logs show the varable from the controller is correct so i'm assuming its the way im assigning it in the js but not sure where i've gone wrong... any help would be greatly appreciated. 

many thanks in advance. 
  
<apex:page controller="SalesforceProjectsGanntController" lightningStylesheets="true">

        <html>
            <head>
                <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                <style>
                body{
              background: rgb(113,184,222);
              background: linear-gradient(180deg, rgba(113,184,222,1) 0%, rgba(255,255,255,0.3200630594034489) 25%);
              background-repeat: no-repeat;
            }
                </style>
               </head>
            <body>
                <apex:includeScript id="a" value="https://www.google.com/jsapi" />
    			<apex:sectionHeader title="Salesforce Projects" subtitle="Delivery Timeline: Current Financial Year" />
        		<Apex:Form >
                        <apex:commandButton style="color: #0037b1; border: 1px solid #b2b2b2;margin-bottom:10px;" action="{!NYsProjects}" value="View Next Years Projects" id="theButton3"/>
            			<apex:commandButton style="color: #0037b1; border: 1px solid #b2b2b2;margin-bottom:10px;float:right;" action="{!RefreshOnProjects}" value="Refresh Timeline" id="theButton"/>
                    	<apex:commandButton style="color: #0037b1; border: 1px solid #b2b2b2;margin-bottom:10px;float:right;" action="{!ViewJobs}" value="View Jobs" id="theButton2"/>
                    
                
                    <div id="chart_div" style="width:99%;margin-left:0;margin-right:auto;"></div>
               </Apex:Form>
                 
                
                <script type="text/javascript">
                    google.charts.load('current', {'packages':['gantt']});
                google.charts.setOnLoadCallback(drawChart);
                function daysToMilliseconds(days) {
                    return days * 24 * 60 * 60 * 1000;
                }
                
                var Name = '{!Name}';
                Name = Name.replace("[","");
                Name = Name.replace("]","");
                var NameArr=Name.split(',');
                
                var startDate = '{!SDate}';
                startDate = startDate.replace("[","");
                startDate = startDate.replace("]","");
                var startDateArr=startDate.split(',');
                
                var endDate = '{!EDate}';
                endDate = endDate.replace("[","");
                endDate = endDate.replace("]","");
                var endDateArr=endDate.split(',');
               
                
                var duration = '{!Duration}';
                duration = duration.replace("[","");
                duration = duration.replace("]","");
                var durationArr=duration.split(',');
                
				var PercentComplete = '{!PercentComplete}';
                PercentComplete = PercentComplete.replace("[","");
                PercentComplete = PercentComplete.replace("]","");
                var PercentCompleteArr=PercentComplete.split(',');
                
                var JobsList = '{!JobsList}';
                
                function drawChart() {
                    
                    var data = new google.visualization.DataTable();
                    data.addColumn('string', 'Project ID');
                    data.addColumn('string', 'Project Name');
                    data.addColumn('date', 'Start Date');
                    data.addColumn('date', 'End Date');
                    data.addColumn('number', 'Duration');
                    data.addColumn('number', 'Percent Complete');
                    data.addColumn('string', 'Dependencies');
                    
                    for (var i = 0; i < NameArr.length; i++) {
                        var j=i+1;
                        var sd=startDateArr[i].replace('-',',');
                        sd=sd.replace('-',',');
                        var ed=endDateArr[i].replace('-',',');
                        ed = ed.replace('-',',');
                        var pc = PercentCompleteArr[i];
                        data.addRow([NameArr[i], NameArr[i],new Date(sd), new Date(ed), daysToMilliseconds(durationArr[i]), new Number(pc),  null]);
                    } 
                    
                    var options = {
                        height: 500
                    };
                    
                    
                    var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
                    
                    chart.draw(data, options);
                }
                </script>
            
            </body>
         </html>
    
</apex:page>