+ Start a Discussion
sumit dsumit d 

Showing data only when data is available in LWC

Hi All,
I am trying to show the data only when the data is available in LWC. how can i do this ?

My Component and JS is given below:- 
<template>
    <lightning-card title='My Completed Tasks'>
      <!--template if:true={data}-->
        <div>
          <canvas class="donut" lwc:dom="manual"></canvas>
       </div>
       
      <!--template if:false={data}>
        <div class="slds-align_absolute-center slds-m-top_xx-large" style ="font-size: large;">No Data is available to show</div>
   </template-->
     
    </lightning-card>
</template>

JS File:- 
import { LightningElement, wire, track } from 'lwc';
//importing the Chart library from Static resources
import Chartjs from '@salesforce/resourceUrl/Chartjs';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
//importing the apex method.
import getAllTasksByType from '@salesforce/apex/TaskChartController.getAllTasksByType';
export default class DonutChart extends LightningElement {
    //isData = false;
    @wire(getAllTasksByType) task({ error, data }) {
        if (data) {
            console.log('get value', data)
            for (var key in data) {
                this.updateChart(data[key].count, data[key].label);
            }
            this.error = undefined;
        }
        else if (error) {
            console.log('get value', error);
            this.error = error;
            //this.task = undefined;
        }
    }
    chart;
    chartjsInitialized = false;
    config = {
        type: 'doughnut',
        data: {
            datasets: [
                {
                    data: [
                    ],
                    backgroundColor: [
                        'rgb(255,99,132)',
                        'rgb(255,159,64)',
                        'rgb(255,205,86)',
                        'rgb(75,192,192)',
                    ],
                    label: 'Dataset 1'
                }
            ],
            labels: []
        },
        options: {
            responsive: true,
            legend: {
                position: 'right'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;
        Promise.all([
            loadScript(this, Chartjs)
        ]).then(() => {
            const ctx = this.template.querySelector('canvas.donut')
                .getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
        })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading ChartJS',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
    updateChart(count, label) {
        //isData = true;
        this.chart.data.labels.push(label);
        this.chart.data.datasets.forEach((dataset) => {
            dataset.data.push(count);
        });
        this.chart.update();
    }
}

Can anyone help me how to show data when data is available?

 
mukesh guptamukesh gupta
Hi Sumit,

Can you please share your apex class code, After that we will confirm what data you want to display
sumit dsumit d
Hi,

my Apex method is given below:- 

@AuraEnabled(cacheable=true)
public static List<DataSet> getAllTasksByType(){
List<AggregateResult> result =  [SELECT Count(Id) cnt,Type  
                                FROM Task
                                WHERE Status = 'Completed'
                                AND OwnerId =: userinfo.getUserId()
                                GROUP BY Type];
List<DataSet> dataSet = new List<DataSet>();
for(AggregateResult ar:result){
String type =  (String)ar.get('Type') ;
Integer total =(Integer)ar.get('cnt');
dataSet.add(new DataSet(type ,total));
}
System.debug('dataSet'+dataSet);
return dataSet ;
}
public class DataSet{
    public DataSet(String label ,Integer count){
        this.label  = label ;
        this.count = count ;
        }
       
        @AuraEnabled
        public String label {get;set;}
        @AuraEnabled
        public Integer  count {get;set;}
       
}
mukesh guptamukesh gupta
Hi Sumit,

Please use below code:-
<template>
    <lightning-card title='My Completed Tasks'>
      <template if:true={resultItems}>
       <template for:each={resultItems} for:item="item">

        <div>
          label : - {item.label}  count:- {item.count}
          <canvas class="donut" lwc:dom="manual"></canvas>
       </div>
       </template>
    </template>
       
      template if:false={resultItems}>
        <div class="slds-align_absolute-center slds-m-top_xx-large" style ="font-size: large;">No Data is available to show</div>
   </template>
     
    </lightning-card>
</template>
 
import { LightningElement, wire, track } from 'lwc';
//importing the Chart library from Static resources
import Chartjs from '@salesforce/resourceUrl/Chartjs';
import { loadScript } from 'lightning/platformResourceLoader';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
//importing the apex method.
import getAllTasksByType from '@salesforce/apex/TaskChartController.getAllTasksByType';
export default class DonutChart extends LightningElement {
    //isData = false;
    resultItems;
    @wire(getAllTasksByType) task({ error, data }) {
        if (data) {
            console.log('get value', data)
            this.resultItems = data;
           /* for (var key in data) {
                this.updateChart(data[key].count, data[key].label);
            }*/
            this.error = undefined;
        }
        else if (error) {
            console.log('get value', error);
            this.error = error;
            //this.task = undefined;
        }
    }
    chart;
    chartjsInitialized = false;
    config = {
        type: 'doughnut',
        data: {
            datasets: [
                {
                    data: [
                    ],
                    backgroundColor: [
                        'rgb(255,99,132)',
                        'rgb(255,159,64)',
                        'rgb(255,205,86)',
                        'rgb(75,192,192)',
                    ],
                    label: 'Dataset 1'
                }
            ],
            labels: []
        },
        options: {
            responsive: true,
            legend: {
                position: 'right'
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    };
    renderedCallback() {
        if (this.chartjsInitialized) {
            return;
        }
        this.chartjsInitialized = true;
        Promise.all([
            loadScript(this, Chartjs)
        ]).then(() => {
            const ctx = this.template.querySelector('canvas.donut')
                .getContext('2d');
            this.chart = new window.Chart(ctx, this.config);
        })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error loading ChartJS',
                        message: error.message,
                        variant: 'error',
                    }),
                );
            });
    }
    updateChart(count, label) {
        //isData = true;
        this.chart.data.labels.push(label);
        this.chart.data.datasets.forEach((dataset) => {
            dataset.data.push(count);
        });
        this.chart.update();
    }
}


if you need any assistanse, Please let me know!!

Kindly mark my solution as the best answer if it helps you.

Thanks
Mukesh