DHTMLX Docs & Samples Explorer

### Grouping and Sorting

It's possible to group chart data by a certain property. You may use group method or group property in a chart constructor.

Source

    <script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script>
    <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css">
    <style>
        .dhx_chart_title{
            padding-left:3px
        }
    </style>
    <script>var barChart;
    window.onload = function() {
        barChart = new dhtmlXChart({
            view: "bar",
            container: "chart_container",
            value: "#sales#",
            color: "#b3e025",
            gradient: true,
            border: false,
            width: 70,
            label: "#id#",
            sort: {
                by: "#id#",
                as: "string",
                dir: "asc";
            },
            group: {
                by: "#year#",
                map: {
                    sales: ["#sales#", "sum"]
                    }
            },
            padding: {
                bottom: 0;
            }
        });
        barChart.load("../common/stat.xml");
    }
    function groupA() {
        barChart.group({
            by: "#company#",
            map: {
                sales: ["#sales#", "sum"]
                }
        });
        barChart.refresh();
    }
    function groupB() {
        barChart.group({
            by: "#year#",
            map: {
                sales: ["#sales#", "sum"]
                }
        });
    }
    function groupC() {
        barChart.group({
            by: "#year#",
            map: {
                sales: ["#sales#", "max"]
                }
        });
    }</script>

    <div id="chart_container" style="width:600px;height:300px;border:1px solid #A4BED4;"></div>

    <br/>
    <input type="button" name="some_name" value="Group by" onclick="window['group'+document.getElementById('groupby').value]()">
    <select name="groupby" id="groupby">
        <option value="A">company</option>
        <option value="B" SELECTED>year (total sales)</option>
        <option value="C">year (max sales)</option>
    </select>