Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chart API - Pie Chart Stroke options not taking affect

I'm playing around with the Google pie chart API.

Everything is working fine, except for the options for stroke: and strokeWidth: . No matter what I set them to, nothing changes.

I have a dark background colour, and the lines between the slices are white. I'm trying to change them to the same colour as the background. I also can't change the width of these lines.

Here is my code:

<script src="https://www.google.com/jsapi"></script>
<script>

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

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(5);
    data.setValue(0, 0, 'Work');
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 2);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 2);
    data.setValue(4, 0, 'Sleep');
    data.setValue(4, 1, 7);

    // Create and draw the visualization.
    new google.visualization.PieChart(document.getElementById('poll-chart')).
    draw(data, {

        title:"",
        fontSize: "12",
        legend: "none",
        width: 200,
        height: 200,
        chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
        backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" }

    });
}

</script>

I am referencing the Google API from the options on this page:

http://code.google.com/apis/chart/interactive/docs/gallery/piechart.html#Configuration_Options

I'm not sure if I am doing something wrong or not.

Your help or guidence would be much appreciated!

Thanks, Michael.

EDIT:

Ok, so it seems that the properties I was messing with are concerned with the outer stroke of the whole chart and not for each slice. I am still stuck though. Does anyone know how I can close the white gaps between the slices? I cannot find anything on Google about this.

like image 591
Michael Giovanni Pumo Avatar asked Jul 08 '11 09:07

Michael Giovanni Pumo


People also ask

Is Google Charts deprecated?

While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, which may happen soon.

Are Google Charts responsive?

In a particular screen size, the Google pie chart will display properly. But if you want to load Google pie chart properly in different screen resolution, it needs to responsive. To make Google pie chart responsive, HTML and JavaScript code need to be modified.

Is the area where actual chart is drawn?

Plot area is a window with in the Chart area. It contains the actual chart itself, and includes plotted data, data series, category, and value axis.


1 Answers

Use pieSliceBorderColor. This might have been added since this question was asked but for any future reference this is how you do it. Note: this will only work on a 2D pie chart

new google.visualization.PieChart(document.getElementById('poll-chart')).
    draw(data, {

        title:"",
        fontSize: "12",
        legend: "none",
        width: 200,
        height: 200,
        chartArea: { left: 0, top: 0, width: "100%", height: "100%"},
        backgroundColor: { stroke: "#5A5A5A", strokeWidth: 5, fill: "#5A5A5A" },

        // add this line
        pieSliceBorderColor : "#5A5A5A"
    });
like image 96
Matt Dodge Avatar answered Sep 20 '22 18:09

Matt Dodge