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

<div id="wdr-container"></div>
var pivot = new WebDataRocks({
    container: "#wdr-container",
    beforetoolbarcreated: customizeToolbar,
    report: {
    "dataSource": {
        "dataSourceType": "csv",
        "filename": "https://cdn.webdatarocks.com/data/data.csv"
    },
    "slice": {
        "rows": [
            {
                "uniqueName": "Destination"
            },
            {
                "uniqueName": "Measures"
            }
        ],
        "columns": [
            {
                "uniqueName": "Category"
            },
            {
                "uniqueName": "Country"
            }
        ],
        "measures": [
            {
                "uniqueName": "Price",
                "aggregation": "stdevp"
            },
            {
                "uniqueName": "Sample Standard Deviation",
                "formula": "stdevs(\"Price\") ",
                "caption": "Sample StDev of Price"
            }
        ],
        "expands": {
            "columns": [
                {
                    "tuple": [
                        "Category.Accessories"
                    ]
                }
            ]
        }
    },
    "conditions": [
        {
            "formula": "#value > 1500",
            "measure": "Price",
            "format": {
                "backgroundColor": "#0598df",
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        },
        {
            "formula": "#value > 1500",
            "measure": "Sample Standard Deviation",
            "format": {
                "backgroundColor": "#f45328",
                "color": "#FFFFFF",
                "fontFamily": "Arial",
                "fontSize": "12px"
            }
        }
    ],
    "formats": [
        {
            "name": "",
            "thousandsSeparator": " ",
            "decimalSeparator": ".",
            "decimalPlaces": 2,
            "maxSymbols": 20,
            "currencySymbol": "",
            "currencySymbolAlign": "left",
            "nullValue": " ",
            "infinityValue": "Infinity",
            "divideByZeroValue": "Infinity"
        }
    ]
},
    toolbar: true
});

function customizeToolbar(toolbar) {
    // get all tabs
    var tabs = toolbar.getTabs();
    toolbar.getTabs = function() {
        // There will be two new tabs at the beginning of the toolbar 
        tabs.unshift({
            id: "wdr-tab-lightblue",
            title: "LightBlue",
            handler: newtabHandlerBlue,
            icon: this.icons.format
        }, {
            id: "wdr-tab-default",
            title: "Default",
            handler: newtabHandlerDefault,
            icon: this.icons.format
        });
        return tabs;
    }
    var newtabHandlerBlue = function() {
        setLightBlueTheme();
    };
    var newtabHandlerDefault = function() {
        setDefaultTheme();
    };
}

function setLightBlueTheme() {
    var prevThemeTags = getPrevTheme();
    var link = document.createElement('link');
    link.href = "https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css";
    link.rel = "stylesheet";
    link.type = "text/css";
    link["onload"] = function() {
        if (prevThemeTags != null) {
            for (var i = 0; i < prevThemeTags.length; i++) {
                if (window.ActiveXObject || "ActiveXObject" in window) {
                    prevThemeTags[i].removeNode(true);
                } else {
                    prevThemeTags[i].remove();
                }
            }
        }
    };
    document.body.appendChild(link);
}

function setDefaultTheme() {
    var prevThemeTags = getPrevTheme();
    var link = document.createElement('link');
    link.href = "https://cdn.webdatarocks.com/latest/webdatarocks.min.css";
    link.rel = "stylesheet";
    link.type = "text/css";
    link["onload"] = function() {
        if (prevThemeTags != null) {
            for (var i = 0; i < prevThemeTags.length; i++) {
                if (window.ActiveXObject || "ActiveXObject" in window) {
                    prevThemeTags[i].removeNode(true);
                } else {
                    prevThemeTags[i].remove();
                }
            }
        }
    };
    document.body.appendChild(link);
}


function getPrevTheme() {
    var linkTags = document.head.getElementsByTagName("link");
    var prevThemeTags = [];
    for (var i = 0; i < linkTags.length; i++) {
        if (linkTags[i].href.indexOf("webdatarocks.min.css") > -1 || linkTags[i].href.indexOf("webdatarocks.css") > -1) {
            prevThemeTags.push(linkTags[i]);
        }
    }
    linkTags = document.body.getElementsByTagName("link");
    for (var i = 0; i < linkTags.length; i++) {
        if (linkTags[i].href.indexOf("webdatarocks.min.css") > -1 || linkTags[i].href.indexOf("webdatarocks.css") > -1) {
            prevThemeTags.push(linkTags[i]);
        }
    }
    return prevThemeTags;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.