Put shortcuts on top of the inside panel in google interactive bar chart

I created a histogram using google column table , now

  • I only have integer values โ€‹โ€‹in my datatable, but gois divide acis with floating values, is there a way to force only integer labels?
  • Is there a way to show value labels above or inside the histogram? I found some way for a graphical chart, but I would like to save the chart interactively.
+1
google-visualization
source share
2 answers

For the first problem, you can use the gridlines property, see this post to find out how you can use it.

In the second question, I really do not understand. When you exit the panel with the mouse, the pop-up window with the values โ€‹โ€‹no longer appears at the top of the panel?

0
source share

There is no direct solution to this issue, since annotations are not supported in the bar chart. But let me share this work: you can create a combo chart with two series having the same data (like column charts) along with the annotation column. Set the type of the first series to columns, as well as the rows of other rows. Finally, set the visibleInLegend, lineWidth and pointSize properties of the second series to false and 0, respectively.

 var data = new google.visualization.DataTable(); data.addColumn({ type: 'string', label: 'Labels' }); data.addColumn({ type: 'number', label: 'Bar Series' }); data.addColumn({ type: 'number', label: 'Line Series' }); data.addColumn({ type: 'string', role: 'annotation' }); data.addRows([['Label1', 10, 10, '10'], ['Label1', 20, 20, '20'], ['Label1', 40, 40, '40'], ['Label1', 5, 5, '5'], ['Label1', 30, 30, '30'], ]); var barchart = new google.visualization.ComboChart(document.getElementById('bar_element')); var options = {series: [{ type: 'bars' }, { type: 'line', lineWidth: 0, visibleInLegend:false, pointSize: 0}]}; barchart.draw(data, options); 
+12
source share

All Articles