jQWidgets Forums

Tagged: chart, column, group, jqxChart, line, series

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

Grouped Data Chart Posts

January 14, 2014 at 11:12 am Grouped Data Chart #47840

Participant

Hi,

I have a local data like this: [
{product:p1, year:2001, sales:250000},
{product:p1, year:2002, sales:300000},
{product:p2, year:2001, sales:180000},
{product:p2, year:2002, sales:50000},
…]

how can I create a column or line chart to show both product and yearly sales?

In reporting services, we have categories and series. You can put product in categories and year in series, and of course put sales in the values section.

How can I perform such thing here?

Regards,
Amin

January 15, 2014 at 6:53 am Grouped Data Chart #47879

Dimitar

Participant

Hello Amin,

Here is a suggestion:

<!DOCTYPE html>
<html lang="en">
<head>
    <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/jqxchart.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare chart data as an array
            var localData = [
                { "product": "p1", "2001": 250000, "2002": 300000 },
                { "product": "p2", "2001": 180000, "2002": 50000 }
            ]

            var source =
            {
                datatype: "array",
                datafields: [
                    { name: 'product' },
                    { name: '2001' },
                    { name: '2002' }
                ],
                localdata: localData
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } });

            // prepare jqxChart settings
            var settings = {
                title: "Product Sales",
                showLegend: true,
                enableAnimations: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: dataAdapter,
                categoryAxis:
                    {
                        dataField: 'product',
                        showGridLines: true
                    },
                colorScheme: 'scheme01',
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 50,
                            valueAxis:
                            {
                                unitInterval: 50000,
                                displayValueAxis: true,
                                description: 'Sales'
                            },
                            series: [
                                    { dataField: '2001', displayText: 'Sales in 2001' },
                                    { dataField: '2002', displayText: 'Sales in 2002' }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#jqxChart').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div style='height: 600px; width: 682px;'>
        <div id='host' style="margin: 0 auto; width: 680px; height: 400px;">
            <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
                top: 0px;">
            </div>
        </div>
    </div>
</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.