Geek Answers Handbook

How to label columns in a Google column chart

I use the Google Chart API to create a chart for values ​​that go from 1 to millions.

Problem Bars that represent smaller values ​​(for example: less than 50 or so) are invisible in the graph, and I cannot see which values ​​correspond to a particular x axis.

This will be allowed if I can somehow print the values ​​of the Y axis on top of the bars. But I could not find mention in the API document on how to do this.

There is a similar problem here, but it does not answer my question.

set shortcuts on top of the inside panel in the interactive bar graph of Google

There are a few more older answers to the questions here, I hope someone can find a solution or workaround , so ask this question again.

Google visualization: Column chart, simple question, but can not find the answer

How to show the values ​​at the top of the columns of the Google chart API

Can you show me how to achieve what I want to use How to set up this Google chart?

+8
javascript jquery google-visualization charts jqplot
source share
2 answers

Check out Andrew Gallant JSFiddle here:

http://jsfiddle.net/asgallant/QjQNX/

It uses smart hacking combo charts to accomplish what you think you are looking for.

google.load("visualization", "1", {packages: ["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('number', 'Value'); data.addColumn({type: 'string', role: 'annotation'}); data.addRows([ ['Foo', 53, 'Foo text'], ['Bar', 71, 'Bar text'], ['Baz', 36, 'Baz text'], ['Cad', 42, 'Cad text'], ['Qud', 87, 'Qud text'], ['Pif', 64, 'Pif text'] ]); var view = new google.visualization.DataView(data); view.setColumns([0, 1, 1, 2]); var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(view, { height: 400, width: 600, series: { 0: { type: 'bars' }, 1: { type: 'line', color: 'grey', lineWidth: 0, pointSize: 0, visibleInLegend: false } }, vAxis: { maxValue: 100 } }); }
+17
source share

I had some setbacks using annotation and an invisible line (for example, if it was displayed in a tooltip as another series).

I made a hack for ComboChart (it can work with BarChart and ColumnChart , as well as with a few changes) to insert labels in SVG.

Check out this script: http://jsfiddle.net/augustomen/FE2nh/

Tested on Firefox 21, Chrome 27 and IE 9.

+3
source share

More articles:


All Articles