{"id":4788,"date":"2015-08-29T05:30:57","date_gmt":"2015-08-29T05:30:57","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=4788"},"modified":"2015-08-31T17:02:48","modified_gmt":"2015-08-31T17:02:48","slug":"create-radar-chart-lightning-component","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-radar-chart-lightning-component\/","title":{"rendered":"Salesforce Lightning Component – Radar Chart"},"content":{"rendered":"

To create Radar chart in lightning component, we will be using chart.js<\/a> library. If you are new to lightning then please go through basics <\/a>and also I would suggest to go through lightning trailhead <\/a>modules.<\/p>\n

\"Lightning<\/a>
Lightning Component for Radar Chart<\/figcaption><\/figure>\n

<\/p>\n

Apex class<\/strong><\/p>\n

\r\n\/**\r\n * Author\t:\tJitendra Zaa\r\n * Desc\t\t:\tController class used to create demo RadarData to be used in Lightning Component\r\n * *\/\r\npublic class RadarChartData {\r\n\t\r\n    @AuraEnabled\r\n    public static String getLeadJSON(){\r\n        \r\n        List<Lead> lstLead = [SELECT Id, LeadSource FROM Lead limit 100 ];\r\n        Map<String,Integer> mapLeadSource = new Map<String,Integer>();\r\n        \r\n        for(Lead l : lstLead)\r\n        {\r\n            if(mapLeadSource.containsKey(l.LeadSource))\r\n            {\r\n                mapLeadSource.put(l.LeadSource, mapLeadSource.get(l.LeadSource) + 1 ) ;\r\n            }else{\r\n                mapLeadSource.put(l.LeadSource, 1) ;        \r\n            }\r\n        }\r\n        \r\n        RadarDataWrapper radarData = new RadarDataWrapper();\r\n        for(String key : mapLeadSource.keySet())\r\n        {\r\n            radarData.radarLabels.add(key);\r\n            radarData.radarData.add(mapLeadSource.get(key));\r\n        }\r\n        \r\n        return System.json.serialize(radarData);\r\n    }\r\n    \r\n    \/**\r\n     * Wrapper class to serialize as JSON as return Value\r\n     * *\/\r\n    class RadarDataWrapper\r\n    {\r\n       public List<String> radarLabels {get;set;}\r\n       public List<Integer> radarData {get;set;}\r\n        \r\n        public RadarDataWrapper(){\r\n            radarLabels = new List<String>();\r\n            radarData = new List<Integer>();\r\n        }\r\n    }\r\n    \r\n}\r\n<\/pre>\n
Annotation @AuraEnabled is used to provide access to lightning components that they can apex methods from Javascript.\u00a0In above Apex class we have used wrapper class, where we are populating labels for Radar chart and value associated with them and returning JSON string.<\/p>\n
RadarChart.cmp<\/strong><\/p>\n
\r\n<aura:component controller="RadarChartData" implements="force:appHostable">\r\n    <ltng:require scripts="\/resource\/Chart_js\/" afterScriptsLoaded="{!c.init}"\/>\r\n\r\n<div class="heading">\r\n    \tRadar Chart showing Lead count by Source\r\n    <\/div>\r\n\r\n\r\n<div>  \r\n        <canvas aura:id="radarChart" id="radarCHart123" width="400" height="400"\/>\r\n    <\/div>\r\n\r\n<\/aura:component>\r\n<\/pre>\n
We have specified that this component implements “force:appHostable” means we can create tab for this component and it can be accessed from Salesforce1 mobile navigation. External library “chart.js” is loaded from static resource named “chart_js” with the help of “ltng:require” tag. Once this javascript file is loaded, we are informing lightning framework to execute method “init()” of js controller.<\/p>\n
RadarChartController.js<\/strong><\/p>\n
\r\n({\r\n\tinit : function(component, event, helper) { \r\n\t\thelper.setupRadarChart(component);\r\n\t}\r\n})\r\n<\/pre>\n
Above Javascript controller simply calls method of javascript helper.<\/p>\n
RadarChartHelper.js<\/strong><\/p>\n
\r\n({\r\n    setupRadarChart : function(component) {\r\n        \r\n        var action = component.get("c.getLeadJSON");\r\n        action.setCallback(this, function(a){\r\n            var jsonRetVal = JSON.parse(a.getReturnValue()); \r\n            console.log(jsonRetVal.radarLabels);\r\n            \r\n            var radarChartData = {\r\n\t\t\tlabels: jsonRetVal.radarLabels,\r\n\t\t\tdatasets: [\r\n                { \r\n                    fillColor: "rgba(220,220,220,0.2)",\r\n                    strokeColor: "rgba(220,220,220,1)",\r\n                    pointColor: "rgba(220,220,220,1)",\r\n                    pointStrokeColor: "#fff",\r\n                    pointHighlightFill: "#fff",\r\n                    pointHighlightStroke: "rgba(220,220,220,1)",\r\n                    data: jsonRetVal.radarData\r\n                }\r\n            ]\r\n        };\r\n      \r\n        var el = component.find('radarChart').getElement();\r\n        var ctx = el.getContext('2d');\r\n        new Chart(ctx).Radar(radarChartData);   \r\n            \r\n        });\r\n        $A.enqueueAction(action); \r\n\t},  \r\n\t\r\n})\r\n<\/pre>\n
Apex method is called from javascript helper. Once it is executed and result is returned, we are setting various values from JSON string returned in Radar chart library.<\/p>\n
RadarChart.css<\/strong><\/p>\n
\r\n.THIS.heading {\r\n    margin-top : 10px;\r\n    font-weight:bold;\r\n}\r\n.THIS{\r\n    padding-left : 10px;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
How to create Radar chart using Lightning Component in Salesforce with the help of Chart.js library<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[311],"class_list":["post-4788","post","type-post","status-publish","format-standard","hentry","category-salesforce","tag-lightning-component"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":4788,"position":0},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4493,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/create-collapsible-panel-component-in-lightning\/","url_meta":{"origin":4788,"position":1},"title":"Salesforce  Lightning Component – expand and collapsable panel example","author":"Jitendra","date":"May 22, 2015","format":false,"excerpt":"How to use aura:facet component and Learn creating expand and collapsable reusable lightning component in Salesforce","rel":"","context":"In "Lightning"","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Lightning CollapsiblePanel Component - Expanded","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Lightning-CollapsiblePanel-Component-Expanded.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":4788,"position":2},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":5109,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-component-for-wikipedia-search\/","url_meta":{"origin":4788,"position":3},"title":"Lightning Component for Wikipedia search","author":"Jitendra","date":"January 6, 2016","format":false,"excerpt":"Initially I thought creating Wikipedia Search component will be straight forward. I can simply use AJAX request from Lightning component to get result from Wikipedia using its REST API. Soon, I discovered about Content Security Policy\u00a0in Lightning components developer guide. If we attempt to use AJAX or REST API in\u2026","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Component for Wikipedia Search","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2016\/01\/Salesforce-Lightning-Component-for-Wikipedia-Search.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":6848,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lightning-web-component-event-handling-pub-sub\/","url_meta":{"origin":4788,"position":4},"title":"Lightning Web Component Event Handling – Pub Sub","author":"Jitendra","date":"June 21, 2019","format":false,"excerpt":"How to handle events in Lightning Web Components between nested and non nested Components","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Event Communication between Lightning Web Components","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2019\/05\/Event-Communication-between-Lightning-Web-Components.png?fit=675%2C382&ssl=1&resize=525%2C300 1.5x"},"classes":[]},{"id":7058,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/gravatar-reusable-lightning-web-component\/","url_meta":{"origin":4788,"position":5},"title":"Gravatar – Reusable Lightning Web Component","author":"Jitendra","date":"May 2, 2020","format":false,"excerpt":"Avoid asking your users to upload pictures - Use Globally Recognized Avatar , Reusable Lightning Web Component","rel":"","context":"In "Salesforce"","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Gravatar - Reusable Lightning Web Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2020\/05\/Gravatar-Reusable-Lightning-Web-Component-e1624579234338.png?fit=700%2C201&ssl=1&resize=700%2C400 2x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4788","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=4788"}],"version-history":[{"count":4,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4788\/revisions"}],"predecessor-version":[{"id":4793,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/4788\/revisions\/4793"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=4788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=4788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=4788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}