jQuery UI Widgets › Forums › Chart › Display details of perticular stack of stacked Bar chart

Tagged: , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Display details of perticular stack of stacked Bar chart Posts
  • May 14, 2013 at 8:13 am Display details of perticular stack of stacked Bar chart #21116

    abc
    Participant

    Hi,

    In stacked Bar chart, on click of any Stack of any bar,display x axis and y axis data related to that stack.

    using “Click” event we can display details of simple bar chart easily, but In stacked bar chart one bar includes different information in form of Stack, how to get information of particular stack on click.

     

    May 15, 2013 at 5:43 am Display details of perticular stack of stacked Bar chart #21171

    Dimitar
    Participant

    Hello abcd,

    Please take a look at the following example, which demonstrates an alert with the X and Y axis values on click:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.8.3.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">
            $(document).ready(function () {
                // prepare chart data as an array
                var sampleData = [
                        { 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 }
                    ];
                // prepare jqxChart settings
                var settings = {
                    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: sampleData,
                    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' }
                                    ]
                            }
                        ]
                };
                // setup the chart
                $('#jqxChart').jqxChart(settings);
                // get the series groups of an existing chart
                var groups = $('#jqxChart').jqxChart('seriesGroups');
                // add a click event handler function to the 1st group    
                if (groups.length > 0) {
                    groups[0].click = function (e) {
                        alert(e.serie.displayText + " for day " + (e.elementIndex + 1) + ": " + e.elementValue + " minutes.");
                    }
                    // update the group
                    $('#jqxChart').jqxChart({ seriesGroups: groups });
                }
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxChart' style="width: 680px; height: 400px;" />
    </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.