123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <link href="https://cdn.webdatarocks.com/latest/webdatarocks.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
<script src="https://cdn.webdatarocks.com/latest/webdatarocks.highcharts.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="wdr-component"></div>
<div id="highchartsContainer"></div>
            
          
!
            
              var pivot = new WebDataRocks({
    container: "#wdr-component",
    toolbar: true,
    report: {
        "dataSource": {
            "dataSourceType": "json",
            "data": getSalesData()
        },
        slice: {
            reportFilters: [
                {
                uniqueName: "Category"                
            }
            ],
            rows: [{
                uniqueName: "Date.Year"                
            }, {
                uniqueName: "Measures"
            }],
            columns: [{
                uniqueName: "Country",
                "filter": {
                    "members": [
                        "Country.Germany",
                        "Country.Canada"
                    ]
                }
            }],
            measures: [{
                uniqueName: "Sales"
            }]
        }
    },
    reportcomplete: function() {
        pivot.off("reportcomplete");
        createChart();
    }
});

Highcharts.theme= {
    colors: ['#f45b5b',
    '#8085e9',
    '#8d4654',
    '#7798BF',
    '#aaeeee',
    '#ff0066',
    '#eeaaee',
    '#55BF3B',
    '#DF5353',
    '#7798BF',
    '#aaeeee'],
    chart: {
        backgroundColor: null,
        style: {
            fontFamily: 'Open Sans', fontWeight: 'bold'
        }
    }
    ,
    title: {
        style: {
            color: 'black', fontSize: '16px', fontWeight: 'bold', fontFamily: 'Open Sans'
        }
    }
    ,
    subtitle: {
        style: {
            color: 'black', fontSize: '18px', fontWeight: 'bold', fontFamily: 'Open Sans'
        }
    }
    ,
    tooltip: {
        borderWidth: 0
    }
    ,
    legend: {
        itemStyle: {
            fontWeight: 'bold', fontSize: '13px'
        }
    }
    ,
    xAxis: {
        labels: {
            style: {
                color: '#6e6e70'
            }
        }
    }
    ,
    yAxis: {
        labels: {
            style: {
                color: '#6e6e70'
            }
        }
    }
    ,
    plotOptions: {
        series: {
            shadow: true
        }
        ,
        candlestick: {
            lineColor: '#404048'
        }
        ,
        map: {
            shadow: false
        }
    }
    , // Highstock specific
    navigator: {
        xAxis: {
            gridLineColor: '#D0D0D8'
        }
    }
    ,
    rangeSelector: {
        buttonTheme: {
            fill: 'white',
            stroke: '#C0C0C8',
            'stroke-width': 1,
            states: {
                select: {
                    fill: '#D0D0D8'
                }
            }
        }
    }
    ,
    scrollbar: {
        trackBorderColor: '#C0C0C8'
    }
    , // General
    background2: '#E0E0E8'
};
// apply the theme
Highcharts.setOptions(Highcharts.theme);
function createChart() {
    pivot.highcharts.getData({
        type: "area"
    }, function(data) {
        Highcharts.setOptions({
            subtitle: {
                text: 'Sales by Countries'
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.y} $'
            },
            plotOptions: {
                area: {
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            }
        });
        Highcharts.chart("highchartsContainer", data);
    }, function(data) {
        Highcharts.setOptions({
            subtitle: {
                text: 'Sales by Countries'
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.y} $'
            },
            plotOptions: {
                area: {
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            }
        });
        Highcharts.chart("highchartsContainer", data);
    });
}

function getSalesData() {
    return [{
        "Country": "Canada",
        "Category": "Aircraft",
        "Sales": 204,
        "Date": "2018-01-02",
        "Profit": 216
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Sales": 292,
        "Date": "2018-01-02",
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-01-02",
        "Sales": 901,
        "Profit": 237
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2018-01-02",
        "Sales": 348
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2018-01-02",
        "Sales": 725,
        "Profit": 335
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2018-02-02",
        "Sales": 780,
        "Profit": 687
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2018-02-02",
        "Sales": 62,
        "Profit": 378
    },
    {
        "Country": "Germany",
        "Category": "Bikes",
        "Date": "2018-02-02",
        "Sales": 125,
        "Profit": 340
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-02-02",
        "Sales": 190,
        "Profit": 980
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-02-02",
        "Sales": 140,
        "Profit": 255
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2018-02-02",
        "Sales": 140,
        "Profit": 236
    }, {
        "Country": "Canada",
        "Category": "Cars",
        "Date": "2018-03-02",
        "Sales": 588,
        "Profit": 770
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2018-03-02",
        "Sales": 470,
        "Profit": 255
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2018-03-02",
        "Sales": 365,
        "Profit": 1400
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2018-03-02",
        "Sales": 320,
        "Profit": 1032
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-03-02",
        "Sales": 900,
        "Profit": 800
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2018-03-02",
        "Sales": 700,
        "Profit": 800
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-03-02",
        "Sales": 320,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-03-02",
        "Sales": 365,
        "Profit": 240
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-04-02",
        "Sales": 522,
        "Profit": 200
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2018-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2017-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2017-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2017-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2017-02-02",
        "Sales": 62,
        "Profit": 378
    },
    {
        "Country": "Germany",
        "Category": "Bikes",
        "Date": "2017-02-02",
        "Sales": 125,
        "Profit": 340
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2017-02-02",
        "Sales": 190,
        "Profit": 980
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2017-02-02",
        "Sales": 140,
        "Profit": 255
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2017-02-02",
        "Sales": 140,
        "Profit": 236
    }, {
        "Country": "Canada",
        "Category": "Cars",
        "Date": "2017-03-02",
        "Sales": 588,
        "Profit": 770
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2017-03-02",
        "Sales": 470,
        "Profit": 255
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2017-03-02",
        "Sales": 365,
        "Profit": 1400
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2017-03-02",
        "Sales": 320,
        "Profit": 1032
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2015-03-02",
        "Sales": 900,
        "Profit": 800
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2015-03-02",
        "Sales": 700,
        "Profit": 800
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2015-03-02",
        "Sales": 320,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2015-03-02",
        "Sales": 365,
        "Profit": 240
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2015-04-02",
        "Sales": 522,
        "Profit": 200
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2015-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2015-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2015-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2015-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2015-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2019-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2015-03-02",
        "Sales": 365,
        "Profit": 240
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2015-04-02",
        "Sales": 522,
        "Profit": 200
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2017-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2017-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2017-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2014-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2014-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2014-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2014-03-02",
        "Sales": 700,
        "Profit": 800
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-03-02",
        "Sales": 320,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-03-02",
        "Sales": 365,
        "Profit": 240
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-04-02",
        "Sales": 522,
        "Profit": 200
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2014-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2014-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2014-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2014-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2014-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-03-02",
        "Sales": 365,
        "Profit": 240
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-04-02",
        "Sales": 522,
        "Profit": 200
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2014-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2014-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2014-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2014-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2014-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2014-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2018-02-02",
        "Sales": 62,
        "Profit": 378
    },
    {
        "Country": "Germany",
        "Category": "Bikes",
        "Date": "2018-02-02",
        "Sales": 125,
        "Profit": 340
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-02-02",
        "Sales": 190,
        "Profit": 980
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-02-02",
        "Sales": 140,
        "Profit": 255
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2018-02-02",
        "Sales": 140,
        "Profit": 236
    }, {
        "Country": "Canada",
        "Category": "Cars",
        "Date": "2018-03-02",
        "Sales": 588,
        "Profit": 770
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2018-03-02",
        "Sales": 470,
        "Profit": 255
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2018-03-02",
        "Sales": 365,
        "Profit": 1400
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2018-03-02",
        "Sales": 320,
        "Profit": 1032
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-03-02",
        "Sales": 900,
        "Profit": 800
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2018-03-02",
        "Sales": 700,
        "Profit": 800
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-03-02",
        "Sales": 320,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-03-02",
        "Sales": 365,
        "Profit": 240
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-04-02",
        "Sales": 522,
        "Profit": 200
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2018-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2018-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2017-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2017-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2017-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2017-02-02",
        "Sales": 62,
        "Profit": 378
    },
    {
        "Country": "Germany",
        "Category": "Bikes",
        "Date": "2017-02-02",
        "Sales": 125,
        "Profit": 340
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2017-02-02",
        "Sales": 190,
        "Profit": 980
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2017-02-02",
        "Sales": 140,
        "Profit": 255
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2017-02-02",
        "Sales": 140,
        "Profit": 236
    }, {
        "Country": "Canada",
        "Category": "Cars",
        "Date": "2017-03-02",
        "Sales": 588,
        "Profit": 770
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2017-03-02",
        "Sales": 470,
        "Profit": 255
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2017-03-02",
        "Sales": 365,
        "Profit": 1400
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2019-03-02",
        "Sales": 320,
        "Profit": 1032
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2019-03-02",
        "Sales": 900,
        "Profit": 800
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2019-03-02",
        "Sales": 700,
        "Profit": 800
    },
    {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2018-04-02",
        "Sales": 292,
        "Profit": 644
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2013-04-02",
        "Sales": 260,
        "Profit": 700
    }, {
        "Country": "Canada",
        "Category": "Wood",
        "Date": "2013-04-02",
        "Sales": 348,
        "Profit": 500
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2013-05-02",
        "Sales": 566,
        "Profit": 870
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2013-05-02",
        "Sales": 350,
        "Profit": 400
    }, {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2013-05-02",
        "Sales": 900,
        "Profit": 1200
    },
    {
        "Country": "Germany",
        "Category": "Wood",
        "Date": "2013-02-02",
        "Sales": 62,
        "Profit": 378
    },
    {
        "Country": "Germany",
        "Category": "Bikes",
        "Date": "2013-02-02",
        "Sales": 125,
        "Profit": 340
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2013-02-02",
        "Sales": 190,
        "Profit": 980
    }, {
        "Country": "Canada",
        "Category": "Aircraft",
        "Date": "2013-02-02",
        "Sales": 140,
        "Profit": 255
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2013-02-02",
        "Sales": 140,
        "Profit": 236
    }, {
        "Country": "Canada",
        "Category": "Cars",
        "Date": "2013-03-02",
        "Sales": 588,
        "Profit": 770
    }, {
        "Country": "Canada",
        "Category": "Clothing",
        "Date": "2013-03-02",
        "Sales": 470,
        "Profit": 255
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2013-03-02",
        "Sales": 365,
        "Profit": 1400
    }, {
        "Country": "Canada",
        "Category": "Bikes",
        "Date": "2013-03-02",
        "Sales": 320,
        "Profit": 1032
    }, {
        "Country": "Germany",
        "Category": "Clothing",
        "Date": "2013-03-02",
        "Sales": 900,
        "Profit": 800
    }, {
        "Country": "Germany",
        "Category": "Cars",
        "Date": "2013-03-02",
        "Sales": 700,
        "Profit": 800
    }]
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console