CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
codeBoy
codeBoy

Reputation: 533

Removing Legend in Google Visualization Pie Chart

I am trying to hide the labels in my pie chart. I think the correct word is labels? But I could be wrong. Basically I have a pie chart That displays some data, outside of the pie chart it has a label with a color cube and a name next to it displaying what each color stands for, I would like to get rid of that, because on hover I show the same data and it takes up some valuable real estate I would like to use. Here is my Javascript code:

 google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var options = {
            title: '',
            is3D: true
        };
        $.ajax({
            type: "POST",
            url: "myPage.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                //console.log(JSON.stringify(r))
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart")[0]);
                var formatter = new google.visualization.NumberFormat(
  { negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
                formatter.format(data, 1);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

Upvotes: 1

Views: 2014

Answers (1)

Justin Tokarchuk
Justin Tokarchuk

Reputation: 159

Google charts Visualization, killing legend:

legend: {position: 'none'}

-- this will kill the legend in Google Charts.

Also, the JS to do it:

http://jsfiddle.net/api/post/library/pure/

legend: 'none'

So, ultimately this should do it for you:

google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        var options = {
            title: '',
            is3D: true,
            legend: none,
        };
        $.ajax({
            type: "POST",
            url: "myPage.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                //console.log(JSON.stringify(r))
                var data = google.visualization.arrayToDataTable(r.d);
                var chart = new google.visualization.PieChart($("#chart")[0]);
                var formatter = new google.visualization.NumberFormat(
  { negativeColor: 'red', negativeParens: true, pattern: '$###,###.##' });
                formatter.format(data, 1);
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }

Upvotes: 2

Related Questions