CODEWITHSUNDEEP
javascriptgoogle-visualization
Daniel Jamrozik
Daniel Jamrozik

Reputation: 1238

Google Charts: Cannot read property 'datefield' of undefined

I haven't seen one other person have this same error with Google Visualization so I thought I'd post here.

The error happens on chart.draw()

This is the code for the chart

                 if (google) {
                    google.load('visualization', '1', {
                        packages: ['corechart', 'controls', 'timeline'],
                        callback: function () {
                            var container = document.getElementById('timeline');
                            var chart = new google.visualization.Timeline(element[0]);
                            var dataTable = new google.visualization.DataTable();

                            dataTable.addColumn({ type: 'string', id: 'StatusMessage' });
                            dataTable.addColumn({ type: 'date', id: 'Start' });
                            dataTable.addColumn({ type: 'date', id: 'End' });

                            var rowsToAdd = [];
                            var colors = [];
                            for (var i = 0; i < statuses.length; i++) {
                                var elem = [];
                                elem.push(statuses[i].Message);
                                elem.push(new Date(statuses[i].StartDateUtc.substring(0, 10)));
                                elem.push(new Date(statuses[i].EndDateUtc.substring(0, 10)));
                                rowsToAdd.push(elem);
                                var intColor = statuses[i].StatusColor;
                                if (intColor == 0) {
                                    colors.push('#FF0000');
                                } else if (intColor == 1) {
                                    colors.push('#FFFF00');
                                } else if (intColor == 2) {
                                    colors.push('#00CC00');
                                } else {
                                    colors.push('#0000FF');
                                }
                            }

                            dataTable.addRows(rowsToAdd);
                            var heightToDraw = colors.length * 60;

                            chart.draw(dataTable, {
                                  colors: colors,
                                  height: heightToDraw
                            });
                        }
                    })
                }

I'm really more curious as to why this problem is occurring, then I can probably go ahead and fix it. What's weird is that I changed the way that data was being input into this (even though the data is exactly the same), and then this problem occurred. It could be a parsing issue perhaps?

Upvotes: 2

Views: 2359

Answers (1)

Alton
Alton

Reputation: 21

I am having a similar problem. According to this issue ticket on GitHub it appears that there is a problem with google visualization not playing well with bootstrap in certain cases (I'm not sure if this is the case for you, but I am fairly certain it's what's happening to me).

My chart is placed in a div like:

<div id="timeline-div" class="col-sm-12 well"></div>

However, when I remove the classes from the div, like:

<div id="timeline-div"></div>

then the chart displays just fine. Adding either of the classes, or both together, causes the error to appear once more. I am currently working on finding a way to get bootstrap to cooperate.

EDIT: So I tried just shoving my classes on a div to wrap the chart div, and that seemed to work just fine:

<div class="col-sm-12">
    <div id="timeline-div">
        {{google visualization will put the chart here}}
    </div>
</div>

Upvotes: 2

Related Questions