To show "No data to display" in the angular chart when the data set is empty.

[Priyanka]

I'm looking for some function like , when there is no data in data set or in database to display on chart than in the chart it should give message that "No Data to Display" .

And I want this function for below Charts :

1: Bar Chart

2: HeatMap Chart

3: Pie Chart

4: Spline Chart

5: Tree Chart

6: Table Chart

7: Column Stack Chart

Below image is one example for what we want :

Please Reply ASAP , So i can implement it fast .

Thank You.

[Durga Gopalakrishnan]

Hi Sourabh, 

We have prepared sample based on your requirement. Please check with below snippet and screenshot. 

#1 : Bar, Pie, Spline, Stacked Column Charts 

We suggest you to include HTML DIV to show the custom message and load event to cancel chart rendering when series datasource is empty. In the sample, we have displayed DIV when data is empty and hidden the DIV when data is not empty. Please check with below snippet and sample. 

<div id="div1" style="display:none" align='center'> No Data To Display</div> <br> 

<div id="div2" style="display:none" align='center'> No Data To Display</div> <br> 

//… 

public load1(args: ILoadedEventArgs): void { 

      this.noData(args, "div1"); 

}; 

public load2(args: IAccLoadedEventArgs): void { 

        this.noData(args, "div2"); 

}; 

//… 

public noData(args, name){ 

        var count = 0; 

        for(var i = 0; i < args.chart.series.length; i++) { 

             if (args.chart.series[i].dataSource["length"] == 0 ) 

                 count = count + 1;             

         } 

        if(count == args.chart.series.length) 

        { 

            document.getElementById(name).style.display = "block"; 

            args.cancel = true; 

        }   

    } 

 

Sample : https://stackblitz.com/edit/angular-fmcn5z 

# 2 : HeatMap Chart, Tree Chart 

 

We are validating your reported scenario. We will check this and update the details within two business days(11^th August 2021). We appreciate your patience until then.  

Please revert us if you have any concerns. 

Regards, 

Durga G

[Durga Gopalakrishnan]

Hi Priyanka, 

Thanks for being patience. We have prepared sample based on your requirement for heatmap and diagram control. Please check with below sample and snippets. 

# 2 : HeatMap Chart 

We have provided the given message using the SVG element's text group. Refer to the below code snippet.  

  if (  

      this.hm.dataSource.length == 0 ||  

      this.hm.dataSource.length == undefined  

    ) {  

      document  

        .querySelector('#container_Container_TextGroup')  

        .getElementsByTagName('text')[0].innerHTML = 'No data to display!';  

    }  

  }  

   

Refer to the container element used. The "container" represents the HeatMap component's id value.    

 

   

Refer to the sample:  

https://stackblitz.com/edit/angular-bwvrgt-9vxcwu?file=app.component.ts 

# 3 : Tree Chart 

In the sample, we added the div with a custom message and use the dataloaded event to achieve your requirement. In the dataloaded event if the diagram node collection is empty means we hide the diagram tree chart and display the message and vise-versa.   

Code snippet:  

[.html]  

<div id="div1" style="display: grid;margin-left: 36%; padding-left: 75px;"> No Data To Display</div> <br>  

<div id="diagramControl" class="control-section diagram-organizationalchart" style="display: none;">  

    <div class="col-lg-8 control-section">  

        <div class="content-wrapper">  

            <ejs-diagram #diagram id="diagram" width="100%" height="700px" [getConnectorDefaults]='connDefaults'  

                [getNodeDefaults]='nodeDefaults' [layout]='layout' [dataSourceSettings]='data' [tool]='tool'  

                [snapSettings]='snapSettings' (dataLoaded)="dataLoaded($event)">  

            </ejs-diagram>  

        </div>  

    </div>  

</div>  

  

 [.ts]  

public dataLoaded(arg) {  

    if (this.diagram.nodes.length) {  

      document.getElementById('diagramControl').style.display = 'block';  

      document.getElementById('div1').style.display = 'none';  

    }  

  } 

Sample link: https://stackblitz.com/edit/angular-zojkcz?file=app.component.ts 

Kindly revert us if you have any concerns. 

Regards,  

Durga G