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).

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:
- have missing ratings inserted chart (ie, if there no values @ rating '3', insert zero).
- order ratings in chart. (google charts sort you, it's easier order them.)
- change ratings
{"id":"","label":"ratings","type":"string"}, - 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
Post a Comment