There are 3 sets of sizes you need to be aware of. The container height and width, the chart height and width, and the chartArea height and width, as well as the chartArea left and top. The chartArea is surrounded by a top area, bottom area, left area and right area. I suspect you are trying to set your chartArea height, but your chart height (specified with the top-level 'height' option) is set to a value that doesn't allow all of the chartArea to be shown, along with the top area and bottom area. Your chartArea.height + chartArea.top should be less than the chart height by the amount of space you want to allow for the bottom area.
I hope my explanation is clear enough. This is a common confusion, and we should probably have some documentation to spell it out in more detail. On Wed, Jun 4, 2014 at 4:23 PM, TheInnovator <[email protected]> wrote: > One more line chart question please. > Do you know why when I increase the height of my chart above 65%, the > months along the x-axis disappear. The height of my HTML table is 100%. How > can I fix that? > > > > > <https://lh4.googleusercontent.com/-GIv5_fxHss4/U49_MVVDsfI/AAAAAAAAAmg/QR2n4nA39Oo/s1600/LineChart3.PNG> > > > On Wednesday, June 4, 2014 4:04:39 PM UTC-4, TheInnovator wrote: > >> Thanks! >> I can't stop banging my head on that issue now. haha.. >> >> >> On Wed, Jun 4, 2014 at 4:02 PM, 'Daniel LaLiberte' via Google >> Visualization API <[email protected]> wrote: >> >>> We don't have a way of dealing with the overlapping annotations at this >>> time. We are considering the options and how to implement. It might be >>> best to avoid using too many annotations and instead rely on tooltips to >>> show the values when the user hovers over them. >>> >>> >>> On Wed, Jun 4, 2014 at 3:47 PM> wrote: >>> >>>> Thanks! I will look into your suggestion. >>>> >>>> >>>> On Wed, Jun 4, 2014 at 12:13 PM, 'Daniel LaLiberte' via Google >>>> Visualization API <[email protected]> wrote: >>>> >>>>> Since you are not using the Google Chart date type, you should look >>>>> into what monthIndex values you are getting from your getMonthIndex() >>>>> function. >>>>> >>>>> Also, since your dataValues array initializes everything to 0, if you >>>>> don't change some value to a non-zero value, it will still be 0. >>>>> >>>>> >>>>> On Wed, Jun 4, 2014 at 12:02 PM, wrote: >>>>> >>>>>> here's my code using sharepoint as a data source >>>>>> >>>>>> >>>>>> >>>>>> var dataValues = [ >>>>>> ['Oct', 0, 0], >>>>>> ['Nov', 0, 0], >>>>>> ['Dec', 0, 0], >>>>>> ['Jan', 0, 0], >>>>>> ['Feb', 0, 0], >>>>>> ['Mar', 0, 0], >>>>>> ['Apr', 0, 0], >>>>>> ['May', 0, 0], >>>>>> ['Jun', 0, 0], >>>>>> ['Jul', 0, 0], >>>>>> ['Aug', 0, 0], >>>>>> ['Sep', 0, 0] >>>>>> ]; >>>>>> var d = new Date(); >>>>>> var curYear = d.getFullYear(); >>>>>> var prevYear = curYear-1; >>>>>> var monthIndex=0; >>>>>> $().SPServices({ >>>>>> operation: "GetListItems", >>>>>> async: false, >>>>>> listName: "508 Data_Overall Monthly Results", >>>>>> CAMLViewFields: "<ViewFields><FieldRef >>>>>> Name='ScanType'></FieldRef><FieldRef >>>>>> Name='Year'></FieldRef><FieldRef Name='Month'></FieldRef><FieldRef >>>>>> Name='Score'></FieldRef></ViewFields>", >>>>>> CAMLQuery: "<Query><OrderBy><FieldRef Name='Month'></FieldRef></ >>>>>> OrderBy></Query>", >>>>>> completefunc: function (xData, Status) { >>>>>> $(xData.responseXML).SPFilterNode("z:row").each(function() { >>>>>> monthIndex = getMonthIndex($(this).attr("ows_Month")); >>>>>> var month = $(this).attr("ows_Month"); >>>>>> >>>>>> if ( prevYear == $(this).attr("ows_Year") && (( month == "Oct" || >>>>>> month == "Nov" || month == "Dec" ) ) || ( curYear == >>>>>> $(this).attr("ows_Year") && (month == "Jan" || month == "Feb" || month == >>>>>> "Mar" || month=="Apr" || month == "May" || month == "Jun" || month == >>>>>> "Jul" >>>>>> || month == "Aug" || month=="Sep"))) >>>>>> { >>>>>> //alert(monthIndex); >>>>>> if ($(this).attr("ows_ScanType") == "Automatic") >>>>>> { >>>>>> dataValues[monthIndex][1] = $(this).attr("ows_Score"); >>>>>> } >>>>>> else >>>>>> { >>>>>> dataValues[monthIndex][2] = $(this).attr("ows_Score"); >>>>>> } >>>>>> } >>>>>> }); >>>>>> } >>>>>> }); >>>>>> >>>>>> var data = new google.visualization.DataTable(); >>>>>> data.addColumn('string', 'Month'); >>>>>> data.addColumn('number', 'Automatic Scan'); >>>>>> data.addColumn({type:'number', role:'annotation'}); >>>>>> data.addColumn('number', 'Manual Scan'); >>>>>> data.addColumn({type:'number', role:'annotation'}); >>>>>> $.each(dataValues, function (index, value) { >>>>>> data.addRow([dataValues[index][0], >>>>>> Number(dataValues[index][1]),Number(dataValues[index][1]), >>>>>> Number(dataValues[index][2]),Number(dataValues[index][2])]); >>>>>> }); >>>>>> //Use to convert the value in the 4th column to a percentage >>>>>> var formatter = new google.visualization.NumberFormat({pattern: >>>>>> '#%'}); >>>>>> formatter.format(data, 4); // format column 4 in DataTable "data" >>>>>> >>>>>> //Use to convert the value in the 4th column to a percentage >>>>>> var formatter2 = new google.visualization.NumberFormat({pattern: >>>>>> '#%'}); >>>>>> formatter2.format(data, 2); >>>>>> var options = { >>>>>> title: 'Overall 508 Compliance Monthly Score Trend >>>>>> Analysis', >>>>>> colors: ["#6A0888", "#045FB4"], >>>>>> hAxis: {title: 'Month'}, >>>>>> titleTextStyle: {color: 'black', fontName: '"Arial"', fontSize: >>>>>> '12'}, >>>>>> legend: {textStyle: {color: 'black', fontName: '"Arial"', fontSize: >>>>>> '12'}}, >>>>>> chartArea: { >>>>>> height: '65%' >>>>>> }, >>>>>> vAxis: { >>>>>> title: 'Score', >>>>>> format: '#%' >>>>>> } >>>>>> }; >>>>>> var chart = new google.visualization.LineChart(document. >>>>>> getElementById('chart_div')); >>>>>> chart.draw(data, options); >>>>>> >>>>>> >>>>>> On Wed, Jun 4, 2014 at 11:58 AM, 'Daniel LaLiberte' via Google >>>>>> Visualization API <[email protected]> wrote: >>>>>> >>>>>>> You didn't provide your data or options for us to look at, but since >>>>>>> you indicate that the lines extend one month too far, I suspect you are >>>>>>> using date values with months being one too high. That is, when you >>>>>>> create >>>>>>> Date values with new Date(yyyy, M, dd), the M values start at 0, not 1. >>>>>>> This is not just a Google Charts feature or a JavaScript feature, but >>>>>>> most >>>>>>> programming languages adopted this convention. Hope that helps. >>>>>>> >>>>>>> >>>>>>> On Wed, Jun 4, 2014 at 11:02 AM, wrote: >>>>>>> >>>>>>>> Why does my line chart continue when there is not value for a >>>>>>>> point? As you can see below, the two lines end at June and July but it >>>>>>>> should actually stop at June for the blue line and May for the purple >>>>>>>> line. >>>>>>>> >>>>>>>> >>>>>>>> <https://lh4.googleusercontent.com/-z0jqd6DQI8s/U48xH32x9VI/AAAAAAAAAl0/f3W-UnmprT0/s1600/LineChart.PNG> >>>>>>>> >>>>>>>> It's supposed to be somewhat like this >>>>>>>> >>>>>>>> >>>>>>>> <https://lh4.googleusercontent.com/-KhKtX3vpCFI/U4809YW39VI/AAAAAAAAAmE/rezaxtdBjPc/s1600/LineChart.PNG> >>>>>>>> >>>>>>>> >>>>>>>> >>>>>>>> -- >>>>>>>> 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-visualization-api+ >>>>>>>> [email protected]. >>>>>>>> >>>>>>>> To post to this group, send email to google-visualization-api@ >>>>>>>> googlegroups.com. >>>>>>>> Visit this group at http://groups.google.com/ >>>>>>>> group/google-visualization-api. >>>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> >>>>>>> >>>>>>> -- >>>>>>> You received this message because you are subscribed to a topic in >>>>>>> the Google Groups "Google Visualization API" group. >>>>>>> To unsubscribe from this topic, visit https://groups.google.com/d/ >>>>>>> topic/google-visualization-api/lyskn2b6Do4/unsubscribe. >>>>>>> To unsubscribe from this group and all its topics, send an email to >>>>>>> [email protected]. >>>>>>> >>>>>>> To post to this group, send email to google-visualization-api@ >>>>>>> googlegroups.com. >>>>>>> Visit this group at http://groups.google.com/ >>>>>>> group/google-visualization-api. >>>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>>> >>>>>> >>>>>> >>>>>> >>>>>> -- >>>>>> -Isaac- >>>>>> >>>>>> http://twitter.com/#!/feedy0urmind >>>>>> You are today where your thoughts have brought you; you will be >>>>>> tomorrow where your thoughts take you. >>>>>> - James Allen >>>>>> >>>>>> -- >>>>>> 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-visualization-api+ >>>>>> [email protected]. >>>>>> To post to this group, send email to google-visualization-api@ >>>>>> googlegroups.com. >>>>>> Visit this group at http://groups.google.com/ >>>>>> group/google-visualization-api. >>>>>> For more options, visit https://groups.google.com/d/optout. >>>>>> >>>>> >>>>> >>>>> >>>>> -- >>>>> >>>>> -- >>>>> You received this message because you are subscribed to a topic in the >>>>> Google Groups "Google Visualization API" group. >>>>> To unsubscribe from this topic, visit https://groups.google.com/d/ >>>>> topic/google-visualization-api/lyskn2b6Do4/unsubscribe. >>>>> To unsubscribe from this group and all its topics, send an email to >>>>> [email protected]. >>>>> To post to this group, send email to google-visualization-api@ >>>>> googlegroups.com. >>>>> Visit this group at http://groups.google.com/ >>>>> group/google-visualization-api. >>>>> For more options, visit https://groups.google.com/d/optout. >>>>> >>>> >>>> >>>> >>>> -- >>>> -Isaac- >>>> >>>> http://twitter.com/#!/feedy0urmind >>>> You are today where your thoughts have brought you; you will be >>>> tomorrow where your thoughts take you. >>>> - James Allen >>>> >>>> -- >>>> 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 google-visualization-api@ >>>> googlegroups.com. >>>> Visit this group at http://groups.google.com/ >>>> group/google-visualization-api. >>>> For more options, visit https://groups.google.com/d/optout. >>>> >>> >>> >>> >>> You received this message because you are subscribed to a topic in the >>> Google Groups "Google Visualization API" group. >>> To unsubscribe from this topic, visit https://groups.google.com/d/ >>> topic/google-visualization-api/lyskn2b6Do4/unsubscribe. >>> To unsubscribe from this group and all its topics, send an email to >>> [email protected]. >>> To post to this group, send email to google-visualization-api@ >>> googlegroups.com. >>> Visit this group at http://groups.google.com/ >>> group/google-visualization-api. >>> For more options, visit https://groups.google.com/d/optout. >>> >> >> >> >> -- >> -Isaac- >> >> http://twitter.com/#!/feedy0urmind >> You are today where your thoughts have brought you; you will be tomorrow >> where your thoughts take you. >> - James Allen >> > -- > 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. > 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. For more options, visit https://groups.google.com/d/optout.
