Sometime we might end up the slow performance of showing custom charts by querying the object data- if the data is in millions. The best way to improve the performance is by creating a standard report and getting data of report to apex with ReportManager class.
we can also pass the filter values based on your requirement and display charts in the Lightning component with the help of Javascript chartCanvas class.

 

FYI : The above charts are constructed with standard reports- Matrix and Summary type.

 

 

 

 

 

 

 

 

 

• 

• 

We need to consider some standard classes.

ReportManager class helps to run a report synchronously or asynchronously.

ReportResults class contains the results of running a report.

ReportFilter class contains information about a report filter, including column, operator, and value.

and some Methods of above classes

 

describeReport(reportId) Retrieves report, report type, and extended metadata for a tabular, summary, or matrix report.

Example:Reports.ReportDescribeResult describe =  Reports.ReportManager.describeReport(reportId);

getReportMetadata() Returns metadata about the report, including grouping and summary information.

Example:Reports.ReportMetadata reportMd = describe.getReportMetadata();

getReportFilters() Returns a list of each custom filter in the report along with the field name, filter operator, and filter value.

Example: Reports.ReportFilter filterlist = reportMd.getReportFilters()[0];
filterlist .setValue(filterId);

Apex code

 

Aura component

To load chart on page load.

 

<ltng:require scripts="{!$Resource.chartjs}" afterScriptsLoaded="{!c.createPlannedchart}"/>

For displaying the report

 

 <canvas id="chartCanvas" height="300" width="300"></canvas>

To view standard report

[sourcecode language=”java”]
View Report
[/sourcecode]

Js Code

[sourcecode language=”java”]
var urlPlannedreport = ‘/lightning/r/Report/’+getPlannedReportId+’/view?queryScope=userFolders&fv0=’+accIdsub;

createPlannedchart: function(component) {
var chartCanvas = component.find(“plannedChart”).getElement();
var action = component.get(“c.getreportplanned”);

action.setParams({
“AccId”: component.get(“v.accrecId”)
});
action.setCallback(this, function(response) {
var state = response.getState();
if (state === “SUCCESS”) {
var reportResultData = JSON.parse(response.getReturnValue());
// alert(JSON.stringify(reportResultData));
var chartData = [];
var chartLabels = [];
var nullcheck = reportResultData.groupingsDown.groupings;
if (nullcheck !== null) {
for (var i = 0; i < (reportResultData.groupingsDown.groupings.length); i++) {
//Iterate and prepare the list of Labels for the chart
var labelItem = reportResultData.groupingsDown.groupings[i].label;
chartLabels.push(labelItem);
var keyTemp = reportResultData.groupingsDown.groupings[i].key;
//Prepeare the chart data to be plotted.
var valueTemp = reportResultData.factMap[keyTemp + “!T”].aggregates[0].value;
chartData.push(valueTemp);
}
}
//Construct chart-doughnut/bar
var chart = new Chart(chartCanvas, {
type: ‘bar’,
data: {
labels: chartLabels,
datasets: [{
label: “Count”,
data: chartData,
backgroundColor: [
“#52BE80”,
“#76D7C4”,
“#1E8449”,
“#2ECC71”,
“#FFB74D”,
“#E67E22”,
“#F8C471”,
“#3498DB”,
“#00BCD4”,
“#D32F2F”,
“#82E0AA”,
“#AFB42B”
]
}]
},
options: {
responsive: true,
title: {
display: true,
text: ‘Planned Visits’
},
scales: {

yAxes: [{
ticks: {
// max: 100,
stepSize: 25,
beginAtZero: true
},
scaleLabel: {
display: true,
labelString: ‘Visits Count’
},
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: ‘Created Date’
}
}]
},
maintainAspectRatio: false,
legend: {
display: false,
position: “right”,
fullWidth: false,
}
}
});

} else(state === “ERROR”) {
console.log(‘Problem, response state: ‘ + state);
}

});
$A.enqueueAction(action);
}
[/sourcecode]

You can change the look of charts with the help of chartcanvas methods.

 

 

 

Salesforce Surveys lets you create customized surveys to gather important data from your customers.
Create beautiful, easy-to-use forms for collecting feedback and data from your users or customers. Add different types of questions to gather the data you need. All your valuable survey data is stored in your org so you can harness the power of Salesforce to view data, create reports and dashboards, and share insights with your company.

Gather Feedback from

1.Your Community with the Survey Component
When your community members log in, they have the option to participate in the survey.
2.Users with the Surveys Component
Use the Surveys component to embed an active survey in your Lightning page. This component is available for all types of Lightning pages.

Steps to create a Survey

1.Login in to your org and click on Setup, Search Surveys settings and click on Enable

2.To create your Survey, In App Launcher, look for Surveys, and click on it.

3.Clicking launches the Survey tab.

Click on the New button, To create a new Survey
Which Includes Title for Survey,Questions need to be add and Thank you message.
It also provides Options for Build, Send and Analyze the Survey.
It has provides an Option to make the Question Required.

A.Adding Title for Survey

B.To add Question

We can add Questions of type Picklist,Radio, Rating and Text

 

C.Add thank you message

4.You can also Preview to test, by clicking on Preview button.

It looks as below

 

5.Once the build is done you need to save and Activate the survey.
Note:Once you activate the survey, you can no longer edit it. You can clone the survey and create new versions.

6.Click on Send radio button on the top section Where we will find the feedback link which needs to be shared to the partcipants

By clicking on the Get Survey Link button, you will get the option to choose the link for Participants Inside or Outside(communities should be enabled) of the company

 

7.The Link needs to be shared to the Participants via chatter Or Email, Participants can you this link and submit the feedback/Survey

 

8.We can Monitor the Survey results by clicking on the radio button Analyze

9.We can also create customized Reports and Dasboards based on the Requirement
Note: It is required to create Report type for Surveys.

 

Note: Once you create your first Survey new button will be not available you
can create new versions

Motivation: When you can’t build the desired chart using Visualforce, you can use the vast Google Charts API.

What is Gantt Chart:

A Gantt chart is one of the most popular and useful ways of showing activities (tasks or events) displayed against time.On the left of the chart is a list of the activities and along the below is a suitable time scale. Each activity is represented by a bar; the position and length of the bar reflect the start date, duration and end date,dependencies  of the activity.This allows you to see at a glance: 

• To know which activities are interrelated
• When each activity begins and ends

Does that mean we cannot use Gantt Chart in Salesforce?

No, the following article shows one of the  easiest ways to build Gantt Chart with the help of Google Charts.

Technologies Used: Apex class, Visualforce, Google Gantt chart and JavaScript.

Consider an example of Opportunity stages  where stages will be changed one after the other after the certain end time.Sometimes there may be chances of a direct move from the first stage to last as shown below.

To display dependency arrow you need to mention the dependency name while saving the record value.

If you hover on graph bar, respective bar details will be shown.

How to customize critical path in Gantt Chart?

The critical path in a Gantt chart is the path, or paths, that directly affect the finish date. The critical path in Google Gantt charts is colored red by default, and can be customized using the criticalPathStyle options. You can also turn off the critical path by setting criticalPathEnabled to false.

Critical path in Visualforce

[code language=”css”]
var options = {
height: 275,
Gantt: {
criticalPathEnabled:true //By default it will be true
}
};
[/code]

If you hover on graph bar, respective bar details will be shown.

We can also customize the charts based on certain attributes. For more detail refer Google charts for- Gantt Chart.

Controller Code:

We will pass a list of opportunities which are queried in controller method to javaScript function written in visualforce page using RemoteAction.

[sourcecode language=”html”]
global with sharing class googlegantchart {

public String oppList { get; set; }

@RemoteAction
global static Opportunity[] loadrecords() {
return [select Name,Task_Id__c,Task_Name__c, Start_Date__c, End_Date__c,Duration__c,Dependencies__c,Percent_Complete__c from opportunity where Task_Id__c!=Null];
}
}
[/sourcecode]

VisualForce Code:

We will set the way of displaying data as Gantt manner by using Google.charts.load( ‘current’, { ‘packages’: [‘gantt’]}) method. Google.charts.setOnLoadCallback(InitCharts) method is used to call the javascript method ‘InitCharts’. Javascript function ‘InitCharts’ in our execution calls the controller method and stores the result in result variable. We will pass this data to load function which will display the result in Gantt chart Manner.

[sourcecode language=”html”]
<apex:page controller=”googlegantchart”>
<apex:includeScript id=”a” value=”https://www.google.com/jsapi” />
<apex:sectionHeader title=”Google Charts + Javascript Remoting” subtitle=”Demo of Opportunity Stages” />
<div id=”chart_div” />

<script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script>
<script type=”text/javascript”>
<!–loads the visualization in gant chart view–>
google.charts.load(‘current’, { ‘packages’: [‘gantt’]});
google.charts.setOnLoadCallback(InitCharts);

function InitCharts() {
<!– calls the function called ‘loadrecords’ in googlegantchart controller–>
googlegantchart.loadrecords(
<!– following the usual remoting syntax–>
function(result, event) {

var visualization = new google.visualization.Gantt(document.getElementById(‘chart_div’));
<!–adding data to Chart–>
var data = new google.visualization.DataTable();<!– variable declaration–>

data.addColumn(‘string’, ‘Task ID’);
data.addColumn(‘string’, ‘Task 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 < result.length; i++) {
var r = result[i];
data.addRow(