google visualization - Column chart: how to show all labels on horizontal axis -


i've been trying show labels on horizonal axis of chart, haven't been able that!

i tried using haxis.showtextevery=1 not work

(see https://developers.google.com/chart/interactive/docs/gallery/columnchart).

enter image description here

basically, i show numbers "5", "7" , "9" missing in above chart.

here javascript code, lot.

<script type="text/javascript">  google.setonloadcallback(drawchart1);  function drawchart1(){      var data = new google.visualization.datatable(      {         "cols":[             {"id":"","label":"ratings","type":"number"},             {"id":"","label":"# of movies","type":"number"}],             "rows":[                 {"c":[{"v":9},{"v":26}]},                 {"c":[{"v":8},{"v":64}]},                 {"c":[{"v":10},{"v":5}]},                 {"c":[{"v":7},{"v":50}]},                 {"c":[{"v":6},{"v":38}]},                 {"c":[{"v":5},{"v":10}]},                 {"c":[{"v":2},{"v":1}]},                 {"c":[{"v":4},{"v":1}]}             ]});       var options = {         "title":"rating distribution",         "vaxis":{"title":"# of movies","minvalue":0},         "haxis":{"title":"ratings","maxvalue":10},"legend":"none","is3d":true,"width":800,"height":400,"colors":["red"]      };      var chart = new google.visualization.columnchart(document.getelementbyid('chart_movies_per_rating'));chart.draw(data, options);  }  </script>  

update: solution developed, following answer below (thanks again!). http://jsfiddle.net/mdt86/x8dafm9u/104/

<script type="text/javascript"> google.setonloadcallback(drawchart1);  function drawchart1(){  var data = new google.visualization.datatable(       {"cols":          [{"id":"","label":"ratings","type":"string"},         {"id":"","label":"# of movies","type":"number"}],               "rows":              [{"c":[{"v":"0"},{"v":0}]},              {"c":[{"v":" 1"},{"v":0}]},              {"c":[{"v":" 2"},{"v":1}]},              {"c":[{"v":" 3"},{"v":0}]},              {"c":[{"v":" 4"},{"v":1}]},              {"c":[{"v":" 5"},{"v":10}]},              {"c":[{"v":" 6"},{"v":38}]},              {"c":[{"v":" 7"},{"v":50}]},              {"c":[{"v":" 8"},{"v":64}]},              {"c":[{"v":" 9"},{"v":26}]},              {"c":[{"v":" 10"},{"v":5}]}              ]         }  );    var options =      {"title":"rating distribution",     "vaxis":{"title":"# of movies","minvalue":0},     "haxis":{"title":"ratings","maxvalue":10},     "legend":"none",     "is3d":true,     "width":800,     "height":400,     "colors":["cc0000"]};     var chart = new google.visualization.columnchart(document.getelementbyid('chart_movies_per_rating'));     chart.draw(data, options);  }      </script> 

your problem related continuous versus discrete subtleties in columnchart. basically, have continuous values labels on haxis, , showtextevery works discrete ones. fix this, following:

  1. have missing ratings inserted chart (ie, if there no values @ rating '3', insert zero).
  2. order ratings in chart. (google charts sort you, it's easier order them.)
  3. change ratings {"id":"","label":"ratings","type":"string"},
  4. use showtextevery:1 in options

below code demonstrates this:

var data = new google.visualization.datatable( {   "cols":[     {"id":"","label":"ratings","type":"string"},     {"id":"","label":"# of movies","type":"number"}],   "rows":[     {"c":[{"v":'10'},{"v":5}]},     {"c":[{"v":'9'}, {"v":26}]},     {"c":[{"v":'8'}, {"v":64}]},     {"c":[{"v":'7'}, {"v":50}]},     {"c":[{"v":'6'}, {"v":38}]},     {"c":[{"v":'5'}, {"v":10}]},     {"c":[{"v":'4'}, {"v":1}]},     {"c":[{"v":'3'}, {"v":0}]},     {"c":[{"v":'2'}, {"v":1}]},     {"c":[{"v":'1'}, {"v":0}]},   ]});  var options = {   "title":"rating distribution",   "vaxis":{"title":"# of movies","minvalue":0},   "haxis":{"title":"ratings",showtextevery:1},   "legend":"none",   "width":800,"height":400,"colors":["red"] }; 

Comments