Google charts how to always shows the tooltip

Question

Using the code below showed what Do I have to do to fix the following problems:

I need to show the column values (always) at the top of the bar without make click on it.
I need to assign one color a each bar
I need to show the x and Y labels
I need to show the minimun value=0 and the maximun value to 5, actually the graphic shows from 4.3 to 5.0

Any ideas? thank you in advance.

<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: 800,
                height: 300,
                is3D: true,
                legend: 'none',         
                axisTitlesPosition: 'in',
                title: 'My Graphic',

                hAxis: {
                    title: 'hAxis Title', 
                    titleTextStyle: {color: 'red'},
                    textPosition: 'out'
                },

                vAxis: {

                    viewWindowMode: 'explicit', 
                    viewWindow: {
                        max: 5.0,
                        min: 0.0
                    },
                    minValue: 0.0, 
                    maxValue: 5.0, 
                    textPosition: 'out'

                }
            };

            //draw my chart
            chart.draw(data, options);

        }

    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 700px;"></div>
  </body>
</html>

实际图

Answer 1

Many Thanks to asgallant.

Please goto https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/6FyfEBphXO4

Google charts how to always shows the tooltip

Question

1 answers

solution1
0 ACCPTED 2012-08-31 16:06:58

Google charts how to always shows the tooltip

Question

1 answers

solution1 0 ACCPTED 2012-08-31 16:06:58

solution1
0 ACCPTED 2012-08-31 16:06:58