The axis labels being centered between the gridlines is misleading in this case, especially when combined with steppedArea charts. The label really applies to the left gridline, and the step value is to the left of that gridline.
However, there is another trick you can use to turn the dates back into discrete values, effectively, which will then draw the ticks more like what you expect. I modified your example here: https://jsfiddle.net/c9q0m48p/6/ The trick is to add hAxis: { type: 'category' }. On Thu, Jun 2, 2016 at 2:06 PM, Yanny Cheng <yannyyan...@gmail.com> wrote: > Hi Daniel, > > Thanks answering my question :) > > I have updated my data to https://jsfiddle.net/yannycheng/c9q0m48p/4/# > Here is the change in my data: > > data.addRows([ > [new Date(2010, 0, 31), 0, 'event -1', 0, undefined], > [new Date(2010, 1, 1), 0, 'event 1', 0, undefined], > [new Date(2010, 1, 2), 20, 'event 2', 40, undefined], > [new Date(2010, 1, 3), 30, 'event 3', 45, undefined], > [new Date(2010, 1, 4), 40, 'event 4', 50, undefined], > [new Date(2010, 1, 5), 50, 'event 5', 60, undefined], > ]); > > And the graph looks like > https://lh3.googleusercontent.com/-ZM8uhEzNIkc/V1B1Np4RpWI/AAAAAAAAKMw/OObzieX5k1wyhH3bw0KfBM_ebwIq3g3wwCLcB/s1600/stepped_area_issue.png > The graph is still drawing 'Data Set 1 = 20, and 'Data Set 2 = 40', for Feb > 1, 2010, and this applies to all data. The annotation is correct, but > the visualization of the graph is still offset by 1 x-value entry. I > noticed one more thing, when I select the Feb 1 column, it display the > legend for Feb 2. > > -yanny > > On Thursday, June 2, 2016 at 8:33:48 AM UTC-7, Daniel LaLiberte wrote: >> >> Hi Yanny, >> >> SteppedArea charts with a continuous domain value have this ambiguity >> concerning what to do with the first value. Each step connects the >> previous value to the current value, but for the first value, there is no >> previous value. With a numeric domain, the base value of 0 can be used as >> the previous value, but for a date domain (as is the case for the >> AnnotationChart), there is no base value, at least not by default. I tried >> setting the baseline value of the hAxis, but it seems to cause an error. >> >> You might workaround this by adding a row before your first row with an >> earlier date. >> >> On Wed, Jun 1, 2016 at 11:57 PM, Yanny Cheng <yanny...@gmail.com> wrote: >> >>> Hi, I am making a Stepped Area Annotation Chart and here is my code: >>> https://jsfiddle.net/yannycheng/c9q0m48p/4/#&togetherjs=A088VEPHpu >>> >>> Here is a simplified version of it. >>> var data = new google.visualization.DataTable(); >>> data.addColumn('date', 'Date'); >>> data.addColumn('number', 'Data Set 1'); >>> data.addColumn({ >>> 'type': 'string', >>> 'role': 'annotation' >>> }); >>> data.addColumn('number', 'Data Set 2'); >>> data.addColumn({ >>> 'type': 'string', >>> 'role': 'annotation' >>> }); >>> >>> data.addRows([ >>> [new Date(2010, 1, 1), 0, 'event 1', 0, undefined], >>> [new Date(2010, 1, 2), 20, 'event 2', 40, undefined], >>> [new Date(2010, 1, 3), 30, 'event 3', 45, undefined], >>> [new Date(2010, 1, 4), 40, 'event 4', 50, undefined], >>> [new Date(2010, 1, 5), 50, 'event 5', 60, undefined], >>> ]); >>> >>> var chart = new >>> google.visualization.AnnotationChart(document.getElementById('chart_div')); >>> var options = { >>> chart: { >>> isStacked: false, >>> annotations: { >>> alwaysOutside: true, >>> }, >>> seriesType: 'steppedArea', >>> selectionMode: 'multiple', >>> }, >>> displayAnnotations: true, >>> scaleColumns: [0, 1], >>> displayExactValues: true, >>> fill: 10, >>> }; >>> chart.draw(data, options); >>> >>> When I click on Feb 1, 2010 on the graph, I expected to have 'Data Set >>> 1 = 0, and 'Data Set 2 = 0', however, the graph is showing 'Data Set 1 >>> = 20, and 'Data Set 2 = 40', which is the data for Feb, 2, 2010. How >>> can I fix it? Thanks you for your help! >>> >>> -yanny >>> >>> -- >>> 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+unsubscr...@googlegroups.com. >>> To post to this group, send email to google-visua...@googlegroups.com. >>> Visit this group at >>> https://groups.google.com/group/google-visualization-api. >>> To view this discussion on the web visit >>> https://groups.google.com/d/msgid/google-visualization-api/7fc75242-baf3-4bf9-8912-359b32f601e4%40googlegroups.com >>> <https://groups.google.com/d/msgid/google-visualization-api/7fc75242-baf3-4bf9-8912-359b32f601e4%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> >> dlali...@google.com 5CC, Cambridge 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 google-visualization-api+unsubscr...@googlegroups.com. > To post to this group, send email to > google-visualization-api@googlegroups.com. > Visit this group at > https://groups.google.com/group/google-visualization-api. > To view this discussion on the web visit > https://groups.google.com/d/msgid/google-visualization-api/095991e5-7d36-4c91-a43f-094a27007d95%40googlegroups.com > <https://groups.google.com/d/msgid/google-visualization-api/095991e5-7d36-4c91-a43f-094a27007d95%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> dlalibe...@google.com <dlalibe...@google.com> 5CC, Cambridge 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 google-visualization-api+unsubscr...@googlegroups.com. To post to this group, send email to google-visualization-api@googlegroups.com. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/CAOtcSJPi4p3esTkfSO46S-cfePMYX4DNuSptLjRK49WARDzOUw%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
