multiple chart in one page and change chart - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Angular chart, change, change source, chart, jquery chart, jqxChart

This topic contains 7 replies, has 6 voices, and was last updated by dennifernandez 5 years ago.

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

Author

multiple chart in one page and change chart Posts

December 17, 2012 at 10:58 pm multiple chart in one page and change chart #12488

fun.maaza

Member

Hello,

I need to open more than one carts in my page and i need to change chart when user change value using drop-down box.

see 1m 3m and so on

and how can i change cart using drop-down menu
Like i have 3 charts today,month, year.When user select today chart today chart show and when he select month, monthly chart show how can i do this please tell me

Regards

December 18, 2012 at 7:09 am multiple chart in one page and change chart #12496

Dimitar

Participant

Hello fun.maaza,

The following example shows how to select different charts from a drop-down list:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
    <title id='Description'>jqxChart Stacked Column Series Example</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.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/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var chartList = [
                    "First chart",
                    "Second chart",
                    "Third chart"
                    ];
            $("#jqxdropdownlist").jqxDropDownList({ source: chartList, selectedIndex: -1, width: '200px', height: '25px', dropDownHeight: '75px' });
            // source and settings for the first chart
            var sampleData1 = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
                ];
            var settings1 = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData1,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling' }
                                ]
                        }
                    ]
            };
            // source and settings for the second chart
            var sampleData2 = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
                    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
                    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
                ];
            var settings2 = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData2,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'Day',
                        showTickMarks: true,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        showGridLines: false,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme04',
                seriesGroups:
                    [
                        {
                            type: 'stackedcolumn100',
                            columnsGapPercent: 100,
                            seriesGapPercent: 5,
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                displayValueAxis: true,
                                description: 'Time in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling' }
                                ]
                        }
                    ]
            };
            // source and settings for the third chart
            var sampleData3 = [
                    { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 },
                    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 },
                    { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 },
                    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 },
                    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 },
                    { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 }
                ];
            var settings3 = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 10, top: 5, right: 10, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData3,
                categoryAxis:
                    {
                        text: 'Category Axis',
                        textRotationAngle: 0,
                        dataField: 'Day',
                        showTickMarks: true,
                        valuesOnTicks: false,
                        tickMarksInterval: 1,
                        tickMarksColor: '#888888',
                        unitInterval: 1,
                        gridLinesInterval: 1,
                        gridLinesColor: '#888888',
                        axisSize: 'auto'
                    },
                colorScheme: 'scheme05',
                seriesGroups:
                    [
                        {
                            type: 'line',
                            showLabels: true,
                            symbolType: 'circle',
                            valueAxis:
                            {
                                unitInterval: 10,
                                minValue: 0,
                                maxValue: 100,
                                description: 'Goal in minutes',
                                axisSize: 'auto',
                                tickMarksColor: '#888888'
                            },
                            series: [
                                    { dataField: 'Goal', displayText: 'Personal Goal' }
                                ]
                        }
                    ]
            };
            // changes the chart's settings
            $('#jqxdropdownlist').bind('select', function (event) {
                var args = event.args;
                if (args) {
                    var index = args.index;
                    var item = args.item;
                    // get item's label and value.
                    var label = item.label;
                    if (label == "First chart") {
                        $('#jqxChart').jqxChart(settings1);
                    } else if (label == "Second chart") {
                        $('#jqxChart').jqxChart(settings2);
                    } else if (label == "Third chart") {
                        $('#jqxChart').jqxChart(settings3);
                    };
                };
            });
        });
    </script>
</head>
<body class='default'>
    <div id="jqxdropdownlist">
    </div>
    <br />
    <div id='jqxChart' style="width: 680px; height: 400px;" />
</body>
</html>

Best Regards,
Dimitar

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

August 1, 2015 at 7:38 am multiple chart in one page and change chart #74393

lug

Participant

Hello,

This example is exactly what I would like to do. However, I have an issue with it. I copied exactly the above source code. It works with the following limitation: each chart is displayed when selecting it from the drop down list, BUT the first one selected cannot be displayed again.
Example of test case:
– I select the “second chart”; It is displayed
– I select the “first chart”; it is displayed
– I select the “second chart” again; not displayed
– I select the “third chart” or the “first chart”; it is displayed

The “second chart” is never displayed again. If I start with the test case with “first chart”, this is “first chart” that cannot be displayed more than one time. Etc…

It seems to be a bug, however, I was unable to find this issue within the forum.
I use the last release of jqwidget (3.8.1).

August 3, 2015 at 6:46 am multiple chart in one page and change chart #74410

Dimitar

Participant

Hello lug,

The following modification should fix this issue:

var init = false;
// changes the chart's settings
$('#jqxdropdownlist').bind('select', function (event) {
    var args = event.args;
    if (args) {
        var index = args.index;
        var item = args.item;
        // get item's label and value.
        var label = item.label;
        if (label == "First chart") {
            if (init === false) {
                $('#jqxChart').jqxChart(settings1);
            } else {
                $('#jqxChart').jqxChart({ source: sampleData1, colorScheme: 'scheme06', seriesGroups: settings1.seriesGroups });
            }
        } else if (label == "Second chart") {
            if (init === false) {
                $('#jqxChart').jqxChart(settings2);
            } else {
                $('#jqxChart').jqxChart({ source: sampleData2, colorScheme: 'scheme04', seriesGroups: settings2.seriesGroups });
            }
        } else if (label == "Third chart") {
            if (init === false) {
                $('#jqxChart').jqxChart(settings3);
            } else {
                $('#jqxChart').jqxChart({ source: sampleData3, colorScheme: 'scheme05', seriesGroups: settings3.seriesGroups });
            }
        };
        if (init === false) {
            init = true;
        }
    };
});

Best Regards,
Dimitar

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

August 3, 2015 at 8:01 am multiple chart in one page and change chart #74420

lug

Participant

Thank you Dimitar.
This solve my issue. I’m not sure I will find the solution alone.

July 27, 2019 at 5:59 am multiple chart in one page and change chart #106261

abhipkr

Participant

how to select different charts from a click on PieChart please help

July 30, 2019 at 7:21 am multiple chart in one page and change chart #106292

Todor

Participant

Hello abhipkr,

An answered is given in the following topic.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

August 21, 2019 at 12:56 pm multiple chart in one page and change chart #106538

dennifernandez

Participant

sec

Author

Posts

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

You must be logged in to reply to this topic.