Bubble kendoChart - controlling bubble size

[Steve]

Hi there,

we are hitting some limitations with the out of the box bubble chart when it comes to controlling the actual size of the bubbles as the chart always resizes the bubble based on some relative size logic as it seems. We played around with minSize, maxSize and the actual size of the dataItem in the series but we never get the result we are looking for in terms of consistent size across multiple charts.

Is there an easy way to implement our own resize logic by somehow extending the kendoChart and overriding its "updateBubbleSIzes" function ? We are aware we can deep extend widgets in general, but not specifically how to do that for a specific kendoChart type and a specific function.
We would obviously like to do that on run-time rather then branching of your source code.

Another option would be to turn off relative sizing which seems to have been an option in the past, at least we still see it in the ASP API, is there a way to have that in the JS API and would that give us full control over the bubble sizes?

 

cheers,
Steve

 

[Daniel]

Hello Steve,

Could you clarify what result are you looking for? An option to disable the relative sizing is not supported but it should be possible to use the same minSize and maxSize values in order to use the same size.

As for overriding the method - this can done by changing the method in the BubbleChart prototype from the dataviz namespace e.g.

kendo.dataviz.BubbleChart.fn.updateBubblesSize = function (box) {
    //your logic
};

Regards,
Daniel
Telerik

 

 

[Steve]

Hi Daniel,

thanks for the reply. We found the same function in the source code as well so that seems to be the right way to customize it.

We are basically requiring to have controllable sizes based on a 3rd dimension, we are using the value difference between a dataItem's property score from a certain point in the past and the current value to indicate the change in score via the bubble size, big positive change makes the bubble bigger, big negative change makes the bubble smaller. As we want to use that across different charts we want to have full control over the resulting size of the bubble instead of using the default size logic which sizes things relative to the available chart area in the series.

 

Here the code we are using in case that helps others for reference:

/**
     * Replace BubbleChart#updateBubblesSize to use absolute size (as set on the data item) - rather
     * than size the bubbles relative to other data items in the same series.
     * Note: A size of 30 translates to a circle with radius 15.
     * See: http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.sizeField
     * See: original source code in kendo.dataviz.chart.js - we've modified the size logic but kept
     * the zIndex logic the same.
     * @param {type} box
     *   A bubble chart.
     * @returns {undefined}
     */
    kendo.dataviz.BubbleChart.fn.updateBubblesSize = function (box) {
        function defined(value) {
            return typeof value !== undefined;
        }
        function valueOrDefault(value, defaultValue) {
            return defined(value) ? value : defaultValue;
        }
        var chart = this,
                options = chart.options,
                series = options.series,
                boxSize = Math.min(box.width(), box.height()),
                seriesIx,
                pointIx;
        for (seriesIx = 0; seriesIx < series.length; seriesIx++) {
            var currentSeries = series[seriesIx],
                    seriesPoints = chart.seriesPoints[seriesIx],
                    maxSize = currentSeries.maxSize || boxSize * 0.2,
                    maxR = maxSize / 2;
            for (pointIx = 0; pointIx < seriesPoints.length; pointIx++) {
                var point = seriesPoints[pointIx];
                if (point) {
                    var r = point.value.size,
                            baseZIndex = valueOrDefault(point.options.zIndex, 0),
                            zIndex = baseZIndex + (1 - r / maxR);
                    kendo.deepExtend(point.options, {
                        zIndex: zIndex,
                        markers: {
                            size: r,
                            zIndex: zIndex
                        },
                        labels: {
                            zIndex: zIndex + 1
                        }
                    });
                }
            }
        }
    };