Skip to main content
Salesforce

Return to Answer

added 868 characters in body
Source Link
Rahul Gawale
Rahul Gawale
  • 12.3k
  • 6
  • 33
  • 70

Update You need to convert the data in the below format.

data: [{
        name: 'Chrome',
        y: 61.41,
        sliced: true,
        selected: true
    }, {
        name: 'Internet Explorer',
        y: 11.84
    }]

Which you can do using the below code. note that I have used array.map function to convert the data format.

@wire(AccountDataNew,  {accountId : '$recordid'})
AccountData({error,data}){
    if(data){
        this.data = data.map(record => {
            return {
                y: record.data,
                name: record.Name
            }
        });
        console.log("++++Data++++",data);
        this.error=undefined;
        
        this.runHighcharts();
    }
    else if (error) {
        this.error = error;
        this.partnerSpend = undefined;
    }
}

Update You need to convert the data in the below format.

data: [{
        name: 'Chrome',
        y: 61.41,
        sliced: true,
        selected: true
    }, {
        name: 'Internet Explorer',
        y: 11.84
    }]

Which you can do using the below code. note that I have used array.map function to convert the data format.

@wire(AccountDataNew,  {accountId : '$recordid'})
AccountData({error,data}){
    if(data){
        this.data = data.map(record => {
            return {
                y: record.data,
                name: record.Name
            }
        });
        console.log("++++Data++++",data);
        this.error=undefined;
        
        this.runHighcharts();
    }
    else if (error) {
        this.error = error;
        this.partnerSpend = undefined;
    }
}
Source Link
Rahul Gawale
Rahul Gawale
  • 12.3k
  • 6
  • 33
  • 70

I think its just a sequence issue. The chart seems to be rendered before you get the data from the wired apex method.

You need to make sure that before you render the chart, scripts and the data are loaded.

Also, you need to make sure that the chart resources are loaded only once. For that, you need to set a property when the loading is complete.

So in the innermost loadScript call create and set a flag chartResourcesLoaded to true.

...
loadScript(this, HIGHCHARTS + "/accessibility.js")
.then(() => {
    this.chartResourcesLoaded = true;
    this.runHighcharts();
}
...

Now, you also need to make sure that the code in the runHighcharts() function does not run until you get the data from the wired call. So wrap that code in if condition like below.

 runHighcharts() {
    if(this.chartResourcesLoaded  && this.data){
        // all your existing code
    }
 }

Also please note that you are using a wrong query selector to get the container of the chart.

this.template.querySelector('div')

With the above, you are never sure which div you are querying. So instead of using the generic selector, add a class(say chart-container) to the div in which you want to render the chart and use the class selector like below.

this.template.querySelector('.chart-container')