javascript - Show No data message when chart has no data - Stack Overflow

admin管理员组

文章数量:1026416

I am trying to show no data message when chart has no data. Is it correct?

  var ctx = document.getElementById('mycanvas').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["aa", "bb", "cc", "dd"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: ['red', 'blue', 'green', 'yello'],
                    data: data.length ? data: [{ label: "No Data", value: 100 }],
                }]
            },
            options: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: { bodyFontSize: 12 }
            }
        });

I am not getting No data message when data length is 0.

I am trying to show no data message when chart has no data. Is it correct?

  var ctx = document.getElementById('mycanvas').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["aa", "bb", "cc", "dd"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: ['red', 'blue', 'green', 'yello'],
                    data: data.length ? data: [{ label: "No Data", value: 100 }],
                }]
            },
            options: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: { bodyFontSize: 12 }
            }
        });

I am not getting No data message when data length is 0.

• javascript
• jquery
• angularjs
• charts

Share Improve this question Follow edited Dec 11, 2017 at 12:01 Lizzy 2,18333 gold badges2121 silver badges3333 bronze badges asked Dec 11, 2017 at 9:58 krishkrish 1,11766 gold badges2626 silver badges5454 bronze badges 3

• Your ternary seems to be false – Zooly Commented Dec 11, 2017 at 10:01
• return data.length and check the result, if it return 0 try data.length <= 0 but i think this way goes nothing.. – Pedram Commented Dec 11, 2017 at 10:01
• What I can advice to you is manage it in the view. Don't display chart at all if there isn't data. <canvas id="mycanvas" ng-if="data.length > 0"></canvas> & <span ng-if="data.length == 0">No data</span> – Zooly Commented Dec 11, 2017 at 10:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Easiest is to use conditional rendering.

Assuming you're using AngularJS (you referenced tag), you can use ngIf directive. If data array is empty, then don't display chart.

<canvas id="myChart" ng-if="data != 0"></canvas>
<span ng-if="data == 0">No data</span>

Else, you can solve it in your script, by checking before or after draw the data length. I remend you this snippet.

Other solution following your wish could be to adapt drawn data to received data.

    if($scope.requestedLeaveTypeCount.length > 0){
      data = {
        labels: ["EL", "AL", "PL", "CL"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: ['#F0CB8C', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
            data: $scope.requestedLeaveTypeCount,
        }]
      }
    } else {
      data = {
        labels: ["No data"],
        datasets: [{
          labels:'No data',
          backgroundColor: ['#D3D3D3'],
          data: [100]
        }]
      }
    }

https://plnkr.co/edit/QXljAeeM4Ul3Y47EPcbq?p=preview

I am trying to show no data message when chart has no data. Is it correct?

  var ctx = document.getElementById('mycanvas').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["aa", "bb", "cc", "dd"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: ['red', 'blue', 'green', 'yello'],
                    data: data.length ? data: [{ label: "No Data", value: 100 }],
                }]
            },
            options: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: { bodyFontSize: 12 }
            }
        });

I am not getting No data message when data length is 0.

I am trying to show no data message when chart has no data. Is it correct?

  var ctx = document.getElementById('mycanvas').getContext('2d');
        var chart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ["aa", "bb", "cc", "dd"],
                datasets: [{
                    label: "My First dataset",
                    backgroundColor: ['red', 'blue', 'green', 'yello'],
                    data: data.length ? data: [{ label: "No Data", value: 100 }],
                }]
            },
            options: {
                legend: {
                    position: 'right',
                    labels: {
                        boxWidth: 12
                    }
                },
                tooltips: { bodyFontSize: 12 }
            }
        });

I am not getting No data message when data length is 0.

• javascript
• jquery
• angularjs
• charts

Share Improve this question Follow edited Dec 11, 2017 at 12:01 Lizzy 2,18333 gold badges2121 silver badges3333 bronze badges asked Dec 11, 2017 at 9:58 krishkrish 1,11766 gold badges2626 silver badges5454 bronze badges 3

• Your ternary seems to be false – Zooly Commented Dec 11, 2017 at 10:01
• return data.length and check the result, if it return 0 try data.length <= 0 but i think this way goes nothing.. – Pedram Commented Dec 11, 2017 at 10:01
• What I can advice to you is manage it in the view. Don't display chart at all if there isn't data. <canvas id="mycanvas" ng-if="data.length > 0"></canvas> & <span ng-if="data.length == 0">No data</span> – Zooly Commented Dec 11, 2017 at 10:03

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Easiest is to use conditional rendering.

Assuming you're using AngularJS (you referenced tag), you can use ngIf directive. If data array is empty, then don't display chart.

<canvas id="myChart" ng-if="data != 0"></canvas>
<span ng-if="data == 0">No data</span>

Else, you can solve it in your script, by checking before or after draw the data length. I remend you this snippet.

Other solution following your wish could be to adapt drawn data to received data.

    if($scope.requestedLeaveTypeCount.length > 0){
      data = {
        labels: ["EL", "AL", "PL", "CL"],
        datasets: [{
            label: "My First dataset",
            backgroundColor: ['#F0CB8C', '#A9D5D4', '#E8A3D7', '#CFA3FD'],
            data: $scope.requestedLeaveTypeCount,
        }]
      }
    } else {
      data = {
        labels: ["No data"],
        datasets: [{
          labels:'No data',
          backgroundColor: ['#D3D3D3'],
          data: [100]
        }]
      }
    }

https://plnkr.co/edit/QXljAeeM4Ul3Y47EPcbq?p=preview

本文标签： javascriptShow No data message when chart has no dataStack Overflow