Stepped Area Annotation Chart area is offset by 1 x-value

107 views
Skip to first unread message

Yanny Cheng

unread,
Jun 1, 2016, 11:57:38 PM6/1/16
to Google Visualization API
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

Daniel LaLiberte

unread,
Jun 2, 2016, 11:33:48 AM6/2/16
to Google Visualization API
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.

--
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 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.
For more options, visit https://groups.google.com/d/optout.



--

Yanny Cheng

unread,
Jun 2, 2016, 2:06:50 PM6/2/16
to Google Visualization API

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
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

Daniel LaLiberte

unread,
Jun 2, 2016, 4:22:05 PM6/2/16
to Google Visualization API
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' }.

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 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.

For more options, visit https://groups.google.com/d/optout.



--

Daniel LaLiberte

unread,
Jun 2, 2016, 4:33:47 PM6/2/16
to Google Visualization API
Unfortunately, setting hAxis: { type: 'category' } causes the range selector to fail to change anything.  Not exactly sure why yet, or if there is a way to work around it.

Yanny Cheng

unread,
Jun 2, 2016, 4:44:25 PM6/2/16
to Google Visualization API
Hi Daniel,

Thank you very much for the updates!  Is there a place where I can log this issue and hope for that best that it will get fix in a future release? :)

-yanny
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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+unsub...@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.



--

Daniel LaLiberte

unread,
Jun 2, 2016, 4:56:48 PM6/2/16
to Google Visualization API
The issues list is a good place: https://github.com/google/google-visualization-issues/issues
Thanks!

To unsubscribe from this group and stop receiving emails from it, send an email to google-visualizati...@googlegroups.com.



--

--
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 https://groups.google.com/group/google-visualization-api.
--



--

--
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 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/e1da0025-8a3a-4d12-bd01-9bd1da273dfd%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.



--

Yanny Cheng

unread,
Jun 2, 2016, 5:26:56 PM6/2/16
to Google Visualization API
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.



--

--
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+unsub...@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.
--



--

--
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+unsub...@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.



--
Reply all
Reply to author
Forward
0 new messages