jqxchart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, display, jqxChart, switch, toggle

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

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

Author

jqxchart Posts

January 13, 2014 at 7:17 am jqxchart #47776

Participant

Hello sir,

I have two jqxChart in my code and I need to display that on same position,that is switching both of the charts on the click of a button.
How to display both the charts like this, hiding one on click of a button.
Please give reply as soon as possible.

Regards
Priyanka jain

January 13, 2014 at 8:26 am jqxchart #47781

Dimitar

Participant

Hello Priyanka jain,

Here is an example:

<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">
        $(document).ready(function () {

            // chart1 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 }
                ];

            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' }
                                ]
                        }
                    ]
            };

            $('#chart1').jqxChart(settings1);

            // chart2 data
            var sampleData2 = [
                    { Day: 'Monday', Keith: 30, Erica: 45, George: 25 },
                    { Day: 'Tuesday', Keith: 25, Erica: 18, George: 30 },
                    { Day: 'Wednesday', Keith: 30, Erica: 20, George: 11 },
                    { Day: 'Thursday', Keith: 15, Erica: 25, George: 13 },
                    { Day: 'Friday', Keith: 20, Erica: 20, George: 20 },
                    { Day: 'Saturday', Keith: 30, Erica: 20, George: 30 },
                    { Day: 'Sunday', Keith: 33, Erica: 45, George: 19 }
                ];

            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' }
                                ]
                        }
                    ]
            };

            $('#chart2').jqxChart(settings2);
            $('#chart2').css("display", "none");

            $("#toggleCharts").click(function () {
                if ($("#chart2").css("display") == "none") {
                    $("#chart1").css("display", "none");
                    $("#chart2").css("display", "block");
                } else {
                    $("#chart2").css("display", "none");
                    $("#chart1").css("display", "block");
                };
            });
        });
    </script>
</head>
<body style="background: white;">
    <button id="toggleCharts">
        Toggle charts</button>
    <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/

Author

Posts

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

You must be logged in to reply to this topic.