Dashboard issue - e is null at initial load

[SJA]

Hi

I have written a dashboards of sorts, but one that uses a trick I found (attributable to asgallant, I think), which allows me to present some charts based on a hidden underlying dashboard/datatable.

I'm having an issue with it though, in that the piechart doesn't draw on first load of the page, but works fine when a value is selected from the CategoryFilter or equally, when selections are removed from that (in effect reverting to the initial load state).  Instead, I get an "e is null" error.

Can anyone offer pointers as to what I'm doing wrong?

function drawPCEstate(json) {

    var data = new google.visualization.DataTable(json.d);

    // holds the full data, including the column it will be filtered by
    var pceplacebo = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'placeboPCE',
        'dataTable':data,
        'view': {
            'rows':[0]
        }
    });
   
    // table to present the summarised pceplacebo data
    var pcetable = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'config_PCEstate_table',
        'options': {
            'fontName': '"Arial"',
            'fontSize': "10pt",
            'chartArea' : {'width':'100%'}
        }
    });

   // chart to present the summarised pceplacebo data
   var pcechart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'config_PCEstate_chart',
        'options': {
            'fontName': '"Arial"',
            'fontSize': "10pt",
            'chartArea' : {'width':'100%'}
        }
    });

    // categoryfilter
    var pcefilterdept = new google.visualization.ControlWrapper({
        'controlType': 'CategoryFilter',
        'containerId': 'pce_dept_filter',
        'options': {
            'filterColumnLabel': 'Department',
            'ui': {
                'label': 'Department',
                'labelSeparator': ':',
                'labelStacking': 'vertical',
                'allowTyping': false,
                'allowMultiple': true
            }
        }
    });

    //populate dashboard and bind filter to pceplacebo
    var pcedashboard = new google.visualization.Dashboard(document.getElementById('config_PCestate')).bind(pcefilterdept,pceplacebo);
    google.visualization.events.addListener(pcefilterdept, 'statechange', pceSummary);
    google.visualization.events.addListener(pcedashboard, 'ready', pceSummary);
    pcedashboard.draw(data);
   
    function pceSummary() {
        // build summary table for the current filter
        var tmpdata = pceplacebo.getDataTable();
        var pcesmydata = new google.visualization.data.group(tmpdata,[1],[{'column':2,'aggregation':google.visualization.data.sum, 'type':'number'}]);
        pcesmydata.sort([{'column':0, 'desc': false}]);

        // ensure consistent colouring on the pieChart - build array of colours one for each 'type' in the current selection
        var counter = 0;
        var pieColours = new Array();
        for (var i=0;i < pcesmydata.getNumberOfRows(); i++) {
            var valItem = pcesmydata.getValue(i,0);
            if (valItem == 'Win 7') {
                pieColours[counter] = constGreenA;
            } else if (valItem == 'Win XP') {
                pieColours[counter] = constRedA;
            } else if (valItem == 'Win XP legacy') {
                pieColours[counter] = constAmberA;
            } else {
                pieColours[counter] = constGreyA;
            }
            counter++;
        }

        pcetable.setDataTable(pcesmydata);
        pcetable.draw(); 
        pcechart.setDataTable(pcesmydata);
        pcechart.setOption('colors',pieColours);
        pcechart.draw();
    }
}
Thanks.

[asgallant]

The only thing that sticks out to me is that you shouldn't use the "new" keyword with google.visualization.data.group; this line:

var pcesmydata = new google.visualization.data.group(tmpdata,[1],[{'column':2,'aggregation':google.visualization.data.sum, 'type':'number'}]);

should be:

var pcesmydata = google.visualization.data.group(tmpdata,[1],[{'column':2,'aggregation':google.visualization.data.sum, 'type':'number'}]);

If that doesn't fix the problem for you, could you post a sample object to pass to the drawPCEstate function so I can test this?

[SJA]

I tried removing that 'new' but with no change in outcome.

 

The JSON style data (just a couple of data rows) provided to getPCEstate is as follows:

 

{"cols":[{"id":"", "label":"Department", "pattern":"","type":"string"},{"id":"", "label":"Type", "pattern":"","type":"string"},{"id":"", "label":"Count", "pattern":"","type":"number"}],"rows":[{"c":[{"v":"Assurance"},{"v":"Win 7"},{"v":1519}]},{"c":[{"v":"Assurance"},{"v":"Win XP"},{"v":61}]},{"c":[{"v":"Assurance"},{"v":"Win XP legacy"},{"v":5}]},{"c":[{"v":"Business Process and Management Information"},{"v":"Win 7"},{"v":3}]},{"c":[{"v":"Business Process and Management Information"},{"v":"Win XP"},{"v":7}]}]}

 

I've also just tried with arrayToDataTable(), and same error, but in that from, would be as follows:

 

    data = google.visualization.arrayToDataTable([
        ['Department','Type','Count'],
        ['Assurance','Win 7', 1519],
        ['Assurance','Win XP', 61],
        ['Assurance','Win XP legacy', 5],
        ['Business Process and Management Information','Win 7',3],
        ['Business Process and Management Information','Win XP',7]
    ]);

[asgallant]

Using the code and data you provided, I built a jsfiddle, and it all works fine: http://jsfiddle.net/asgallant/nPRc4/

[steven...@gmail.com]

After you showed it working I went back to basics...something in my CSS was breaking it, though couldn't figure out what, so have handled layout differently.

Thanks for quick responses, and apologies for lateness of this reply.

Sent from my BlackBerry® wireless device

---

From: asgallant <drew_g...@abtassoc.com>

Sender: google-visua...@googlegroups.com

Date: Tue, 12 Mar 2013 09:31:08 -0700 (PDT)

To: <google-visua...@googlegroups.com>

ReplyTo: google-visua...@googlegroups.com

Subject: [visualization-api] Re: Dashboard issue - e is null at initial load

--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/7KKIcaLAMkE/unsubscribe?hl=en.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.