Google charts not cooperating with me

0
votes

I have a few issues with google chart:

  1. I want the Y-axis to be from 0 to 20 and a grid-line should occur every 2 points: So I'll have 0,2,4,6,8,10,12, etc and I'm trying to achieve that with this line of code

    'vAxis':{ title: 'Score',  titleTextStyle: {color: '#27318B'}, 
 maxValue:20,  minValue:0,  gridlines: {count:10, color:'#27318B'} }

    But it starts at 0 and ends at 22,5 and it shows a grid line at every 2,5. I don't understand why this is?

  2. I want the width of the graph to be 100%, but when I change it (wether in html or javascript) I always get a width of 100% but the height gets so small that nothing is readable anymore, even if specified a height. In jQuery

var options = {'width':800, 'height':600}

in HTML

<div id="chart_div" style="width:800; height:300">
1
javascriptjqueryjsongoogle-visualization

1 Answers

0
votes

  1. Try increasing your gridlines count by 1, since there are 11 values between 0 and 20 with a step size of 2.

  2. Regarding your question about width and height, it would be better to see the code you are trying to use so we can see what you are specifically trying to do. You want the width of the graph to be 100%, but 100% of what? The container or the page? Do you want what is called the chart area (not including the vertical axis and legend) to be 100% of the container? Options you can experiment with include the width and height of the container element (that you provide), the top-level 'width' and 'height' options, and the 'chartArea' options for 'width' and 'height'.