Setting Size of Pie Chart in ZingChart

Question

I have a visual that includes multiple pie charts (i have a graphset that contains multiple separate pie charts). I want the size of each pie chart to reflect the size of the data in each pie. For example, a pie showing 2010 revenues of $1,000,000 will be smaller than a pie showing 2014 revenues of $2,000,000.

But the size attribute seems to have no impact on the size of each pie, whether I use just a number or a number plus "px".

Does this feature in fact work for pie charts? If so, can someone demonstrate it.

Answer 1

I'm on the ZingChart team, and I'll be happy to help you out with this.

Using the dataparse event, we can retrieve the necessary information about the chart that is to be rendered and make the appropriate calculations and modifications before the render occurs. In this case, we're interested in the values of each pie.

The code snippet below will tally up the totals for each pie chart and generate a percentage modifier. With the current calculations, the largest pie would have a size of 100%, and a pie with exactly half the value of the largest pie would be 50%. You can of course change this if you'd like.

Oh, and if this is too much overkill, you can hard code the size of each pie by setting the "size" attribute in the "plot" object of each chart. You can see this as calculated by my function if you right-click and view the chart source. The values can be percentage values or a numeric value for size in pixels.

Let me know if you have any questions!

// Dataparse is called when the data is ready for the chart
zingchart.dataparse = function (p, d) {
    console.log(d);
  
    // Get number of series in graphset, initialize array of 0s
    var seriesLength=d.graphset.length;
    var total = new Array(seriesLength);
    while(seriesLength--) total[seriesLength] = 0;
  
    // Calculate the sum of the values in each series (each pie)
    for (var n = 0; n < d.graphset.length; n++) {
        for (var m = 0; m < d.graphset[n].series.length; m++) {
            total[n] += d.graphset[n].series[m].values[0];
        }
    }

    // Find the largest value in the array of totals
    var largest = Math.max.apply(Math, total);
    // Calculate % modifier based off of largest value for each pie chart
    for (var n=0;n<d.graphset.length;n++){
      var sizeModifier=(total[n]/largest)*100;
      // Apply the size modifier to the plot object of each pie chart.
      d.graphset[n].plot.size = sizeModifier + '%';
    }

    // Return modified chart object to be rendered.
    return d;
}

var oData = {
    "layout": "h",
        "graphset": [{
        "type": "pie",
            "plotarea": {
            "margin": "0 40"
        },
            "plot": {
            "value-box": {
                'visible': 1,
              "text":"%v"
            }
        },
            "series": [{
            "values": [169]
        }, {
            "values": [151]
        }, {
            "values": [142]
        }, {
            "values": [125]
        }]
    }, {
        "type": "pie",
            "plotarea": {
            "margin": "0 40"
        },
            "scaleX": {

        },
            "scaleY": {

        },
            "plot": {
            "value-box": {
                'visible': 1,
                "text":"%v"
            }
        },
            "series": [{
            "values": [120]
        }, {
            "values": [89]
        }, {
            "values": [87]
        }, {
            "values": [147]
        }]
    }]
};
zingchart.render({
    id: 'chartDiv',
    data: oData,
    width: 800,
    height: 400
});

<script src="http://cdn.zingchart.com/zingchart.min.js"></script>
<div id='chartDiv'></div>