如何删除出现在谷歌图表底部的零

Question

I have created the following chart:

The javascript function which I have used is as follows:

    <script>
google.load('visualization', '1', {packages: ['corechart', 'bar', 'table']});
google.setOnLoadCallback(loadcharts);
var dept= 'General Ward';

function drawBasic() {

    //alert(dept);

var abc = $.ajax({url:'kpi23.php?        dept='+dept,async:false,dataType:"json",}).responseText;
  var data = new google.visualization.DataTable(abc);


  var formatter = new google.visualization.NumberFormat({
   pattern: 'short'
  });
  formatter.format(data, 1);
  formatter.format(data, 2);
  formatter.format(data, 3);
  formatter.format(data, 4);
  formatter.format(data, 5);
  formatter.format(data, 6);

  var view = new google.visualization.DataView(data);
  view.setColumns([0,
    1, {calc: "stringify", sourceColumn: 1, type: "string", role: "annotation"},
    2, {calc: "stringify", sourceColumn: 2, type: "string", role: "annotation"},
    3, {calc: "stringify", sourceColumn: 3, type: "string", role: "annotation"},
    4, {calc: "stringify", sourceColumn: 4, type: "string", role: "annotation"},
    5, {calc: "stringify", sourceColumn: 5, type: "string", role: "annotation"},
    6, {calc: "stringify", sourceColumn: 6, type: "string", role: "annotation"}
  ]);

  var options = {
    chart: {
      title: 'Footfall by Day of Week'
    },
   annotations: {
   textStyle: {
    fontSize: 10
  }
},
height: 400,
series: {
  0:{color:'#083874'},
  1:{color:'#94CAFC'},
  2:{color:'#EBBA25'},
  3:{color:'#F59E47'},
  4:{color:'#9A9FA2'}
},
vAxis: {title: "Revenue", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}, viewWindowMode: "explicit", viewWindow: {min: 0}, format: 'short'},
hAxis: {title: "Month", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}},
legend: {position: 'top', maxLines: 3},
bar: {groupWidth: '70%'},
isStacked: true
 };

 var chart = new google.visualization.ColumnChart(
     document.getElementById('chart_div'));

  chart.draw(view, options);
}

I see some zeros appearing in the X Axis whereas the JSON does not contain any 0's. How can I get rid of these zeros?

Answer 1

Here's an example of a custom calculated column that returns null for the annotation, if the value is also null.

It's ugly because calc: doesn't pass the columnIndex .

A cleaner way might be to add the annotation columns to the google DataTable, instead of using a DataView...

 google.charts.load("current", {packages:['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable({ "cols":[ {"label":"Month","type":"string"}, {"label":"Day Care","type":"number"}, {"label":"Semi Private","type":"number"}, {"label":"General Ward","type":"number"}, {"label":"ICU","type":"number"}, {"label":"Private","type":"number"}, {"label":"Suite","type":"number"} ], "rows":[ {"c":[{"v":"FEB"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}, {"c":[{"v":"JAN"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}, {"c":[{"v":"DEC"},{"v":null},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]}, {"c":[{"v":"NOV"},{"v":49023.47},{"v":541438.55},{"v":442690.4},{"v":394919.81},{"v":497903.68},{"v":198755.42}]} ] }); var formatter = new google.visualization.NumberFormat({ pattern: 'short' }); formatter.format(data, 1); formatter.format(data, 2); formatter.format(data, 3); formatter.format(data, 4); formatter.format(data, 5); formatter.format(data, 6); var view = new google.visualization.DataView(data); view.setColumns([0, 1, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 1);}, type: "string", role: "annotation"}, 2, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 2);}, type: "string", role: "annotation"}, 3, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 3);}, type: "string", role: "annotation"}, 4, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 4);}, type: "string", role: "annotation"}, 5, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 5);}, type: "string", role: "annotation"}, 6, {calc: function (dataTable, rowIndex) {return getAnnotation(dataTable, rowIndex, 6);}, type: "string", role: "annotation"} ]); function getAnnotation(dataTable, rowIndex, columnIndex) { return dataTable.getFormattedValue(rowIndex, columnIndex) || null; } var options = { chart: { title: 'Footfall by Day of Week' }, annotations: { textStyle: { fontSize: 10 } }, height: 400, series: { 0:{color:'#083874'}, 1:{color:'#94CAFC'}, 2:{color:'#EBBA25'}, 3:{color:'#F59E47'}, 4:{color:'#9A9FA2'} }, vAxis: {title: "Revenue", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}, viewWindowMode: "explicit", viewWindow: {min: 0}, format: 'short'}, hAxis: {title: "Month", titleTextStyle: {italic: false}, gridlines: {color: 'transparent'}}, legend: {position: 'top', maxLines: 3}, bar: {groupWidth: '70%'}, isStacked: true }; var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values")); chart.draw(view, options); } 

 <script src="https://www.gstatic.com/charts/loader.js"></script> <div id="columnchart_values" style="width: 900px; height: 300px;"></div>