Graph (bar) responding to slider values - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: bar, chart, column, control, graph, jqxChart, jqxslider, slider, update

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

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

Author

Graph (bar) responding to slider values Posts

November 6, 2014 at 10:50 am Graph (bar) responding to slider values #62292

Paul

Participant

Hi there,

Is an interaction between a slider and barchart possible with JQwidgets? I want to grow/shrink a bargraph, depending of value from the slider. Pretty much like this example: https://www.hypotheekbond.nl/f1/hypotheek-vergelijken?api_key=6eb700bee690bd4bb3c6

May’be someone can help me out with this.

Kind regards,
Paul

November 6, 2014 at 11:48 am Graph (bar) responding to slider values #62305

Dimitar

Participant

Hello Paul,

Here is an example. We hope it is helpful to you:

<!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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // prepare chart data
            var sampleData = [
                { Company: 'Company 1', MarketShare: 50 },
                { Company: 'Company 2', MarketShare: 50 }
            ]

            // prepare jqxChart settings
            var settings = {
                title: "Market Share",
                description: "Statistics for 2014",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 20, top: 5, right: 20, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Company',
                        showGridLines: true,
                        flip: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            orientation: 'horizontal',
                            columnsGapPercent: 100,
                            toolTipFormatSettings: { thousandsSeparator: ',' },
                            valueAxis:
                            {
                                flip: true,
                                unitInterval: 10,
                                maxValue: 100,
                                minValue: 0,
                                displayValueAxis: true,
                                description: '',
                                formatFunction: function (value) {
                                    return parseInt(value / 1000000);
                                }
                            },
                            series: [
                                    { dataField: 'MarketShare', displayText: 'Market share', formatSettings: { prefix: "%"} }
                                ]
                        }
                    ]
            };

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

            $("#jqxslider").jqxSlider({ width: 850, min: 0, max: 100, value: 50, step: 5 });

            $('#jqxslider').on('change', function (event) {
                var value = event.args.value;
                sampleData[0].MarketShare = value;
                sampleData[1].MarketShare = 100 - value;
                $('#chartContainer').jqxChart("update");
            });
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width: 850px; height: 500px;">
    </div>
    <em>Company 1</em> market share:
    <div id='jqxslider'>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

November 6, 2014 at 3:55 pm Graph (bar) responding to slider values #62321

Paul

Participant

Hi Dimitar,

Thank you for your response, this is exactly what I mean. It looks really nice too! May I ask you another question related to this?

Suppose I want to do some calculations in between, thus depending on the slider value, the outcome differs. Like if slide valuer=10 multiply it by 50, slider value=20 multiply it by 40 etc. etc. How can this be done?

Sorry for asking (probably) obvious questions but I’m not a developer, just someone who wants to explore the possibilities.

Kind regards,
Paul

November 7, 2014 at 5:47 am Graph (bar) responding to slider values #62348

Dimitar

Participant

Hi Paul,

By using a conditional statement, you can set a different value to the bar depending on the slider value, e.g.:

$('#jqxslider').on('change', function(event) {
    var value = event.args.value;
    if (value == 10) {
        sampleData[0].MarketShare = value * 50;
    } else if (value == 20) {
        sampleData[0].MarketShare = value * 40;
    }
    $('#chartContainer').jqxChart("update");
});

Best Regards,
Dimitar

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

November 7, 2014 at 3:45 pm Graph (bar) responding to slider values #62393

Paul

Participant

Hi Dimitar,

Thanks again for your help. I was wondering if you also develop specific customer requests or do I have to find a developer myself? You can contact me directly on my e-mail address.

Kind regards,
Paul

November 10, 2014 at 6:20 am Graph (bar) responding to slider values #62434

Dimitar

Participant

Hi Paul,

Please read the Professional Services section on the Licensing page and post your custom development queries to sales@jqwidgets.com.

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.