I'm not sure why you are drawing the chart twice, once just for the
vertical axis.
1. The gap is really the annotation text for your second chart. It's the
aura color around the text that is being drawn on top of the axis line.
You could probably turn off the aura color, but it would be better to avoid
this whole problem in the first place.
2. You are using minValue, which only means that value should be included
in the chart. What you want is viewWindow: { min: -1000 }
3. The spacing of the values for the vertical axis ticks (which correspond
to the horizontal gridlines) is not controllable directly. However, you
can use the 'ticks' option to specify exactly which values to use.
4. We don't have enough positioning and styling controls for annotations
yet. We'll be working on that, however, so it is good to know your
preference.
On Thu, Sep 3, 2015 at 9:53 AM, Pamela Whittaker <
[email protected]> wrote:
> This is my code
>
>
>
> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
> http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
> <html xmlns="http://www.w3.org/1999/xhtml";>
> <head>
> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
> <title>Untitled Document</title>
> <script type="text/javascript" src="https://www.google.com/jsapi";
> ></script>
> <script type="text/javascript">
> google.load("visualization", "1.1", {packages:["corechart"]});
>
> google.setOnLoadCallback(drawChart1);
> function drawChart1() {
>
> // Create and populate the data table.
> var data = google.visualization.arrayToDataTable([
> ['X', 'COST AVOIDANCE', { role: 'style' }, { role:
> 'annotation' }],
> ['BUDGET&15 (FULL YEAR) (D)', 10446, 'color: #CEB7B7',
> 10446],
> ['REVIEWED 2015 TARGET', 11121, 'color: #E5DE20', 11121],
> ['DIRECT SAVINGS (YTD) (B)', 6091, 'color: #99ED55', 6091]
>
> ]
> );
>
> new google.visualization.ColumnChart(document.getElementById(
> 'Chart_Div_1')).
> draw(data,{
> legend: 'none',
> width:600, height:600,
> vAxis: { minValue: -1000, maxValue: 1500,textColor:
> 'transparent',baselineColor: 'transparent'},
> hAxis : {baselineColor: 'transparent'},
> backgroundColor: { fill:'none' },
> bar: {groupWidth: 60 },
> tooltip: { trigger: 'none' }
> }
> );
>
> }
> google.setOnLoadCallback(drawChart2);
> function drawChart2() {
>
> // Create and populate the data table.
> var data = google.visualization.arrayToDataTable([
> ['X', 'COST AVOIDANCE', { role: 'style' }, { role:
> 'annotation' }],
> [{v:0, f:'BUDGET&15 (FULL YEAR) (D)'}, 10446, 'color:
> transparent', 10446],
> [{v:1, f:'REVIEWED 2015 TARGET'}, 11121, 'color: transparent',
> 11121],
> [{v:2, f:'DIRECT SAVINGS (YTD) (B'}, 6091, 'color:
> transparent', 6091]
> ]
> );
>
> // Create and draw the visualization.
> new google.visualization.ColumnChart(document.getElementById(
> 'Chart_Div_2')).
> draw(data,{
> legend: 'none',
> width:600, height:600,
> vAxis: { minValue: -1000, maxValue: 1500, gridlineColor:
> 'transparent', baselineColor: 'transparent'},
> hAxis : {textColor: 'transparent', gridlineColor:
> 'transparent'},
> backgroundColor: { fill:'none' },
> bar: {groupWidth: 60 },
> chartArea:{left:53},
> tooltip: { trigger: 'none' }
> }
> );
> }
>
>
> </script>
>
> </head>
>
> <body>
> <div id="Chart_Div_1" style="width: 600px; height: 600px;"> </div>
> <div id="Chart_Div_2" style="width: 600px; height: 600px; position:
> relative; top: -600px"> </div>
> </body>
> </html>
>
>
>
> I have three problems
>
> 1) There is a gap in the vertical axes around 10,000 for some reason and I
> can't see why
> 2) I want the minimum to be -1000 but it it -5000 even thought I have put
> -1000
> 3) Can the gap between the horizontal lines be every 2,000 or am I stuck
> with every 5,000
> 4) Am I right in thinking that the annotation has to be at the top of the
> bar? I would like it half way down if possible.
>
>
> Thanks
>
> --
> You received this message because you are subscribed to the Google Groups
> "Google Visualization API" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To post to this group, send email to
> [email protected].
> Visit this group at
> http://groups.google.com/group/google-visualization-api.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/google-visualization-api/3d8a05c7-bc55-4bd6-9c0d-926389d468f5%40googlegroups.com
> <https://groups.google.com/d/msgid/google-visualization-api/3d8a05c7-bc55-4bd6-9c0d-926389d468f5%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
--
Daniel LaLiberte <https://plus.google.com/100631381223468223275?prsrc=2> -
978-394-1058
[email protected] <[email protected]> 5CC, Cambridge MA
[email protected] <[email protected]> 9 Juniper Ridge
Road, Acton MA
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
To view this discussion on the web visit
https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJO8g2cQBTQj7hv%3D3YGykdA1h2BCjYy3a7m4%2BMdGqmoRLA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
