Google Bar chart problems

Showing 1-2 of 2 messages
Google Bar chart problems jaav 8/16/12 5:34 AM
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>

Re: Google Bar chart problems asgallant 8/16/12 9:50 AM
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.