Select chart via radio button - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, change, chart, checked, jqxChart, jqxRadioButton, radio

This topic contains 2 replies, has 2 voices, and was last updated by jaxond24 10 years, 7 months ago.

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

Author

Select chart via radio button Posts

February 28, 2014 at 5:55 am Select chart via radio button #50266

Participant

Hello,

Firstly, I’d like to say that I am a beginner with everything related to the question I’m asking so I apologise about what I’m sure is a simple thing to do. That said, I am really enjoying using JQWidgets to learn with, and find JQWidgets great!

My question is about having a group of radio buttons, and when each button is selected, a different chart is shown. Looking at the Radio Button demo, I can see that the following code produces output depending on the state of the button:

$(“#jqxRadioButton”).on(‘change’, function (event) {
clearLog();
var checked = event.args.checked;
if (checked) {
$(“#events”).prepend(‘<div><span>Unchecked: 12 Months Contract</span></div>’);
}
else $(“#events”).prepend(‘<div><span>Unchecked: 12 Months Contract</span></div>’);
});

Can some help be provided on what I need to do to have the change event produce a chart? In the end, I’d like 4 or 5 charts with different data sets to be assigned to each radio button which shows the chart when the corresponding radio button is selected.

Thank you,
Damian.

February 28, 2014 at 2:07 pm Select chart via radio button #50308

Dimitar

Participant

Hello Damian,

Here is an example with two charts. 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.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#showChart1").jqxRadioButton({ checked: true });
            $("#showChart2").jqxRadioButton();
            $("#showChart1").on('checked', function () {
                $("#chart2").css("display", "none");
                $("#chart1").css("display", "block");
            });
            $("#showChart2").on('checked', function () {
                $("#chart1").css("display", "none");
                if ($("#chart2").children().length > 0) {
                    $("#chart2").css("display", "block");
                } else {
                    $("#chart2").jqxChart(settings2);
                };
            });

            // prepare chart data
            var sampleData1 = [
                    { Day: 'Monday', Keith: 30, Erica: 15, George: 25 },
                    { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                    { Day: 'Thursday', Keith: 35, Erica: 25, George: 45 },
                    { Day: 'Friday', Keith: 20, Erica: 20, George: 25 },
                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                    { Day: 'Sunday', Keith: 60, Erica: 45, George: 90 }
                ];

            // prepare jqxChart settings
            var settings1 = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData1,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };

            // select the chartContainer DIV element and render the chart.
            $('#chart1').jqxChart(settings1);

            // prepare chart data
            var sampleData2 = [
                { Day: 'Monday', Keith: 2, Erica: 25, George: 25 },
                { Day: 'Tuesday', Keith: 25, Erica: 25, George: 30 },
                { Day: 'Wednesday', Keith: 30, Erica: 20, George: 25 },
                { Day: 'Thursday', Keith: 35, Erica: 50, George: 45 },
                { Day: 'Friday', Keith: 22, Erica: 20, George: 25 },
                { Day: 'Saturday', Keith: 33, Erica: 20, George: 30 },
                { Day: 'Sunday', Keith: 16, Erica: 45, George: 90 }
            ];

            // prepare jqxChart settings
            var settings2 = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData2,
                categoryAxis:
                    {
                        dataField: 'Day',
                        showGridLines: false
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 30,
                            seriesGapPercent: 0,
                            valueAxis:
                            {
                                minValue: 0,
                                maxValue: 100,
                                unitInterval: 10,
                                description: 'Time in minutes'
                            },
                            series: [
                                    { dataField: 'Keith', displayText: 'Keith' },
                                    { dataField: 'Erica', displayText: 'Erica' },
                                    { dataField: 'George', displayText: 'George' }
                                ]
                        }
                    ]
            };
        });
    </script>
</head>
<body style="background: white;">
    <div style="margin-top: 10px;">
        <h4>
            Select a chart</h4>
        <div style="margin: 3px;" id="showChart1">
            chart 1</div>
        <div style="margin: 3px;" id="showChart2">
            chart 2</div>
    </div>
    <div id='chart1' style="width: 600px; height: 400px;">
    </div>
    <div id='chart2' style="width: 600px; height: 400px;">
    </div>
</body>
</html>

Best Regards,
Dimitar

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

March 1, 2014 at 12:56 am Select chart via radio button #50329

jaxond24

Participant

Hello Dimitar,

Thank you very much! That seems perfect. I’m comparing the original sample code to what you’ve pasted in your reply so I can understand how they differ and how they work. I’m doing my best to learn, and I appreciate your help.

Thank you again,
Damian.

Author

Posts

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

You must be logged in to reply to this topic.