Revisions to HighChart in LWC with APEX

formatted to make it a code block

Source Link

edit approved Nov 28, 2020 at 12:04

1.3k
2
17
40

import { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/D3chartjs"; import partnerSpendData from '@salesforce/apex/AccountSnapshot_Partnerdetails.getAccSnapshotPartnerDetailNew';

export default class AccountPieChart extends LightningElement { @track error; @track data; @api recordid; chartResourcesLoaded=false;

@wire(partnerSpendData, import {accountId :LightningElement '$recordid'})
partnerSpend({error,data}){
    if(data){
        this.data = data.map(record => {
            return {
                y: record.datatrack,
                name: record.Name
            }
        });
        console.log("++++Data++++"wire,data);
        this.error=undefined;
        
      api} from this.runHighcharts();'lwc';
 import { loadScript }
    else if (error)from {'lightning/platformResourceLoader';
       import this.errorHIGHCHARTS =from error;"@salesforce/resourceUrl/D3chartjs";
     import partnerSpendData from this'@salesforce/apex/AccountSnapshot_Partnerdetails.partnerSpend = undefined;
    }
}getAccSnapshotPartnerDetailNew';

renderedCallbackexport default class AccountPieChart extends LightningElement {
@track error;
@track data;
@api recordid;
chartResourcesLoaded=false;

    @wire(partnerSpendData,  {accountId : '$recordid'})
    partnerSpend({error,data}){
        if(data){
            this.data = data.map(record => {
                return {
                    y: record.data,
                    name: record.Name
                }
            });
            console.log("++++Data++++",data);
            this.error=undefined;
            
    loadScript(this, HIGHCHARTS + "/highcharts     this.js"runHighcharts();
    .then(    }
        else if (error) => {
    console        this.log("SUCCESS:error highcharts= error;
            this.js");partnerSpend = undefined;
        }
    }
    
    loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
    .then(renderedCallback() => {
    console.log("SUCCESS: highcharts.js");

    loadScript(this, HIGHCHARTS + "/exporting.js")
    .then(() => {
        console.log("SUCCESS: exporting.js");

        loadScript(this, HIGHCHARTS + "/export-datahighcharts.js")
        .then(() => {
            console.log("SUCCESS: export-datahighcharts.js");
        //
        loadScript(this, HIGHCHARTS + "/highcharts-3d.runHighchartsjs")
        .then(() => {
        console.log("SUCCESS: highcharts.js");

        loadScript(this, HIGHCHARTS + "/accessibilityexporting.js")
        .then(() => {
            console.log("SUCCESS: exporting.js");

            loadScript(this, HIGHCHARTS + "/export-data.js")
            .then(() => {
                console.log("SUCCESS: export-data.js");
            //    this.runHighcharts();

            loadScript(this, HIGHCHARTS + "/accessibility.js")
            .then(() => {
                console.log("SUCCESS: accessibility.js");
                this.chartResourcesLoaded = true;
                this.runHighcharts();
                })
                .catch(error => console.log("ERROR: accessibility.js"));
            })
            .catch(error => console.log("ERROR: accessibilityexport-data.js"));
            
        })
        .catch(error => console.log("ERROR: export-dataexporting.js"));
        
    })
    .catch(error => console.log("ERROR: exporting.js"));
})
.catch(error => console.log("ERROR: highcharts-3d.js"));

    })
    .catch(error => console.log("ERROR: highcharts.js"));
    }

    runHighcharts() {
        if(this.chartResourcesLoaded  && this.data){
            const containerId = this.template.querySelector('div').id;
            console.log('containerId: ',containerId);
            let container = this.template.querySelector('.chartContainer')
            console.log('data: ',this.data);
    Highcharts.chart(container, {
        Highcharts.chart: {
            type: 'pie'(container,
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
            titlechart: {
                texttype: 'Browser market shares in January'pie', 2018'
            },
            creditsoptions3d: {
                enabled: false
            },
            exporting: {
                enabled: false
            }true,
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentagealpha:.1f}%</b>'
            }45,
            accessibility: {
                point: {
                    valueSuffixbeta: '%'0
                }
            },
            plotOptions    title: {
                pie    text: {'Browser market shares in January, 2018'
                },
    allowPointSelect            credits: true,{
                    cursorenabled: 'pointer',false
                },
    depth            exporting: 35,{
                    dataLabelsenabled: {false
                },
        enabled: true,
       tooltip: {
                format    pointFormat: '<b>'{pointseries.name}</b>: <b>{point.percentage:.1f}%</b>'
 %'               },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth : 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    data: this.data
                }],
            }

        );
        }
    }
}

}

import { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/D3chartjs"; import partnerSpendData from '@salesforce/apex/AccountSnapshot_Partnerdetails.getAccSnapshotPartnerDetailNew';

export default class AccountPieChart extends LightningElement { @track error; @track data; @api recordid; chartResourcesLoaded=false;

@wire(partnerSpendData,  {accountId : '$recordid'})
partnerSpend({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;
    }
}

renderedCallback() {
            
    loadScript(this, HIGHCHARTS + "/highcharts.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");
    
    loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");

    loadScript(this, HIGHCHARTS + "/exporting.js")
    .then(() => {
        console.log("SUCCESS: exporting.js");

        loadScript(this, HIGHCHARTS + "/export-data.js")
        .then(() => {
            console.log("SUCCESS: export-data.js");
        //    this.runHighcharts();

        loadScript(this, HIGHCHARTS + "/accessibility.js")
        .then(() => {
            console.log("SUCCESS: accessibility.js");
            this.chartResourcesLoaded = true;
            this.runHighcharts();
            })
            .catch(error => console.log("ERROR: accessibility.js"));
        })
        .catch(error => console.log("ERROR: export-data.js"));
        
    })
    .catch(error => console.log("ERROR: exporting.js"));
})
.catch(error => console.log("ERROR: highcharts-3d.js"));

})
.catch(error => console.log("ERROR: highcharts.js"));
}

runHighcharts() {
    if(this.chartResourcesLoaded  && this.data){
        const containerId = this.template.querySelector('div').id;
        console.log('containerId: ',containerId);
        let container = this.template.querySelector('.chartContainer')
        console.log('data: ',this.data);
    Highcharts.chart(container, {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
            title: {
                text: 'Browser market shares in January, 2018'
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth : 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                type: 'pie',
                data: this.data
            }],
        }

    );
    }
}

}

import { LightningElement ,track,wire,api} from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import HIGHCHARTS from "@salesforce/resourceUrl/D3chartjs";
import partnerSpendData from '@salesforce/apex/AccountSnapshot_Partnerdetails.getAccSnapshotPartnerDetailNew';

export default class AccountPieChart extends LightningElement {
@track error;
@track data;
@api recordid;
chartResourcesLoaded=false;

    @wire(partnerSpendData,  {accountId : '$recordid'})
    partnerSpend({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;
        }
    }
    
    renderedCallback() {
                
        loadScript(this, HIGHCHARTS + "/highcharts.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");
        
        loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");

        loadScript(this, HIGHCHARTS + "/exporting.js")
        .then(() => {
            console.log("SUCCESS: exporting.js");

            loadScript(this, HIGHCHARTS + "/export-data.js")
            .then(() => {
                console.log("SUCCESS: export-data.js");
            //    this.runHighcharts();

            loadScript(this, HIGHCHARTS + "/accessibility.js")
            .then(() => {
                console.log("SUCCESS: accessibility.js");
                this.chartResourcesLoaded = true;
                this.runHighcharts();
                })
                .catch(error => console.log("ERROR: accessibility.js"));
            })
            .catch(error => console.log("ERROR: export-data.js"));
            
        })
        .catch(error => console.log("ERROR: exporting.js"));
    })
    .catch(error => console.log("ERROR: highcharts-3d.js"));

    })
    .catch(error => console.log("ERROR: highcharts.js"));
    }

    runHighcharts() {
        if(this.chartResourcesLoaded  && this.data){
            const containerId = this.template.querySelector('div').id;
            console.log('containerId: ',containerId);
            let container = this.template.querySelector('.chartContainer')
            console.log('data: ',this.data);
        Highcharts.chart(container, {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth : 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    data: this.data
                }],
            }

        );
        }
    }
}

deleted 268 characters in body

Source Link

edited Oct 6, 2020 at 18:10

SFDC Person

35
1
4

I have created a chart using Highchart with static data. Now i want to pass data through apex. I tried many way but no luckimport { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/D3chartjs"; import partnerSpendData from '@salesforce/apex/AccountSnapshot_Partnerdetails.getAccSnapshotPartnerDetailNew';

export default class AccountPieChart extends LightningElement { here is my code:@track error; @track data; @api recordid; chartResourcesLoaded=false;

import@wire(partnerSpendData,  {accountId LightningElement: ,track,wire'$recordid'})
partnerSpend({error,apidata}){
 from 'lwc';
import  if(data){ 
 loadScript } from 'lightning/platformResourceLoader';
import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs";
import AccountDatathis.data from= '@salesforce/apex/Account_detailsdata.getAccDetailNew';
map(record => {
export default class AccountPieChart extends LightningElement       return {
@track error;
@track data;
@api recordid;

    @wire(AccountDataNew,  {accountId : '$recordid'})
    AccountData({error, y: record.data}){,
        if(data){        name: record.Name
            this.data=data;}
        });
        console.log("++++Data++++",data);
            this.error=undefined;
        
        this.runHighcharts();
        }
        else if (error) {
            this.error = error;
            this.partnerSpend = undefined;
        }
    }
    
    renderedCallback() {
                
        loadScript(this, HIGHCHARTS + "/highcharts.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");
        
        loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");

        loadScript(this, HIGHCHARTS + "/exporting.js")
        .then(() => {
            console.log("SUCCESS: exporting.js");

            loadScript(this, HIGHCHARTS + "/export-data.js")
            .then(() => {
                console.log("SUCCESS: export-data.js");
            //    this.runHighcharts();

            loadScript(this, HIGHCHARTS + "/accessibility.js")
            .then(() => {
                console.log("SUCCESS: accessibility.js");
            this.chartResourcesLoaded = true;
            this.runHighcharts();
                })
                .catch(error => console.log("ERROR: accessibility.js"));
            })
            .catch(error => console.log("ERROR: export-data.js"));
            
        })
        .catch(error => console.log("ERROR: exporting.js"));
    })
    .catch(error => console.log("ERROR: highcharts-3d.js"));

    })
    .catch(error => console.log("ERROR: highcharts.js"));
    }

runHighcharts() {
   runHighcharts if()this.chartResourcesLoaded  && this.data){
        const containerId = this.template.querySelector('div').id;
        console.log('containerId: ',containerId);
        let container = this.template.querySelector('.chartContainer')
        console.log('data: ',this.data);
        new Highcharts.chart(this.template.querySelector('div')container, {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth : 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Brands',
                    colorByPoint: true,
                    data: this.data
                }],
            }

        );
    }
}

}

I have created a chart using Highchart with static data. Now i want to pass data through apex. I tried many way but no luck. here is my code:

import { LightningElement ,track,wire,api} from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs";
import AccountData from '@salesforce/apex/Account_details.getAccDetailNew';

export default class AccountPieChart extends LightningElement {
@track error;
@track data;
@api recordid;

    @wire(AccountDataNew,  {accountId : '$recordid'})
    AccountData({error,data}){
        if(data){
            this.data=data;
            console.log("++++Data++++",data);
            this.error=undefined;
            this.runHighcharts();
        }
        else if (error) {
            this.error = error;
            this.partnerSpend = undefined;
        }
    }
    
    renderedCallback() {
                
        loadScript(this, HIGHCHARTS + "/highcharts.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");
        
        loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");

        loadScript(this, HIGHCHARTS + "/exporting.js")
        .then(() => {
            console.log("SUCCESS: exporting.js");

            loadScript(this, HIGHCHARTS + "/export-data.js")
            .then(() => {
                console.log("SUCCESS: export-data.js");
            //    this.runHighcharts();

            loadScript(this, HIGHCHARTS + "/accessibility.js")
            .then(() => {
                console.log("SUCCESS: accessibility.js");
                 this.runHighcharts();
                })
                .catch(error => console.log("ERROR: accessibility.js"));
            })
            .catch(error => console.log("ERROR: export-data.js"));
            
        })
        .catch(error => console.log("ERROR: exporting.js"));
    })
    .catch(error => console.log("ERROR: highcharts-3d.js"));

    })
    .catch(error => console.log("ERROR: highcharts.js"));
    }

    runHighcharts() {
        const containerId = this.template.querySelector('div').id;
        console.log('containerId: ',containerId);
        console.log('data: ',this.data);
        new Highcharts.chart(this.template.querySelector('div'), {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth : 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Brands',
                    colorByPoint: true,
                    data: this.data
                }],
            }

        );
    }
}

import { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/D3chartjs"; import partnerSpendData from '@salesforce/apex/AccountSnapshot_Partnerdetails.getAccSnapshotPartnerDetailNew';

export default class AccountPieChart extends LightningElement { @track error; @track data; @api recordid; chartResourcesLoaded=false;

@wire(partnerSpendData,  {accountId : '$recordid'})
partnerSpend({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;
    }
}

renderedCallback() {
            
    loadScript(this, HIGHCHARTS + "/highcharts.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");
    
    loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");

    loadScript(this, HIGHCHARTS + "/exporting.js")
    .then(() => {
        console.log("SUCCESS: exporting.js");

        loadScript(this, HIGHCHARTS + "/export-data.js")
        .then(() => {
            console.log("SUCCESS: export-data.js");
        //    this.runHighcharts();

        loadScript(this, HIGHCHARTS + "/accessibility.js")
        .then(() => {
            console.log("SUCCESS: accessibility.js");
            this.chartResourcesLoaded = true;
            this.runHighcharts();
            })
            .catch(error => console.log("ERROR: accessibility.js"));
        })
        .catch(error => console.log("ERROR: export-data.js"));
        
    })
    .catch(error => console.log("ERROR: exporting.js"));
})
.catch(error => console.log("ERROR: highcharts-3d.js"));

})
.catch(error => console.log("ERROR: highcharts.js"));
}

runHighcharts() {
    if(this.chartResourcesLoaded  && this.data){
        const containerId = this.template.querySelector('div').id;
        console.log('containerId: ',containerId);
        let container = this.template.querySelector('.chartContainer')
        console.log('data: ',this.data);
    Highcharts.chart(container, {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
            title: {
                text: 'Browser market shares in January, 2018'
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth : 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                type: 'pie',
                data: this.data
            }],
        }

    );
    }
}

}

added 453 characters in body

Source Link

edited Oct 6, 2020 at 8:48

Rahul Gawale

12.3k
6
33
70

I have created a chart using Highchart with static data. Now i want to pass data through apex. I tried many way but no luck. here is my code: import { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs"; import AccountData from '@salesforce/apex/Account_details.getAccDetailNew';

export default class AccountPieChart extends LightningElement { @track error; @track data; @api recordid;

import { LightningElement ,track,wire,api} from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs";
import AccountData from '@salesforce/apex/Account_details.getAccDetailNew';

export default class AccountPieChart extends LightningElement {
@track error;
@track data;
@api recordid;

    @wire(AccountDataNew,  {accountId : '$recordid'})
    AccountData({error,data}){
        if(data){
            this.data=data;
            console.log("++++Data++++",data);
            this.error=undefined;
            this.runHighcharts();
        }
        else if (error) {
            this.error = error;
            this.partnerSpend = undefined;
        }
    }
    
    renderedCallback() {
                
        loadScript(this, HIGHCHARTS + "/highcharts.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");
        
        loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");

        loadScript(this, HIGHCHARTS + "/exporting.js")
        .then(() => {
            console.log("SUCCESS: exporting.js");

            loadScript(this, HIGHCHARTS + "/export-data.js")
            .then(() => {
                console.log("SUCCESS: export-data.js");
            //    this.runHighcharts();

            loadScript(this, HIGHCHARTS + "/accessibility.js")
            .then(() => {
                console.log("SUCCESS: accessibility.js");
                 this.runHighcharts();
                })
                .catch(error => console.log("ERROR: accessibility.js"));
            })
            .catch(error => console.log("ERROR: export-data.js"));
            
        })
        .catch(error => console.log("ERROR: exporting.js"));
    })
    .catch(error => console.log("ERROR: highcharts-3d.js"));

    })
    .catch(error => console.log("ERROR: highcharts.js"));
    }

    runHighcharts() {
        const containerId = this.template.querySelector('div').id;
        console.log('containerId: ',containerId);
        console.log('data: ',this.data);
        new Highcharts.chart(this.template.querySelector('div'), {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth : 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Brands',
                    colorByPoint: true,
                    data: this.data
                }],
            }

        );
    }
}

}

I have created a chart using Highchart with static data. Now i want to pass data through apex. I tried many way but no luck. here is my code: import { LightningElement ,track,wire,api} from 'lwc'; import { loadScript } from 'lightning/platformResourceLoader'; import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs"; import AccountData from '@salesforce/apex/Account_details.getAccDetailNew';

export default class AccountPieChart extends LightningElement { @track error; @track data; @api recordid;

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

renderedCallback() {
            
    loadScript(this, HIGHCHARTS + "/highcharts.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");
    
    loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
    .then(() => {
    console.log("SUCCESS: highcharts.js");

    loadScript(this, HIGHCHARTS + "/exporting.js")
    .then(() => {
        console.log("SUCCESS: exporting.js");

        loadScript(this, HIGHCHARTS + "/export-data.js")
        .then(() => {
            console.log("SUCCESS: export-data.js");
        //    this.runHighcharts();

        loadScript(this, HIGHCHARTS + "/accessibility.js")
        .then(() => {
            console.log("SUCCESS: accessibility.js");
             this.runHighcharts();
            })
            .catch(error => console.log("ERROR: accessibility.js"));
        })
        .catch(error => console.log("ERROR: export-data.js"));
        
    })
    .catch(error => console.log("ERROR: exporting.js"));
})
.catch(error => console.log("ERROR: highcharts-3d.js"));

})
.catch(error => console.log("ERROR: highcharts.js"));
}

runHighcharts() {
    const containerId = this.template.querySelector('div').id;
    console.log('containerId: ',containerId);
    console.log('data: ',this.data);
    new Highcharts.chart(this.template.querySelector('div'), {
        chart: {
            type: 'pie',
            options3d: {
                enabled: true,
                alpha: 45,
                beta: 0
            }
        },
            title: {
                text: 'Browser market shares in January, 2018'
            },
            credits: {
                enabled: false
            },
            exporting: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            accessibility: {
                point: {
                    valueSuffix: '%'
                }
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    depth : 35,
                    dataLabels: {
                        enabled: true,
                        format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                    }
                }
            },
            series: [{
                type: 'pie',
                name: 'Brands',
                colorByPoint: true,
                data: this.data
            }],
        }

    );
}

}

I have created a chart using Highchart with static data. Now i want to pass data through apex. I tried many way but no luck. here is my code:

import { LightningElement ,track,wire,api} from 'lwc';
import { loadScript } from 'lightning/platformResourceLoader';
import HIGHCHARTS from "@salesforce/resourceUrl/Highchartjs";
import AccountData from '@salesforce/apex/Account_details.getAccDetailNew';

export default class AccountPieChart extends LightningElement {
@track error;
@track data;
@api recordid;

    @wire(AccountDataNew,  {accountId : '$recordid'})
    AccountData({error,data}){
        if(data){
            this.data=data;
            console.log("++++Data++++",data);
            this.error=undefined;
            this.runHighcharts();
        }
        else if (error) {
            this.error = error;
            this.partnerSpend = undefined;
        }
    }
    
    renderedCallback() {
                
        loadScript(this, HIGHCHARTS + "/highcharts.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");
        
        loadScript(this, HIGHCHARTS + "/highcharts-3d.js")
        .then(() => {
        console.log("SUCCESS: highcharts.js");

        loadScript(this, HIGHCHARTS + "/exporting.js")
        .then(() => {
            console.log("SUCCESS: exporting.js");

            loadScript(this, HIGHCHARTS + "/export-data.js")
            .then(() => {
                console.log("SUCCESS: export-data.js");
            //    this.runHighcharts();

            loadScript(this, HIGHCHARTS + "/accessibility.js")
            .then(() => {
                console.log("SUCCESS: accessibility.js");
                 this.runHighcharts();
                })
                .catch(error => console.log("ERROR: accessibility.js"));
            })
            .catch(error => console.log("ERROR: export-data.js"));
            
        })
        .catch(error => console.log("ERROR: exporting.js"));
    })
    .catch(error => console.log("ERROR: highcharts-3d.js"));

    })
    .catch(error => console.log("ERROR: highcharts.js"));
    }

    runHighcharts() {
        const containerId = this.template.querySelector('div').id;
        console.log('containerId: ',containerId);
        console.log('data: ',this.data);
        new Highcharts.chart(this.template.querySelector('div'), {
            chart: {
                type: 'pie',
                options3d: {
                    enabled: true,
                    alpha: 45,
                    beta: 0
                }
            },
                title: {
                    text: 'Browser market shares in January, 2018'
                },
                credits: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
                },
                accessibility: {
                    point: {
                        valueSuffix: '%'
                    }
                },
                plotOptions: {
                    pie: {
                        allowPointSelect: true,
                        cursor: 'pointer',
                        depth : 35,
                        dataLabels: {
                            enabled: true,
                            format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                        }
                    }
                },
                series: [{
                    type: 'pie',
                    name: 'Brands',
                    colorByPoint: true,
                    data: this.data
                }],
            }

        );
    }
}

Source Link

asked Oct 6, 2020 at 8:48

SFDC Person

35
1
4

Loading

Stack Exchange Network

Return to Question