jQuery UI Widgets Forums Chart multiple chart in one page and change chart

This topic contains 7 replies, has 6 voices, and was last updated by  dennifernandez 7 months, 1 week ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • 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

    • This topic was modified 7 years, 3 months ago by  Peter Stoev. Reason: Removed a link to Third Party product according to the Forum Policy

    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/


    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).


    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/


    lug
    Participant

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


    abhipkr
    Participant

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


    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


    dennifernandez
    Participant

    sec

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

You must be logged in to reply to this topic.