Re: [visualization-api] Column Chart crops the end bars

[ChartMan]

You should always use 'corechart' why are you using 'columnchart' ?

On Thu, Jun 28, 2012 at 2:24 AM, SherCoder <singh.pa...@gmail.com> wrote:

I am trying to display column chart in IE. It crops the bars from both ends of the chart in IE9. I know the data is there because i am testing it with other browsers.

This is the link to the image of how the graph looks.

Any help would be really appreciated.

P.S. I have attached the code that I am using to display this chart

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/SW2gx2JyvcAJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[asgallant]

I agree - you shouldn't use the "columnchart" package, but that's not the source of your problem, since you are only loading that for non-IE browsers.  Can you post example code with static data that reproduces the problem?  Without data I can't help, and the image you posted is too small for me to tell what is going on.

On Thursday, June 28, 2012 2:04:22 AM UTC-4, h wrote:

You should always use 'corechart' why are you using 'columnchart' ?

On Thu, Jun 28, 2012 at 2:24 AM, SherCoder <singh.pa...@gmail.com> wrote:

I am trying to display column chart in IE. It crops the bars from both ends of the chart in IE9. I know the data is there because i am testing it with other browsers.

This is the link to the image of how the graph looks.

Any help would be really appreciated.

P.S. I have attached the code that I am using to display this chart

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/SW2gx2JyvcAJ.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[SherCoder]

The issue with corechart I get is it does not display the bars on both ends of the chart. The reason I was using columnchart is because it works fine with chrome and firefox. I just added a bigger picture. here is the code that I am using:

<script type='text/javascript'>

        if ($.browser.msie) {

            google.load('visualization', '1', { 'packages': ['corechart'] });

        }

        else {

            google.load('visualization', '1', { 'packages': ['columnchart'] });

        }

        google.setOnLoadCallback(drawSizeChart);

        function drawSizeChart() {

            $.post('/metrics/SiteResourceChart', { fnsId: "@Model.FnsId", regionId: selectedValue },

                function (data) {

                    if (Object.keys(data).length !== 0) {

                        var tdata = new google.visualization.DataTable();

                        tdata.addColumn('date', 'Date');

                        for (var p = 0; p < data.allPaths.length; ++p) {

                            tdata.addColumn('number', data.allPaths[p].PathName);

                        }

                        var index = 0;

                        for (var i = 0; i < data.allDates.length; ++i) {

                            var loadrow = [];

                            var date = new Date(parseInt(data.allDates[i].CreatedAt.substr(6)));

                            loadrow[0] = date;

                            for (var j = 1; j < data.allPaths.length + 1; ++j, ++index) {

                                loadrow[j] = data.allLoadTimes[index];

                            }

                            tdata.addRow(loadrow);

                        }

                        var options = {

                            title: 'Page Load Resource Count (Last 7 Days)',

                            titleTextStyle: { fontSize: 20 },

                            bar: { groupWidth: '25%' },

                            hAxis: { format: 'MMM d' },

                            hAxis: { viewWindowMode: 'maximized' }

                        };

                        var chart = new google.visualization.ColumnChart(document.getElementById('site_size_chart'));

                        chart.draw(tdata, options);

                    }

                }

            );

        }

    </script>

[asgallant]

That is a side effect of using a continuous axis with column charts.  The bars are centered on the data point, so the first and last data points have their bars cut off unless you expand the axis range.  Set hAxis.viewWindowMode to 'explicit' and set the 'min' and 'max' properties of hAxis.viewWindow to values below and above, respectively, the minimum and maximum axis values.

The charts should probably default to expanding the axis large enough to include all of the bars, though, so you might want to file a report on this: http://code.google.com/p/google-visualization-api-issues/issues/list 

[Pardeep Singh]

Awesome that fixed it. Thank you so much. But is it possible to not display min and max value on the chart?

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/micNBny4BnMJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[asgallant]

No, there is no way to hide just the min and max axis values.

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[SherCoder]

oh that's fine. thanks for your help though and I will report that to google.

[Jinji]

The difference between 'corechart' and 'columnchart' in this respect is that 'columnchart' doesn't support a continuous domain axis. It therefor automatically stringifies the values of the first column, if it's of type date/datetime. You can do this stringification yourself (directly in the DataTable, or using a DataView, see here), and get the same effect on 'corechart'.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/uLny9cigeE8J.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[mikidelux]

Is the solution you proposed still valid with a ChartRangeFilter?  The ChartRangeFilter behaves strange when I apply the explicit mode and de min/max values.

To unsubscribe from this group, send email to google-visualization-api+unsubscr...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

[asgallant]

I've never tried.  Can you post example code demonstrating the issue?

[mikidelux]

I will try to do so today!

[bảo thiên ngô]

I'm surprised that this is still a bug. When I expand the haxis min and max values (hAxis.viewWindowMode = 'explicit'; using continuous x-axis labels of date type), I get this weird situation where the last column data point (the one that gets cropped) is still attached to the edge of the chart. In this picture, you see that the April 1, 2014 data point is showing up at April 1, 2015.

Gonna look for any open issues on this.

[asgallant]

If you could post example code that replicates the problem, I can take a look and see what might be causing the issue.

[bảo thiên ngô]

Hmmm, by some strange magic, I came back a few hours later, refreshed the page, and it fixed itself. O_o The last data point is no longer being attached to the window edge. I guess it was a false alarm... for now.

[Daniel LaLiberte]

I have a fix for this frequently encountered problem of using continuous value domain axes with column, bar, and candlestick charts.  It first finds the minimum space between any two values, and expands the data values by half of that minimum space.  It lets you expand further with the minValue and maxValue, and also works with a viewWindow min or max which might shrink or expand the view, so your workarounds should continue to work.

We should be releasing a version with this fix in about a month or two. 

dan

[nonni]

Great to hear. I'm looking forward to it. :-)