jQWidgets Forums

This topic contains 1 reply, has 2 voices, and was last updated by Ivo Zhulev 8 years, 8 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

Bubble chart question Posts

August 19, 2016 at 4:08 pm Bubble chart question #86706

Participant

I have bubble chart code modified from the demo. It shows bubble one inside in other (See New York ). I switch label for YoYGrowthQ2 to the left. How can I switch bubble to the left, so circle and diamond will be shown separately. Here is the code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>jqxChart Bubble Series Example</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { City: 'New York', SalesQ1: 2,  YoYGrowthQ1: 40, YoYGrowthQ2: 10 },
                    { City: 'London', SalesQ1: 3, YoYGrowthQ1: 5, YoYGrowthQ2: 3 },
                    { City: 'Paris', SalesQ1: 11, YoYGrowthQ1: 6, YoYGrowthQ2: 1.15 },
                    { City: 'Tokyo', SalesQ1: 7,  YoYGrowthQ1: 3, YoYGrowthQ2: 5 },
                    { City: 'Berlin', SalesQ1: 5, YoYGrowthQ1: 30, YoYGrowthQ2: 10 },
                    { City: 'San Francisco', SalesQ1: 4, YoYGrowthQ1: 7, YoYGrowthQ2: 5 },
                    { City: 'Chicago', SalesQ1: 10, YoYGrowthQ1: 5, YoYGrowthQ2: 0.65 }
            ];

            var source =
            {
                datafields: [
                    { name: 'City' },
                    { name: 'SalesQ1' },
                    //{ name: 'SalesQ2' },
                    { name: 'YoYGrowthQ1' },
                    { name: 'YoYGrowthQ2' }
                ],
                localdata: sampleData
            };
            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "Sales by City in Q1 and Q2, and YoY sales growth",
                description: "(the size of the circles represents relative YoY growth)",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                colorScheme: 'scheme04',
                xAxis:
                {
                    dataField: 'City',
                    valuesOnTicks: false
                },
                valueAxis:
                {
                    unitInterval: 1,
                    minValue: 1,
                    maxValue: 17,
                    title: { text: 'Floor<br>' },
                    labels: {
                        //formatSettings: { prefix: '$', thousandsSeparator: ',' },
                        horizontalAlignment: 'right'
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'bubble',

                            series: [
                                    {
                                        dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ1', minRadius: 0.5, maxRadius: 20, displayText: 'YoYGrowth in Q1', symbolType:'diamond',
                                        labels: {
                                            visible: true, offset: { x: 0, y: -20 },
                                            verticalAlignment: 'top'
                                        },
                                        formatFunction: function (value, itemIndex) {
                                            var YoYGrowth1 = dataAdapter.records[itemIndex].YoYGrowthQ1;
                                            return YoYGrowth1;
                                        }
                                    },
                                    {
                                        dataField: 'SalesQ1', radiusDataField: 'YoYGrowthQ2', minRadius: 0.5, maxRadius: 20, displayText: 'YoYGrowth in Q2',
                                        labels: {
                                            visible: true, offset: { x: -30, y: -20 },
                                            verticalAlignment: 'top'
                                        },
                                        formatFunction: function (value, itemIndex) {
                                            var YoYGrowth2 = dataAdapter.records[itemIndex].YoYGrowthQ2;
                                            return YoYGrowth2;
                                        }
                                    }
                            ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

            var chart = $('#chartContainer').jqxChart('getInstance');

            // symbol selection drop down
            var symbolsList = ["circle", "diamond", "square", "triangle_up", "triangle_down", "triangle_left", "triangle_right"];
            $("#dropDownSerie1Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie1Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[0].symbolType = value;
                chart.update();
            });

            $("#dropDownSerie2Symbol").jqxDropDownList({ source: symbolsList, selectedIndex: 0, width: '200', height: '25', dropDownHeight: 100 });

            $('#dropDownSerie2Symbol').on('change', function (event) {
                var value = event.args.item.value;
                chart.seriesGroups[0].series[1].symbolType = value;
                chart.update();
            });

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px">
    </div>
    <table style="width: 550px">
        <tr>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">
                    Select Serie 1 Symbol:
                </p>
                <div id='dropDownSerie1Symbol'>
                </div>
            </td>
            <td>
                <p style="font-family: Verdana; font-size: 12px;">
                    Select Serie 2 Symbol:
                </p>
                <div id='dropDownSerie2Symbol'>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

August 22, 2016 at 7:36 am Bubble chart question #86732

Ivo Zhulev

Participant

Hi arkgroup,

That is because both are with the same dataField and they cannot be separated.

Best Regards,
Ivo

jQWidgets Team
http://www.jqwidgets.com/

Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.