Hide column when null or Zero value in mixed chart using ChartJS in AngularJS

Last Reply 27 days ago By dharmendr

Posted 27 days ago

I'm developing a mixed chart one is a bar and the other one is a line chart. It has two y-axes and one x-axis.

X-axis is common for a mixed chart(bar and line chart). One y-axis is for bar chart which is on the left and the other y-axis is for line chart which is on the right.

Whenever the null api value comes, the chart disappears.

If the null api value comes, the chart must hide only the null api value and display all other values.

    $scope.months = null;
    $http.get(apiUrl + "/api/Warehouse/GetMonthDetails")
    .then(function (response) {
       $scope.months = JSON.parse(response.data);
       $scope.options = {          
           title: {
               display: true,
               text: 'Quantity v/s Value(in months)',
               fontSize: 18,
               position: 'bottom'
           },           
           scales: {
               yAxes: [
                 {
                     id: 'y-axis-1',
                     type: 'linear',
                     display: true,
                     position: 'left'
                 },
                 {
                     id: 'y-axis-2',
                     type: 'linear',
                     display: true,
                     position: 'right'
                 }
               ]
           }          
       }
       $scope.colors = ['#00ADF9', '#949FB1'];
       $scope.labels = [$scope.months[0].MonthName, $scope.months[1].MonthName, $scope.months[2].MonthName, $scope.months[3].MonthName, $scope.months[4].MonthName, $scope.months[5].MonthName, $scope.months[6].MonthName];
       $scope.data = [[$scope.months[0].Qty, $scope.months[1].Qty, $scope.months[2].Qty, $scope.months[3].Qty, $scope.months[4].Qty, $scope.months[5].Qty, $scope.months[6].Qty],
                [$scope.months[0].Value, $scope.months[1].Value, $scope.months[2].Value, $scope.months[3].Value, $scope.months[4].Value, $scope.months[5].Value, $scope.months[6].Value]];
       
       $scope.datasetOverride = [{
         label: "Quantity",
         borderWidth: 1,
         type: 'bar',
         yAxisID: 'y-axis-1'
     },
     {
         label: "Value",
         borderWidth: 3,
         hoverBackgroundColor: "rgba(255,99,132,0.4)",
         hoverBorderColor: "rgba(255,99,132,1)",
         type: 'line',
         yAxisID: 'y-axis-2'
     }];
   })

 

<div class="card-body ch-width" style="">
    <div class="table-responsive">
        <table class="table">
            <tr>
                <canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" width="281%" chart-colors="colors" chart-options="options" chart-dataset-override="datasetOverride" style="margin-top:12%"></canvas>
            </tr>                                       
        </table>
    </div>
</div>

 

        [HttpGet]
        [ActionName("GetMonthDetails")]
        public string GetMonthWise()
        {
            SqlConnection myConnection = new SqlConnection();
            myConnection.ConnectionString = ConfigurationManager.ConnectionStrings["ERPConnectionStringL"].ConnectionString;
            SqlCommand sqlCmd = new SqlCommand();
            sqlCmd.CommandType = CommandType.StoredProcedure;
            sqlCmd.CommandText = "REPORT_WH_DASHBOARD";
            sqlCmd.Connection = myConnection;
            SqlDataAdapter sda = new SqlDataAdapter(sqlCmd);
            DataSet ds = new DataSet();
            string jsonString = string.Empty;
            myConnection.Open();
            sda.Fill(ds);
            myConnection.Close();
            jsonString = JsonConvert.SerializeObject(ds.Tables[5]);
            return jsonString;
        }

 

Posted 27 days ago

Hi skp,

Check this example. Now please take its reference and correct your code.

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Mixed type charts</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.3/angular-chart.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("MyApp", ["chart.js"]);
        app.controller("MyController", function ($scope) {
            // Get months using WebApi.
            $scope.months = [];
            $scope.months.push({ MonthName: 'Jan', Qty: 65, Value: 28 });
            $scope.months.push({ MonthName: 'Feb', Qty: 0, Value: 0 });
            $scope.months.push({ MonthName: 'Mar', Qty: 80, Value: 40 });
            $scope.months.push({ MonthName: 'Apr', Qty: 49, Value: 19 });
            $scope.months.push({ MonthName: 'May', Qty: 58, Value: 25 });
            $scope.months.push({ MonthName: 'Jun', Qty: 32, Value: 89 });
            $scope.months.push({ MonthName: 'Jul', Qty: 92, Value: 48 });

            $scope.colors = ['#00ADF9', '#949FB1'];
            $scope.labels = [];
            var qty = [];
            var value = [];
            for (var i = 0; i < $scope.months.length; i++) {
                if ($scope.months[i].Qty != 0 && $scope.months[i].Value != 0) {
                    $scope.labels.push($scope.months[i].MonthName);
                    qty.push($scope.months[i].Qty);
                    value.push($scope.months[i].Value);
                }
            }
            $scope.data = [qty, value];
            $scope.options = {
                title: {
                    display: true,
                    text: 'Quantity v/s Value(in months)',
                    fontSize: 18,
                    position: 'bottom'
                },
                scales: {
                    yAxes: [{
                        id: 'y-axis-1',
                        type: 'linear',
                        display: true,
                        position: 'left'
                    }, {
                        id: 'y-axis-2',
                        type: 'linear',
                        display: true,
                        position: 'right'
                    }]
                }
            }

            $scope.datasetOverride = [{
                label: "Quantity",
                borderWidth: 1,
                type: 'bar',
                yAxisID: 'y-axis-1'
            }, {
                label: "Value",
                borderWidth: 3,
                hoverBackgroundColor: "rgba(255,99,132,0.4)",
                hoverBorderColor: "rgba(255,99,132,1)",
                type: 'line',
                yAxisID: 'y-axis-2'
            }];
        });
    </script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
    <canvas id="base" class="chart-bar" chart-data="data" chart-labels="labels" width="281%"
        chart-colors="colors" chart-options="options" chart-dataset-override="datasetOverride"
        style="margin-top: 12%"></canvas>
</body>
</html>

Demo