Question

Short version – I want to modify the width/height of a google.visualization.PieChart object after construction, but I can’t find any documentation pointing out how it’s done.

Context – I’m building a visualization that overlays a bunch of data on a Google Map. At certain lat/long coordinates I want to render a pie chart marker detailing certain statistics that are relevant to that place.

To avoid cluttering up the screen, I want to vary the dimensions of the pie chart markers based on the current zoom level. This requires me to either re-render all markers that are currently visible or, preferably, change the width/height attributes of all markers.

I currently use the following settings to render my charts:

        legend: {position: "none"},
        width: 200,
        height: 200,
        backgroundColor: "transparent",
        pieSliceText: "none",
        colors: ["#C10001", "#F79647", "#92D051", "#558ED5", "#7F7F7F"],
        tooltip: {textStyle: {fontSize: 14}}

Is there a way to alter the dimensions of the chart after it’s created?

Answer 1

The only working solution I have so far is to redraw the entire chart with changed width/height settings. This snippet uses jQuery.

for (var i = 0; i < dataPoints.length; ++i) {
    var drawingOptions = $.extend({}, defaultDrawOptions);
    drawingOptions.width = defaultDrawOptions.width*(currentZoom/defaultZoom);
    drawingOptions.height = defaultDrawOptions.height*(currentZoom/defaultZoom);

    dataPoints[i].chart.draw(dataPoints[i].dataSource, drawingOptions);
}

As you can see, this half-baked solution is rather clumsy and might needlessly deteriorate performance.