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

skp
 
on Aug 19, 2019 12:35 AM
Sample_301944.zip
5403 Views

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;
        }

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Aug 19, 2019 03:10 AM

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