jQWidgets Forums

jQuery UI Widgets › Forums › Chart › How can I make a chart with 2 stacked columns ?

Tagged: , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    How can I make a chart with 2 stacked columns ? Posts
  • August 9, 2012 at 1:55 pm How can I make a chart with 2 stacked columns ? #6706

    LucianoUY
    Member

    I need a chart with 2 stacked columns to compare.

    For example, I want to see the sales by department by quarter, for 2 years.
    Then, I have one stacked column series by quarter for 2011, and another one for 2012.
    And my stacked parts represent each department.

    How can I do this ?

    Thanks in advance.
    Regards,

    August 10, 2012 at 12:13 pm How can I make a chart with 2 stacked columns ? #6722

    Dimitar
    Participant

    Hello LucianoUY,

    The following example may be what you are looking for:

    <html lang="en">
    <head>
        <title id='Description'>jQuery Chart Column Series Example</title>
        <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxchart.js"></script>
        <script type="text/javascript" src="jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    		
                // prepare chart data
                var departmentData = [
                        { Quarter:'Q1, 2011', Department1:300, Department2:500, Department3:1000},
                        { Quarter:'Q2, 2011', Department1:200, Department2:500, Department3:700},
                        { Quarter:'Q3, 2011', Department1:350, Department2:590, Department3:100},
                        { Quarter:'Q4, 2011', Department1:200, Department2:500, Department3:1000},
                        { Quarter:'Q1, 2012', Department1:700, Department2:200, Department3:1100},
                        { Quarter:'Q2, 2012', Department1:20, Department2:300, Department3:600},
                        { Quarter:'Q3, 2012', Department1:800, Department2:590, Department3:130},
                        { Quarter:'Q4, 2012', Department1:1000, Department2:100, Department3:120}
                    ];
                // prepare jqxChart settings
                var settings = {
                    title: "Sales by department",
                    description: "Sales by department years 2011 and 2012",
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: departmentData,
                    categoryAxis:
                        {
                            dataField: 'Quarter',
                            showGridLines: false
                        },
                    colorScheme: 'scheme05',
                    seriesGroups:
                        [
                            {
                                type: 'stackedcolumn',
                                columnsGapPercent: 30,
                                seriesGapPercent: 0,
                                valueAxis:
                                {
                                    minValue: 0,
                                    maxValue: 1000,
                                    unitInterval: 100,
                                    description: 'Sales per quarter'
                                },
                                series: [
                                        { dataField: 'Department1', displayText: 'Department 1'},
                                        { dataField: 'Department2', displayText: 'Department 2'},
                                        { dataField: 'Department3', displayText: 'Department 3'}
                                    ]
                            }
                        ]
                };
                
                // select the chartContainer DIV element and render the chart.
                $('#chartContainer').jqxChart(settings);
            });
        </script>
    </head>
    <body style="background:white;">
    	<div id='chartContainer' style="width:600px; 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.