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 agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.