I am using ng-google-charts.js library to display a column chart.
If we have data then the column chart will render like this.Column Chart with data
If we don't have any data to display then the column chart should be rendered like this.
Columns Chart with out data
I spent lot of time to find out the solution. But endup with no solution.
Can someone please help me on how to achieve this?
Use noData() method to enable "No data" label: chart. noData().
Empty Rows If your form has blank rows, it may be because these rows used to have data in them but they were deleted. To truly delete rows, highlight the rows by clicking on the "2" and dragging to "5".
Excel 2016: Click Insert > Insert Column or Bar Chart icon, and select a column chart option of your choice. Excel 2013: Click Insert > Insert Column Chart icon, and select a column chart option of your choice. Excel 2010 and Excel 2007: Click Insert > Column, and select a column chart option of your choice.
you could use an annotation to display No Data Copy
basically, check if the data table is empty
if so, add a row for the annotation
use an empty string so no label appears on the x-axis
use 0
as the value, so there is something to 'annotate'
if (emptyData.getNumberOfRows() === 0) {
emptyData.addRows([
['', 0, null, 'No Data Copy']
]);
}
then change the annotation.stem
to be 'transparent'
and increase the length
so that it appears in the middle of the chart
annotations: {
stem: {
color: 'transparent',
length: 120
}
}
if you don't want annotations when data is present,
set the annotation column value to null
see following working snippet, two charts are drawn to show the chart both with and without data
google.charts.load('current', {
callback: function () {
// create empty data table
var emptyData = new google.visualization.DataTable({
cols: [
{label: 'Element', type: 'string'},
{label: 'Density', type: 'number'},
{role: 'style', type: 'string'},
{role: 'annotation', type: 'string'}
]
});
var withData = emptyData.clone();
var options = {
// set annotation for -- No Data Copy
annotations: {
// remove annotation stem and push to middle of chart
stem: {
color: 'transparent',
length: 120
},
textStyle: {
color: '#9E9E9E',
fontSize: 18
}
},
bar: {groupWidth: '95%'},
height: 400,
legend: {position: 'none'},
vAxis: {
viewWindow: {
min: 0,
max: 30
}
},
width: 600
};
// if no data add row for annotation -- No Data Copy
if (emptyData.getNumberOfRows() === 0) {
emptyData.addRows([
['', 0, null, 'No Data Copy']
]);
}
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_0'));
chart.draw(emptyData, options);
withData.addRows([
['Copper', 8.94, '#b87333', null],
['Silver', 10.49, 'silver', null],
['Gold', 19.30, 'gold', null],
['Platinum', 21.45, 'color: #e5e4e2', null]
]);
chart = new google.visualization.ColumnChart(document.getElementById('chart_div_1'));
chart.draw(withData, options);
},
packages: ['corechart']
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_0"></div>
<div id="chart_div_1"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With