2

Component1 : Dashboard

<div class="slds-grid">
    <div class="slds-p-horizontal--small slds-size--1-of-1"> 
        <div class="slds-box slds-box--small slds-theme--shade slds-text-align--center noBorderRadius">  
            <c:DFEventsTimeline timelineData="{!v.timelineData}"/>
        </div>  
    </div>
</div>

DFEventsTimeline: Charts    //chart is drawn when timelineData is changed

<aura:attribute name="timelineData" type="String" default="{}" access="public"/> 
<aura:handler name="change" value="{!v.timelineData}" action="{!c.drawTimeline}"/> 

<div id="timelineContainer" style="min-width: 400px; height: 300px; margin: 0 auto"></div>

DFEventsTimeline: controller function

drawTimeline : function(component, event, helper) {     
    helper.drawTimeline(component);
}

DFEventsTimeline: helper

drawTimeline: function(component){
    var timelineData = component.get("v.timelineData"); 

    var startDate = Date.parse(timelineData.startDate);
    var endDate = Date.parse(timelineData.endDate);

    console.log(timelineData);

    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'timelineContainer',
            type: 'scatter',
            zoomType: 'xy', 
            plotBorderWidth: 1,
            events:{
                load: function(event){
                    console.log('chart loaded');
                },
                render: function(event){
                    console.log('chart rendered');
                }
            }
        },
        legend: {
            borderWidth: 1
        },
        credits: {
            enabled: false
        },
        title: {
            text: 'Events and Activities'
        },
        xAxis: {
            type: 'datetime', 
            dateTimeLabelFormats: { // don't display the dummy year
                month: '%b %y',
                day: '%e %b'
            },
            title: {
                text: 'Date'
            },
            min: startDate,
            max: endDate,  
            crosshair: {
                width : 1,
                snap : false,
                color : '#555'
            },
            gridLineWidth: 1
            //,offset: -70
        },
        yAxis: {
            title: null,
            labels: {
                enabled: false
            },
            gridLineWidth: 0
        },
        tooltip: { 
            formatter: function() {  
                //console.log(this);
                var dateTime = new Date(this.point.options.x);
                var date = dateTime.getDate() +'/'+ (dateTime.getMonth() + 1) +'/' +dateTime.getFullYear();
                var head = '<b>'+this.point.options.name+'</b><br>';
                var body = '<p>Date :'+date+'</p>';
                return head+body;
            }
        },

        plotOptions: {
            spline: {
                marker: {
                    enabled: true
                }
            }
        },

        series: timelineData.timelineSeriesList
    });
}

I am navigating to Component1 onclick of a button in a component embedded in account details page. First time the chart is displayed correctly. Then I go back to account details page. Again navigate to Component1, the chart is not displayed. The chart container is empty. When I checked, the load and render events are fired correctly but the chart is not displayed. I refresh the page and the chart is displayed again. What is the problem here?

  • Maybe one of these will help? salesforce.stackexchange.com/search?q=highcharts+lightning – Eric Feb 9 '17 at 8:24
  • Hi @nilesh_ramteke Can you please make sure that you're getting the required data(for drawing chart) when you navigate back again? Can you also check whether DOM elements are being duplicated(as in whether the div(with id 'timelineData') is shown more than once)? – SE_User Feb 9 '17 at 8:58
  • @SE_User you are right. The DOM elements are being duplicated. Is there any way to avoid this? – nilesh_ramteke Feb 9 '17 at 9:10
1

SE_User was right. The DOM Elements are duplicating. When I navigate to the component again, it is not overwritten. Instead it is created again and marked active. So I added class to the container.

<div class="timelineContainer" style="min-width: 400px; height: 300px; margin: 0 auto">
</div>

and in javascript I accessed the latest created element.

var cList = document.getElementsByClassName("timelineContainer");
var container = cList[cList.length-1];

and passed container to the renderTo property of highchart. It worked.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.