jQWidgets Forums

jQuery UI Widgets › Forums › Chart › Adding Totals to a Stacked Bar Chart

Tagged: , , ,

This topic contains 2 replies, has 3 voices, and was last updated by  harunmahfud 9 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Adding Totals to a Stacked Bar Chart Posts
  • April 29, 2015 at 6:56 pm Adding Totals to a Stacked Bar Chart #70464

    JonH
    Participant

    How would I go about adding the total to the top of the column?

    Can it be done for a 100% Stacked Bar chart?

    I’ve searched but haven’t hit the right combination of terms to find what I’m looking for.

    Thanks,
    -jon

    April 30, 2015 at 5:55 am Adding Totals to a Stacked Bar Chart #70469

    Peter Stoev
    Keymaster

    Hi Jon,

    The functionality is not supported by default. However, it can be simulated easily.

    Please, take a look at the samples below:

    Option 1:

    <!DOCTYPE html>
<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.11.1.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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 10 },
                    { 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: 30, Swimming: 45, Cycling: 10 }
                ];

            function getTotal(itemIndex) {
                return sampleData[itemIndex].Running + sampleData[itemIndex].Swimming + sampleData[itemIndex].Cycling;
            }

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: false,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        unitInterval: 1,
                        axisSize: 'auto',
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        gridLines: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        }
                    },
                valueAxis:
                {
                    unitInterval: 10,
                    //minValue: 0,
                    //maxValue: 120,
                    title: { text: 'Time in minutes' },
                    labels: { horizontalAlignment: 'right' },
                    tickMarks: { color: '#BCBCBC' }
                },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            //   orientation: 'horizontal',
                            type: 'stackedcolumn',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            topWidthPercent: 20,
                            bottomWidthPercent: 100,

                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling', labels: { visible: true, offset: {x:0, y: -20}, verticalAlignment: 'top' },
                                      formatFunction: function (value, itemIndex, serieIndex, groupIndex) {                                            
                                            return getTotal(itemIndex);
                                        },
                                      toolTipFormatFunction: function (value, itemIndex, serieIndex, groupIndex) {                                            
                                            return 'Day: ' + sampleData[itemIndex].Day + '<br>' +
                                            'Cycling: ' + sampleData[itemIndex].Cycling;
                                        },
                                    }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px;"/>
</body>
</html>

    Option 2:

    <!DOCTYPE html>
<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.11.1.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/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var sampleData = [
                    { Day: 'Monday', Running: 30, Swimming: 10, Cycling: 25 },
                    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 10 },
                    { 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: 30, Swimming: 45, Cycling: 10 }
                ];

            function getTotal(itemIndex) {
                return sampleData[itemIndex].Running + sampleData[itemIndex].Swimming + sampleData[itemIndex].Cycling;
            }

            // prepare jqxChart settings
            var settings = {
                title: "Fitness & exercise weekly scorecard",
                description: "Time spent in vigorous exercise by activity",
                enableAnimations: false,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                    {
                        dataField: 'Day',
                        unitInterval: 1,
                        axisSize: 'auto',
                        tickMarks: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        },
                        gridLines: {
                            visible: true,
                            interval: 1,
                            color: '#BCBCBC'
                        }
                    },
                valueAxis:
                {
                    unitInterval: 10,
                    //minValue: 0,
                    //maxValue: 120,
                    title: { text: 'Time in minutes' },
                    labels: { horizontalAlignment: 'right' },
                    tickMarks: { color: '#BCBCBC' }
                },
                colorScheme: 'scheme06',
                seriesGroups:
                    [
                        {
                            //   orientation: 'horizontal',
                            type: 'stackedcolumn',
                            columnsGapPercent: 50,
                            seriesGapPercent: 0,
                            topWidthPercent: 20,
                            bottomWidthPercent: 100,

                            series: [
                                    { dataField: 'Running', displayText: 'Running' },
                                    { dataField: 'Swimming', displayText: 'Swimming' },
                                    { dataField: 'Cycling', displayText: 'Cycling' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);

            // custom draw totals
            var instance = $('#chartContainer').jqxChart('getInstance');
            var renderer = instance.renderer;
            for (var i = 0; i < sampleData.length; i++) {
                var pos = instance.getItemCoord(0 /* serieGroupIndex */, 2 /* serieIndex */, i /* itemIndex */);
                var text = getTotal(i);

                var textSize = renderer.measureText(text, 0, { 'class': 'jqx-chart-label-text' });

                renderer.text(
                    text, // text
                    pos.x + (pos.width - textSize.width) / 2, // x
                    pos.y - 20, // y
                    textSize.width,
                    textSize.height,
                    0, // rotation angle
                    {'class': 'jqx-chart-label-text' } // parameters

                );
            }

        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px;"/>
</body>
</html>

    Hope this helps.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    May 12, 2015 at 4:11 am Adding Totals to a Stacked Bar Chart #70950

    harunmahfud
    Participant

    Nice tutorial.
    But I still have one problem.
    When I click the legend, my labels are disappeared.
    How can I set my labels always appear when I click the legend?

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.