Combo Chart label on multiple columnt

24 views
Skip to first unread message

Miftahuddin amin

unread,
Nov 12, 2016, 4:24:15 AM11/12/16
to Google Visualization API
Hi All
i have a problem in google chart labeling when i used one column its easy to use annotation (label) for label of column but when there are multiple columns so i am unable to use label or annotation for each column.

my code is bellow
======================================
google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(drawChart);
        function drawChart() {

            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Recipt');
            data.addColumn('number', 'Expended');
            data.addColumn('number', 'Balance');
            data.addColumn('number', 'ClearedExpend');
            data.addColumn('number', 'AmountToBeClear');
            var chartData;
            $.ajax({
                url: "FinReport/GetRegSummaryChart",
                data: "{}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; chartset=utf-8",
                success: function (data1) {
                    chartData = data1;
                    for (var i = 0; i < chartData.length; i++) {
                        data.addRow([chartData[i].DeptName, chartData[i].Recipt,chartData[i].Expended, chartData[i].Balance, chartData[i].ClearedExpend, chartData[i].AmountToBeClear]);
                    }
                    var options = {
                        title : 'Cash Summary by Region/Dept',
                        vAxis: {title: 'Amount'},
                        hAxis: {title: 'Region/Dept'},
                        seriesType: 'bars',
                        width: 900,
                        height:400,
                        series: { 5: { type: 'line' } }
                    };

                    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
                    function selectHandler() {
                        var selection = chart.getSelection();
                        var message = '';
                        for (var i = 0; i < selection.length; i++) {
                            var item = selection[i];
                            if (item.row != null && item.column != null) {
                                var str = data.getFormattedValue(item.row, item.column);
                                var category = data
                                .getValue(chart.getSelection()[0].row, 0)
                                var type
                                if (item.column == 1) {
                                    type = "Recipt";
                                } else if (item.column == 2) {
                                    type = "Expended";
                                } else {
                                    type = "Balance";
                                }
                                message += '{row:' + item.row + ',column:' + item.column
                                + '} = ' + str + '  The Category is:' + category
                                + ' it belongs to : ' + type + '\n';
                            } else if (item.row != null) {
                                var str = data.getFormattedValue(item.row, 0);
                                message += '{row:' + item.row
                                + ', column:none}; value (col 0) = ' + str
                                + '  The Category is:' + category + '\n';
                            } else if (item.column != null) {
                                var str = data.getFormattedValue(0, item.column);
                                message += '{row:none, column:' + item.column
                                + '}; value (row 0) = ' + str
                                + '  The Category is:' + category + '\n';
                            }
                        }
                        if (message == '') {
                            message = 'nothing';
                        }
                        alert('You selected ' + message);

                    }
                    google.visualization.events.addListener(chart, 'select', selectHandler);
                   
                   
                    chart.draw(data, options);
                }
            });
        }
Reply all
Reply to author
Forward
0 new messages