4 chart problems

46 views
Skip to first unread message

Pamela Whittaker

unread,
Sep 3, 2015, 9:53:52 AM9/3/15
to Google Visualization API
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&amp;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&amp;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

Daniel LaLiberte

unread,
Sep 3, 2015, 10:44:22 AM9/3/15
to Google Visualization API
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.


--
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 google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
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.
For more options, visit https://groups.google.com/d/optout.



--
dlaliberte@Google.com   5CC, Cambridge MA
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA

Pamela Whittaker

unread,
Sep 3, 2015, 12:04:42 PM9/3/15
to Google Visualization API

Thanks - ticks worked and the viewWindow: { min: -1000 }. I thought I had tried viewWindow: { min: -1000 } already and it didn't work but I must have had a typo. The first problem has gone away and I thought I was right about the annotation - the client will just have put up with it being where it is.  Thanks
Reply all
Reply to author
Forward
0 new messages