Bar Width Issue

17 views
Skip to first unread message

vlad

unread,
Aug 8, 2017, 5:27:31 PM8/8/17
to Google Visualization API
Hi, I have built a column chart with large number of data points in a date series.  

I activated pan/zoom and showing the years on the Major Grid and Months on the Minor.

I have two primary issues with my result:

  1. Inability to set displayed column width ( there is an option
    bar:{groupWidth:'95%'}
    enabled, but it does not appear to fill the white space, especially on the Zoom)
  2. I cannot get the chart to display all of the months once zoomed in.  This is less important than (1)
Any help or guidance in solving these is much appreciated.

The JSFiddle Demo illustrates the issue.


Daniel LaLiberte

unread,
Aug 8, 2017, 6:47:28 PM8/8/17
to Google Visualization API
Hi Vlad,

For the second problem, you need to do a couple things.  There is a hidden option, minWeakLineDistance, which is probably set by default to a bad value.   Set it to a smaller number, and then you will be able to see some closer minor gridlines. 

hAxis: { 
    gridlines: {
        minWeakLineDistance: 5, 
        ...
}}

But you'll also have to allow zooming in closer, by changing the maxZoomIn option.

explorer: {
      maxZoomIn: 0.09
}

For the first problem, there appears to be a bug regarding the fact that your date values are in string notation.  All the bars have the smallest width possible, which suggests it can't compute the distance between the values properly.  If you convert them into JavaScript dates, that use new Date(...), then the widths of bars will be larger. 

However, you may notice that the space between bars will not be uniform.  This may be due to the fact that date values are not evenly distributed.  I'll have to investigate that at some point.

--
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-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/a47f1da0-8d44-4d3f-a79e-11d1293b3980%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

vlad

unread,
Aug 9, 2017, 10:48:57 AM8/9/17
to Google Visualization API
Thank you Daniel, once again for helping!

I have applied both of your suggestions, and I am able to zoom in without trouble displaying all 12 months on minor axes.

I am still, however, having problem with bar width, even after using a hack to convert all the "Date(YYYY, MM)" values to new Date(YYYY, MM) inside JS.

Incidentally, the DataTable object does not seem to have trouble parsing JSON string dates and treating them as Date objects.  Something else is off.


Regards,

- vlad
To post to this group, send email to google-visua...@googlegroups.com.



--

Daniel LaLiberte

unread,
Aug 9, 2017, 11:19:33 AM8/9/17
to Google Visualization API
You have two rows with the same date: 

{
    c: [{
      v: new Date(2017,7),
      f: "8/2017"
    }, {
      v: 11855
    }, {
      v: 9508
    }, {
      v: null
    }, {
      v: true
    }]
  }

This causes the calculation of the minimum distance between data values to be 0, so the minimum bar width is used.  Since duplicated domain values would actually take up no more space, I'll make a change to ignore the duplicates. But for now, you'll have to remove the duplicates.


To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsubscr...@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-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/e289d3ea-4406-4b8f-bd88-325ebee5af5a%40googlegroups.com.

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



--

vlad

unread,
Aug 9, 2017, 11:47:27 AM8/9/17
to Google Visualization API
Brilliant!  I suppose I can split the data into two series instead...

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



--
Reply all
Reply to author
Forward
0 new messages