How to hide a specific legend when there is no data for that legend

40 views
Skip to first unread message

Jeremy Simpson

unread,
Mar 28, 2018, 3:50:43 PM3/28/18
to Google Visualization API
I have a bar-chart with five columns on the legend, but all the five columns show on the legend. My boss wants me to hide or delete the columns from the legend when there is no data**(please check below for no data) or when there is no row data. For example if there is data for 3 out of the 5 when the chart loads, the legend should only show 3 columns. Scenario -->  (Medication = 300, Groceries = 825, Garden = 0, Miscellaneous = 276) will want the legend to show Only Medication, Groceries, and Miscellaneous. 

**No data could be 0 like Garden = 0 or can be null like SportingEquip doesn't exist at all.



    var options = {
        backgroundColor: 'transparent',
        hAxis: { minValue: 0, format: '0', gridlines: { count: -1 } },
        colors: ['#0F2D52', '#789A3D', '#EE7623', '#231F20', '#7EA0C3'],
        legend: { position: 'bottom', textStyle: {fontSize: 6}},
        isStacked: true
    };

    var drawChart = function (data, options) {
        var chartDomId = "purchase_trends";

        var wrapper = new google.visualization.ChartWrapper({
            chartType: 'BarChart',
            dataTable: data,
            options: options,
            containerId: chartDomId
        });
        wrapper.draw();
    };
    var data;

    this.LoadChart = function () {
        if (data != null) {
            drawChart(data, options);
        } else {
            return $.ajax({
                type: 'GET',
                url: '/Charts/GetPurchaseTrends',
                dataType: "json",
                cache: false,
                success: function (jsonData) {
                    data = new google.visualization.DataTable({
                        cols: [
{ type: 'string', label: 'Year' },
{ type: 'number', label: 'Medication' },
{ type: 'number', label: 'Sporting Equip.' },
{ type: 'number', label: 'Groceries' },
                            { type: 'number', label: 'Garden & Lawn' },
{ type: 'number', label: 'Miscellaneous' }
                        ]
                    });

                    var results = jsonData;
                   
                    if (results.Data.length > 0) {
                        for (var i = 0; i < results.Data.length; i++) {
                            var yearNumber = results.Data[i].Year;
                            var medication = results.Data[i].Medication;
                            var sportingEquip = results.Data[i].Sporting;
                            var groceries = results.Data[i].Groceries;
                            var garden = result.Data[i].Garden;
                            var miscellaneous = result.Data[i].Miscellaneous;

data.addRow([yearNumber.toString(), medication, sportingEquip, groceries, garden, miscellaneous]);
                        }
                    }
                },
                error: function (msg) {
                    console.log(msg);
                },
                complete: function () {
                    drawChart(data, options);
                    $(window).resize(function () {
                        drawChart(data, options);
                    });
                }
            });
        }
    };


Reply all
Reply to author
Forward
0 new messages