Modify Scatter Symbol Size - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, jqxChart, scatter, series, size, Symbol, symbolSize, type

This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 10 years, 4 months ago.

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

Author

Modify Scatter Symbol Size Posts

October 20, 2014 at 4:34 am Modify Scatter Symbol Size #61344

Participant

I found example on changing the symbol in scatter chart plot, but seems all too big for my numbers. Can we change its sizes or the options of the symbol? Thanks in advance.

Best regards,
___________________

October 20, 2014 at 5:02 am Modify Scatter Symbol Size #61345

Dimitar

Participant

Hello arthipesa,

You can change the size of the symbols by setting the series symbolSize property, e.g.:

series: [
    { dataField: 'SalesQ1', symbolSize: 20, symbolType: 'circle', displayText: 'Sales in Q1', symbolSize: 50 }
]

Best Regards,
Dimitar

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

October 20, 2014 at 6:40 am Modify Scatter Symbol Size #61353

arthipesa

Participant

Thank you for your suggestion, however I tried to apply any number to symbolSize didn’t make the symbol change it’s size. I wonder what went wrong?

series: [{ dataField: 'percenttoloans', symbolType: 'circle', displayText: 'NPL / Outstanding (%)', color: 'rgba(255,0,0,0.5)', symbolSize: 5 }]

October 20, 2014 at 7:35 am Modify Scatter Symbol Size #61357

Dimitar

Participant

Hi arthipesa,

Make sure you have applied the setting to the scatter series of your chart (this works with the demo Scatter Chart with jQWidgets version 3.5.0).

Best Regards,
Dimitar

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

October 20, 2014 at 7:49 am Modify Scatter Symbol Size #61359

arthipesa

Participant

I try in
series: [{ dataField: 'specialmentionpercent', displayText: 'Special Mention / Outstanding (%)', color: 'rgba(255,0,0,0.5)', symbolType: 'circle', symbolSize: 1 }]

I also tried it like this too, and still didn’t work

{
                                        type: 'scatter',
                                        useGradient: false,
                                        showLabels: true,
                                        symbolType: 'circle',
                                        symbolSize: 1,
                                        formatSettings: {
                                            negativeWithBrackets: true
                                        },
                                        valueAxis:
                                        {

please kindly need your advice, I am using the JQWidget 3.5.0

October 21, 2014 at 5:10 am Modify Scatter Symbol Size #61408

Dimitar

Participant

Hi arthipesa,

Here is a modification of the demo Scatter Chart which shows series with increased and decreased symbol sizes.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/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: 330500, SalesQ2: 210500, YoYGrowth: 1.05 },
                    { City: 'London', SalesQ1: 120000, SalesQ2: 169000, YoYGrowth: 1.15 },
                    { City: 'Paris', SalesQ1: 205000, SalesQ2: 275500, YoYGrowth: 1.45 },
                    { City: 'Tokyo', SalesQ1: 187000, SalesQ2: 130100, YoYGrowth: 0.45 },
                    { City: 'Berlin', SalesQ1: 187000, SalesQ2: 113000, YoYGrowth: 1.65 },
                    { City: 'San Francisco', SalesQ1: 142000, SalesQ2: 102000, YoYGrowth: 1.25 },
                    { City: 'Chicago', SalesQ1: 171000, SalesQ2: 124000, YoYGrowth: 0.75 }
                ];
            // prepare jqxChart settings
            var settings = {
                title: "Sales by City in Q1 & Q2",
                description: "",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'City',
                        valuesOnTicks: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'scatter',
                            valueAxis:
                            {
                                unitInterval: 50000,
                                minValue: 50000,
                                maxValue: 350000,
                                description: 'Sales ($)',
                                formatSettings: { prefix: '$', thousandsSeparator: ',' }
                            },
                            series: [
                                    { dataField: 'SalesQ1', symbolSize: 20, symbolType: 'circle', symbolSize: 50, displayText: 'Sales in Q1' },
                                    { dataField: 'SalesQ2', symbolSize: 20, symbolType: 'diamond', symbolSize: 10, displayText: 'Sales in Q2' }
                                ]
                        }
                    ]
            };
            // 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: 2, 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: 1, 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>

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.