[SOLVED] WebDataRocks Pivot Order Dinamclly

WebDataRocks Pivot Order Dinamclly

So, i have this order

Green,0,0,0,0,0,0
Black,0,0,0,0,0,0
Red,0,0,0,0,0,0,0
Blue,0,0,0,0,0,0,0

When generate the webdatarocks displays

Blue,0,0,0,0,0,0,0
Black,0,0,0,0,0,0
Green,0,0,0,0,0,0
Red,0,0,0,0,0,0,0

Any way to get them to display in that order, rather than alphabetical? All I can think at the moment is to give them a numerical prefix…

Solution

I think it can be solved with the "sort" property when configuring slice. You need to predefine it in the report JSON object. I used JSON data for the sample:

const pivot = new WebDataRocks({
        container: "#wdr-component",
        toolbar: true,
        width: "100%",
        height: 300,
        report: {
    "dataSource": {
        "dataSourceType": "json",
        "data": [{
            "Color": "Green", 
            "Data1": -1,
            "Data2": 0,
            "Data3": 0
        },
        {
            "Color": "Black", 
            "Data1": 0,
            "Data2": 0,
            "Data3": 0
        },
        {
            "Color": "Red", 
            "Data1": 0,
            "Data2": 0,
            "Data3": 0
        },
        {
            "Color": "Blue", 
            "Data1": 0,
            "Data2": 0,
            "Data3": 0
        }]
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Color",
                "sort": "unsorted"
            },
            {
                "uniqueName": "Data2"
            },
            {
                "uniqueName": "Data3"
            }
        ],
        "columns": [
            {
                "uniqueName": "Measures"
            }
        ],
        "measures": [
            {
                "uniqueName": "Data1",
                "aggregation": "sum"
            }
        ],
        "flatOrder": [
            "Color",
            "Data1",
            "Data2",
            "Data3"
        ]
    },
    "options": {
        "grid": {
            "type": "flat",
            "showGrandTotals": "off"
        }
    }
}
    }
);

<link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet"/>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>

<div id="wdr-component"></div>

It is possible to replace JSON data with the reference to your endpoint. Seems they have such examples in docs.