Bubble Chart: sizeField not working when data is grouped

1 posts, 0 answers
  1. Thomas
    Thomas avatar
    6 posts
    Member since:
    Jun 2012

    Posted 12 Sep 2012 Link to this post

    I have a bubble chart shown below. It works ok, except the sizeField is not sizing appropriately. If I remove the grouping, the sizeField will work correctly, but I will not see the data grouped how I would like it. (Comment out the "group:" section to see difference).

    Is this a bug or a problem in my code? 

    <script>
        var Productivity = [
                            {
                            perHour: 1100,
                            score: 5.25,
                            units: 49610,
                            area: "Territory 31",
                            year: 2012
                            },
                            {
                            perHour: 800,
                            score: 8.53,
                            units: 304197,
                            area: "Territory 32",
                            year: 2012
                            },
                            {
                            perHour: 965,
                            score: 8.62,
                            units: 13403,
                            area: "Territory 33",
                            year: 2012
                            },
                            {
                            perHour: 785,
                            score: 7.97,
                            units: 125007,
                            area: "Territory 34",
                            year: 2012
                            },
                            {
                            perHour: 690,
                            score: 8.04,
                            units: 137459,
                            area: "Territory 36",
                            year: 2012
                            },
                            {
                            perHour: 1050,
                            score: 7.9,
                            units: 214197,
                            area: "Territory 42",
                            year: 2012
                            },
                            {
                            perHour: 705,
                            score: 5.2,
                            units: 95403,
                            area: "Territory 43",
                            year: 2012
                            },
                            {
                            perHour: 1190,
                            score: 9.8,
                            units: 425007,
                            area: "Territory 44",
                            year: 2012
                            },
                            {
                            perHour: 250,
                            score: 4.5,
                            units: 189592,
                            area: "Territory 46",
                            year: 2012
                            }
                            ];
     
        function createChart() {
            $("#chart").kendoChart({
                                    dataSource: {
                                        data: Productivity
                                        ,group: {
                                            field: "area"
                                        }
                                    },
                                    series: [{
                                        name: "Accuracy vs. Productivity",
                                        type: "bubble",
                                        xField: "perHour",
                                        yField: "score",
                                        sizeField: "units"
                                    }]
                                    ,tooltip: {
                    visible: true,
                    format: "{2:N0} units",
                    opacity: 1
                }
                                });
        }
     
        $(document).ready(function() {
            setTimeout(function() {
                // Initialize the chart with a delay to make sure
                // the initial animation is visible
                createChart();
     
                $("#example").bind("kendo:skinChange", function(e) {
                    createChart();
                });
            }, 400);
        });
    </script>
Back to Top