jQuery UI Widgets Forums Chart staked group coloumn chart

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • staked group coloumn chart #45704

    saroj
    Participant

    hi
    I want stacked and group column chart

    like this
    http://prntscr.com/27wiww

    please give solution asap.

    Regards
    Saroj

    staked group coloumn chart #45754

    Dimitar
    Participant

    Hello Saroj,

    It is possible to achieve this by using two seriesGroups of stackedcolumn series and then hide the valueAxis of one of them. The properties minValue and maxValue of the first group’s valueAxis should be the same as the second one’s minValue and maxValue respectively. Here is an example, based on the demo Stacked Column Series:

    <!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.10.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">
            $(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' }
                                    ]
                            },
                            {
                                type: 'stackedcolumn',
                                columnsGapPercent: 100,
                                seriesGapPercent: 5,
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    minValue: 0,
                                    maxValue: 100,
                                    displayValueAxis: false,
                                    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);
    
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxChart' style="width: 680px; height: 400px;" />
    </body>
    </html>
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.