grouping in dashboard with pie chart

66 views
Skip to first unread message

gradin Cronos

unread,
Mar 25, 2017, 8:03:09 AM3/25/17
to Google Visualization API
i'm having a hell of a time trying to get this to work
i've got a pie chart, a table, and a bunch of controls
basically i'm trying to databind the controls to the charts but can't figure out how to do aggregates on the data, i've tried a number of options

sample data
var data = google.visualization.arrayToDataTable([
['from' 'responseState' 'other' 'stuff'],
['b...@bob.com', '0' 'Shop' 456],
['geo...@george.com', '1' 'Rent' 234]
]);
basically what i'm looking for is a pie chart with a breakdown by response type
 var table = new google.visualization.ChartWrapper({
        'chartType': 'Table',
        'containerId': 'table_div',
        'options': {
            'showRowNumber': 'true',
            'width': '100%',
            'height': '100%',
            'cssClassNames': {
                'headerRow': 'bold-blue',
                'tableRow': 'bold-blue',
                'oddTableRow': 'beige-background',
                'selectedTableRow': 'orange-background large-font',
                'hoverTableRow': '',
                'headerCell': 'gold-border',
                'tableCell': '',
                'rowNumberCell': 'underline-blue-font'
            }
        }
    });
    var tableData = new google.visualization.DataTable(jsonData);
    function getMessageStateString(input) {
        if (input == '0') {
            return "noResponse";
        }
    }
    var dummy = new google.visualization.ChartWrapper({
        chartType: 'Table',
        containerId: 'dummy_div',
        options: {
            width: '300px'
        },
        view: {
            rows: []
        }
    });
    var chart = new google.visualization.ChartWrapper({
        'chartType': 'PieChart',
        'containerId': 'piechart',
        // data: newdata
    });
    google.visualization.events.addListener(dummy, 'ready', function () {
        var newData = dummy.getDataTable();
        var grouped = google.visualization.data.group(newData, [5], [{
            column: 2,
            aggregation: google.visualization.data.count,
            type: number,
        },
        {
            column: 5,
            modifier: getMessageStateString,
            type: 'string'
        },
        {
            column: 4,
            label: 'Count',
            aggregation: google.visualization.data.count,
            type: 'number'
        }]);
    chart.setDataTable(grouped);
    chart.draw();
});
//var newdata = google.visualization.data.group(tableData, [0]
// Add piechart
//var chart = new google.visualization.PieChart(document.getElementById('piechart'));



var options = {
    title: 'Results by Response Type', is3D: true, pieSliceText: 'value', legend: { position: 'left', labeledValueText: 'both', textStyle: { color: 'blue', fontSize: 16 } }
};
//chart.draw(newdata, options);

var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div'));



RecDateFilter = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'EmailParsedDateFilter',
    'options': {
        'filterColumnLabel': 'EmailParsedDate',
        'matchType': 'any',
        'ui': {
            'labelStacking': 'vertical'
        }
    }
});



dashboard.bind(RecDateFilter, table, chart);
dashboard.draw(tableData);
    }

function drawChart() {
    // Request data
    var getDataJson = $.ajax({
        type: "Post",
        url: '/Report/GetEmailReportData',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        async: false
    }).responseText;
    doChart(getParamData(0));
Reply all
Reply to author
Forward
0 new messages