Google LineChart Displaying Nagative Value - charts

Question

I am displaying Google Line chart using below code
google.charts.load('current', {'packages':['corechart']});
//google.charts.setOnLoadCallback(drawChart);
function drawChart(chart_data) {
var jsonData = chart_data;
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'SOLD');
data.addColumn('number', 'BOUGHT');
$.each(jsonData, function(i, jsonData){
var Day = parseFloat($.trim(jsonData.Day));
var SOLD = parseFloat($.trim(jsonData.SOLD));
var BOUGHT = parseFloat($.trim(jsonData.BOUGHT));
data.addRows([[Day, SOLD, BOUGHT]]);
});
var options = {
fontName: 'Roboto',
height: 400,
fontSize: 12,
chartArea: {
left: '7%',
width: '93%',
height: 350
},
pointSize: 10,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
vAxis: {
title: '',
titleTextStyle: {
fontSize: 13,
italic: false,
color: '#333'
},
viewWindow: {
min: 0
},
textStyle: {
color: '#333'
},
baselineColor: '#ccc',
gridlines:{
color: '#eee',
count: 10
}
},
hAxis: {
textStyle: {
color: '#333'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#333'
}
},
series: {
0: { color: '#f58646' },
1: { color: '#66BB6A' }
}
};
var chart = new google.visualization.LineChart(document.getElementById('google-line'));
chart.draw(data, options);
}
Its working fine like below if there data greater than 0
But if there all data value is 0, its display like below
I do not want display negative data and I will have never negative value in my data. So I have added code like below in options as suggested in some questions here.
viewWindow: {
min: 0
},
However its not working and still I have negative values showing. Can anyone help me here for solve the puzzle? Also in horizontal line its missing dates and show in batch of 5 like 5, 10, 15, its possible to show all?
Thanks!

Answer 1

that looks like some sort of bug with the 'current' version.
if we use version '45' it works properly.
google.charts.load('45', ...
see following working snippet...
google.charts.load('45', {
packages: ['corechart']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'SOLD');
data.addColumn('number', 'BOUGHT');
data.addRows([
[0, 0, 0],
[5, 0, 0],
[10, 0, 0],
[15, 0, 0],
[20, 0, 0],
[25, 0, 0],
[30, 0, 0]
]);
var options = {
fontName: 'Roboto',
height: 400,
fontSize: 12,
chartArea: {
left: '7%',
width: '93%',
height: 350
},
pointSize: 10,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
vAxis: {
title: '',
titleTextStyle: {
fontSize: 13,
italic: false,
color: '#333'
},
viewWindow: {
min: 0
},
textStyle: {
color: '#333'
},
baselineColor: '#ccc',
gridlines: {
color: '#eee',
count: 10
}
},
hAxis: {
textStyle: {
color: '#333'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#333'
}
},
series: {
0: {
color: '#f58646'
},
1: {
color: '#66BB6A'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('google-line'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="google-line"></div>
or, when using the 'current' version,
if we add a max value to the viewWindow, then it will work...
google.charts.load('current', {
packages: ['corechart']
}).then(function() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'SOLD');
data.addColumn('number', 'BOUGHT');
data.addRows([
[0, 0, 0],
[5, 0, 0],
[10, 0, 0],
[15, 0, 0],
[20, 0, 0],
[25, 0, 0],
[30, 0, 0]
]);
var options = {
fontName: 'Roboto',
height: 400,
fontSize: 12,
chartArea: {
left: '7%',
width: '93%',
height: 350
},
pointSize: 10,
curveType: 'function',
backgroundColor: 'transparent',
tooltip: {
textStyle: {
fontName: 'Roboto',
fontSize: 13
}
},
vAxis: {
title: '',
titleTextStyle: {
fontSize: 13,
italic: false,
color: '#333'
},
viewWindow: {
min: 0,
max: 1
},
textStyle: {
color: '#333'
},
baselineColor: '#ccc',
gridlines: {
color: '#eee',
count: 10
}
},
hAxis: {
textStyle: {
color: '#333'
}
},
legend: {
position: 'top',
alignment: 'center',
textStyle: {
color: '#333'
}
},
series: {
0: {
color: '#f58646'
},
1: {
color: '#66BB6A'
}
}
};
var chart = new google.visualization.LineChart(document.getElementById('google-line'));
chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="google-line"></div>