Re: Google Bar chart problems

4,547 views

Skip to first unread message

asgallant

unread,

Aug 16, 2012, 12:50:31 PM8/16/12

to google-visua...@googlegroups.com

The first two issues are because you are loading the old, deprecated "columnchart" package, which did not support these features. Loading the "corechart" package instead fixes the problem (note, though, that 3d columns are not supported in the new version). To fix the axis scaling, set the viewWindow.min and viewWindow.max options to the minimum and maximum values you want for your chart (note that these are explicit minimum and maximum values, any chart values outside this range will be cropped). To make each bar have its own color, you need to put each data point in its own series and set the "isStacked" option to true. You can use a DataView with calculated columns to put the data in the right format. See an example of all of these using your code here: http://jsfiddle.net/asgallant/X8BmB/

The last item on your list can't be done, though.

On Thursday, August 16, 2012 8:34:08 AM UTC-4, jaav wrote:

I am new in Google Graphs, I need a solution for the following problems:
1. My Ghaph doesn't show The hAxis Title.
2. My Ghaph doesn't show The vAxis Title.
3. The vAxis scale start in the 4.3 value I need that starts in 0 and maximun value = 5.
4. I need each bar appears with diferent colors.
5. I need to show the column value at the either at th top of bootn of the bar
Any Ideas? my code is:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
                        var data = new google.visualization.DataTable(
                                 {
                                 "cols": [
                                 {"id":"","label":"Topping","pattern":"","type":"string"},
                                 {"id":"","label":"Promedio","pattern":"","type":"number"}
                                 ],
                                 "rows": [
                                 {"c":[{"v":"1", "f":null},{"v":4.31,"f":null}]},
                                 {"c":[{"v":"2", "f":null},{"v":4.84,"f":null}]},
                                 {"c":[{"v":"3", "f":null},{"v":4.77,"f":null}]},
                                 {"c":[{"v":"4", "f":null},{"v":4.80,"f":null}]},
                                 {"c":[{"v":"5", "f":null},{"v":4.78,"f":null}]},
                                                 {"c":[{"v":"6", "f":null},{"v":4.80,"f":null}]},
                                                 {"c":[{"v":"7", "f":null},{"v":4.79,"f":null}]},
                                                 {"c":[{"v":"8", "f":null},{"v":4.83,"f":null}]},
                                                 {"c":[{"v":"9", "f":null},{"v":4.77,"f":null}]},
                                                 {"c":[{"v":"10","f":null},{"v":4.85,"f":null}]},
                                                 {"c":[{"v":"11","f":null},{"v":4.52,"f":null}]}

                                 ]
                                }
                        )
//instantiate our chart objects
var chart = new google.visualization.ColumnChart (document.getElementById('chart_div'));


//define options for visualization
var options = {

                                width: 900,
height: 500,
is3D: true,
legend: 'none',
                                title: 'My Graphic',
                                 hAxis: {
                                        title: 'hAxis Title',
                                        titleTextStyle: {color: 'red'},
                                        textPosition: 'out'
                                },

                                vAxis: {
                                        title: 'vAxis Title',
                                        minValue: 0,
                                        maxValue: 5

                                }
};
//draw my chart
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

Reply all

Reply to author

Forward

0 new messages