I am developing a gantt chart based on the object in our org and got stuck in between.

The aim is to define a range of date on X-Axis(Due Date and Completed Date) and Y-Axis should contain the name of the record.

I am passing the set of values to the helper class as a string(I have converted the MAP into String using JSON.Serialize), but unable to assign this JSON value into the header/range of Chart. Below are the codes.....

Component :

Apex Controller ::

public with sharing class GraphController {

public List<LineChartVar> myLineChartVarList;

public class LineChartVar {
    string label;
    integer firstValue;
    integer secondValue;       

    public LineChartVar(string a, integer b, integer c){
        label = a;
        firstValue = b;
        secondValue = c;

    public static string getLineChartMap(){
    Map<String, String> mp = new Map<String, String>();
    String date1;
    for(DDV_Work_Tasks__c value : [SELECT  Name, DDV_Due_Date__c,DDV_Date_Completed__c  FROM DDV_Work_Tasks__c Where DDV_Date_Completed__c != NULL])
        date1 = value.DDV_Due_Date__c + ' ' + value.DDV_Date_Completed__c;
        mp.put(value.Name, date1);
    return JSON.Serialize(mp);


JS Controller ({
ctr : function(cmp, event, helper) { var temp = []; var temp2 = []; var action1 = cmp.get("c.getLineChartMap");
action1.setCallback(this, function(response){
if(response.getState() === 'SUCCESS' && response.getReturnValue()){ temp2 = JSON.parse(response.getReturnValue()); helper.createLineGraph(cmp, temp2); }
$A.enqueueAction(action1); } })

***Helper JS ::: ({ createLineGraph : function(cmp, temp) { console.log('temp--->>>',temp); var label = []; var firstValue = []; var secondValue = [];

    for(var a=0; a< temp.length; a++){
    var el = cmp.find('lineChart').getElement();
    var ctx = el.getContext('2d');

    new Chart(ctx, {
        type: 'line',
        data: {
                labels: label,
                datasets: [{
                  label: 'USD Sent',
                  data: firstValue,
                  backgroundColor: "rgba(153,255,51,0.4)"
                }, {
                  label: 'USD Recieved',
                  data: secondValue,
                  backgroundColor: "rgba(255,153,0,0.4)"



Could you please help me out of this....

Thanks a lot.

Ravi Ranjan

  • please format your code and add any 'debugging' info =) – glls Jan 25 at 15:47

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.