I wanted to try out some charting on LWC and I thought what better framework than C3. In this post we will see a component which will display opportunities in various statues associated to an account.
As a prerequisite you would need c3 and d3 (c3 has a dependency on d3.js) framework loaded in static resource for the charting to work .
Download the latest version of the C3 and D3 from below.
C3 -> https://github.com/c3js/c3/releases/latest
D3 -> https://github.com/d3/d3/releases/download/v5.9.7/d3.zip
Couple of important points for charting:
- Load the dependency in the same order that I mentioned below. D3 first and then follow it up with C3.
-
We have added the a parameter t and assigned the current time to it.This is done to make sure the cache is refreshed every time the scripts are loaded.If we do not do this then there is an issues if we add multiple charts in a single component.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<!–Render the chart only when the opportunity data is available.–> | |
<template if:true={opportunityData}> | |
<!–We need not have another component for chart, | |
I thought it would be a better idea seperate out the charting component | |
for better readability–> | |
<c-opportunity-pie-chart chart-data={opportunityData}></c-opportunity-pie-chart> | |
</template> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { LightningElement,api,wire,track } from 'lwc'; | |
import opportunityAggregation from '@salesforce/apex/OpportunityDataService.aggregateOpportunities' | |
export default class OpportunityChartContainer extends LightningElement { | |
@api recordId; //As the component is loaded on a account detail page, we will get access to the account Id. | |
@track opportunityData=[];//Chart accepts data in multiple formats, array, object etc. We are using array here. | |
//get the data from the backend | |
@wire(opportunityAggregation,{accountId : '$recordId'}) opptyData({error, data}){ | |
if(data){ | |
let oppData = Object.assign({},data); | |
/* | |
this.opportunityData will in the below format | |
[['Closed Won',2],['Closed Lost',4],['Negotiation',5]]; | |
*/ | |
for(let key in oppData){ | |
if(oppData.hasOwnProperty(key)){ | |
let tempData=[key, oppData[key]]; | |
this.opportunityData.push(tempData); | |
} | |
} | |
} | |
if(error) | |
console.log(error); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="opportunityChartContainer"> | |
<apiVersion>46.0</apiVersion> | |
<isExposed>true</isExposed> | |
<targets> | |
<target>lightning__RecordPage</target> | |
<target>lightning__AppPage</target> | |
<target>lightning__HomePage</target> | |
</targets> | |
</LightningComponentBundle> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public with sharing class OpportunityDataService { | |
@AuraEnabled(cacheable=true) | |
public static Map<String, Integer> aggregateOpportunities(String accountId){ | |
Map<String, Integer> opportunityStatusMap = new Map<String, Integer>(); | |
//Aggregate the opportunities. | |
for(AggregateResult aggr : [SELECT Count(Id), StageName | |
FROM Opportunity | |
WHERE AccountId=:accountId | |
GROUP BY StageName]) { | |
opportunityStatusMap.put((String)(aggr.get('StageName')), (Integer)(aggr.get('expr0'))); | |
} | |
return opportunityStatusMap; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<lightning-card title="Opportunities"> | |
<!–C3 manipulates the dom and in order for it to do so we need to add the lwc:dom attribute–> | |
<div lwc:dom="manual" class="c3"></div> | |
</lightning-card> | |
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { LightningElement, api,track } from 'lwc'; | |
import { loadStyle, loadScript } from 'lightning/platformResourceLoader'; | |
import C3 from '@salesforce/resourceUrl/c3';//load the c3 and d3 from the static resources. | |
import D3 from '@salesforce/resourceUrl/d3'; | |
export default class OpportunityPieChart extends LightningElement { | |
@api chartData; | |
@track chart; | |
@track loadingInitialized=false; | |
librariesLoaded = false; | |
//This is used called when the DOM is rendered. | |
renderedCallback() { | |
if(this.librariesLoaded) | |
this.drawChart(); | |
//this.librariesLoaded = true; | |
if(!this.loadingInitialized) { | |
this.loadingInitialized = true; | |
/* | |
We have added the a parameter t and assigned the current time to it. | |
This is done to make sure the cache is refrehed everytime the scripts are loaded. | |
If we do not do this then there is an issues if we add multiple charts in a single component. | |
*/ | |
Promise.all([ | |
loadScript(this, D3 + '/d3.min.js?t='+new Date().getTime()), | |
loadScript(this, C3 + '/c3-0.7.4/c3.min.js?t='+new Date().getTime()), | |
loadStyle(this, C3 + '/c3-0.7.4/c3.min.css?t='+new Date().getTime()), | |
]) | |
.then(() => { | |
this.librariesLoaded = true; | |
//Call the charting method when all the dependent javascript libraries are loaded. | |
this.drawChart(); | |
}) | |
.catch(error => { | |
console.log('The error ', error); | |
}); | |
} | |
} | |
drawChart() { | |
this.chart = c3.generate({ | |
bindto: this.template.querySelector('div.c3'),//Select the div to which the chart will be bound to. | |
data: { | |
columns: this.chartData, | |
type : 'donut' | |
}, | |
donut : { | |
title : 'Opportunities', | |
label: { | |
format: function(value, ratio, id) { | |
return value; | |
} | |
} | |
} | |
}); | |
} | |
//destroy the chart once the elemnt is destroyed | |
disconnectedCallback() { | |
this.chart.destroy(); | |
} | |
} |
This is just a simple example for one to start with C3. Please share the beautiful charts that you build. Enjoy Charting!!!
Do you have a gauge type of chart in this.
like a speedometer with a needle.
if yes can you share an example for the same.
Thanks
Hey Moz,
I do not have a ready example for guage chart.. But C3.js has support for the Guage charts (https://c3js.org/samples/chart_gauge.html). Please try implementing it. Let me know if you face any issues.
I do have a similar requirement and try to use the same C3 for gauge but facing the following error
Error:
This page has an error. You might just need to refresh it.
[url or json or rows or columns is required.]
Failing descriptor: {markup://c:pOC_Chart}
HTML:
JS:
import { LightningElement } from ‘lwc’;
import { loadScript,loadStyle} from ‘lightning/platformResourceLoader’;
import chartjs from ‘@salesforce/resourceUrl/csone_C3’;
import c3css from ‘@salesforce/resourceUrl/POC_c3’;
import d3js from ‘@salesforce/resourceUrl/POC_d3’;
export default class POC_Chart extends LightningElement {
renderedCallback(){
this.loadchart();
}
loadchart(){
Promise.all([
loadScript(this, chartjs),
loadScript(this, d3js),
loadStyle(this,c3css),
]).then((values) => {
const ctx = this.template.querySelector(‘canvas.guage’);
var chart = new c3.generate(ctx, this.config);
});
}
config = {
data: {
columns: [
[‘data’, 69.4]
],
type: ‘gauge’,
},
gauge: {
max: 100,
width: 30,
units: ‘ %’
},
color: {
pattern: [‘#FF0000’, ‘#F97600’, ‘#F6C600’, ‘#60B044’], // the three color levels for the percentage values.
threshold: {
// unit: ‘value’, // percentage is default
// max: 200, // 100 is default
values: [30, 60, 90, 100]
}
},
size: {
height: 180
}
}
}
Couple of things:
1. Make sure the html element has the lwc:dom=”manual”.
2. Use the bindTo property in the c3 config to attach generated chart to the element.
3. do no create a new instance of the c3.generate method.