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